jquery easyui滾動條部分設(shè)置介紹
更新時間:2013年09月12日 17:29:39 作者:
dialog并沒有隨著滾動條往下滾動,這時就需要用戶滑動滾動條來定位dialog,在說出解決方案前先來普及一下jquery關(guān)于定位的幾個方法
在使用dialog插件時,默認(rèn)是屏幕居中的,但是當(dāng)頁面出現(xiàn)滾動條時,dialog并沒有隨著滾動條往下滾動,這時就需要用戶滑動滾動條來定位dialog,這不人性化,在說出解決方案前先來普及一下jquery關(guān)于定位的幾個方法
//獲取瀏覽器顯示區(qū)域的高度
$(window).height();
//獲取瀏覽器顯示區(qū)域的寬度
$(window).width();
//獲取頁面的文檔高度
$(document.body).height();
//獲取頁面的文檔寬度
$(document.body).width();
//獲取滾動條到頂部的垂直高度
$(document).scrollTop();
//獲取滾動條到左邊的垂直寬度
$(document).scrollLeft();
ok,下面問題就很好處理了,移動dialog有現(xiàn)成的函數(shù),不過dialog本身沒有move函數(shù),但是dialog是繼承自panel的,panel有move函數(shù),因此可以調(diào)用panel的move函數(shù)來移動dialog
$('#dlg').dialog('open');
$("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});
其中 $(window).height()-250,這里250px是dialog的寬度。
復(fù)制代碼 代碼如下:
//獲取瀏覽器顯示區(qū)域的高度
$(window).height();
//獲取瀏覽器顯示區(qū)域的寬度
$(window).width();
//獲取頁面的文檔高度
$(document.body).height();
//獲取頁面的文檔寬度
$(document.body).width();
//獲取滾動條到頂部的垂直高度
$(document).scrollTop();
//獲取滾動條到左邊的垂直寬度
$(document).scrollLeft();
ok,下面問題就很好處理了,移動dialog有現(xiàn)成的函數(shù),不過dialog本身沒有move函數(shù),但是dialog是繼承自panel的,panel有move函數(shù),因此可以調(diào)用panel的move函數(shù)來移動dialog
復(fù)制代碼 代碼如下:
$('#dlg').dialog('open');
$("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});
其中 $(window).height()-250,這里250px是dialog的寬度。
您可能感興趣的文章:
- 基于jQuery實(shí)現(xiàn)歌詞滾動版音樂播放器的代碼
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動翻頁特效
- jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
- jquery實(shí)現(xiàn)簡單的無縫滾動
- 六款幫助你實(shí)現(xiàn)驚艷視差滾動效果的jQuery插件
- 使用jquery animate創(chuàng)建平滑滾動效果(可以是到頂部、到底部或指定地方)
- 基于Jquery的文字滾動跑馬燈插件(一個頁面多個滾動區(qū))
- jQuery實(shí)現(xiàn)將div中滾動條滾動到指定位置的方法
- JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
- jQuery實(shí)現(xiàn)的簡單歌詞滾動功能示例
相關(guān)文章
jquery dataview數(shù)據(jù)視圖插件使用方法
這篇文章主要介紹了jquery dataview數(shù)據(jù)視圖插件使用方法,數(shù)據(jù)填充與視圖更新利器,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動的相關(guān)資料,需要的朋友可以參考下2015-07-07jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(…)表示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)控制文字內(nèi)容溢出用省略號(…)表示的方法,涉及jQuery針對字符串及樣式操作相關(guān)技巧,需要的朋友可以參考下2016-02-02jQuery實(shí)現(xiàn)彈窗居中效果類似alert()
本文給大家分享基于jquery實(shí)現(xiàn)彈窗居中效果類似于alert(),代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下2017-02-02jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
本篇文章主要介紹了jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08jQuery使用EasyUi實(shí)現(xiàn)三級聯(lián)動下拉框效果
本篇文章主要介紹了jQuery使用EasyUi實(shí)現(xiàn)三級聯(lián)動效果,實(shí)例使用EasyUi實(shí)現(xiàn)三級聯(lián)動技巧,非常具有實(shí)用價值,需要的朋友可以參考下。2017-03-03