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