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)頁(yè)面出現(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();
//獲取頁(yè)面的文檔高度
$(document.body).height();
//獲取頁(yè)面的文檔寬度
$(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();
//獲取頁(yè)面的文檔高度
$(document.body).height();
//獲取頁(yè)面的文檔寬度
$(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)翻頁(yè)特效
- jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
- jquery實(shí)現(xiàn)簡(jiǎn)單的無縫滾動(dòng)
- 六款幫助你實(shí)現(xiàn)驚艷視差滾動(dòng)效果的jQuery插件
- 使用jquery animate創(chuàng)建平滑滾動(dòng)效果（可以是到頂部、到底部或指定地方）
- 基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁(yè)面多個(gè)滾動(dòng)區(qū))
- jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
- JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
- jQuery實(shí)現(xiàn)的簡(jiǎn)單歌詞滾動(dòng)功能示例
相關(guān)文章
jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果
這篇文章主要介紹了jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了jQuery Easyui一些用法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
jquery sortable的拖動(dòng)方法示例詳解
本文以示例的方式為大家介紹下jquery sortable的拖動(dòng)方法的具體實(shí)現(xiàn)，感興趣的朋友可以參考下2014-01-01
本篇文章主要是對(duì)JQuery的$和其它JS發(fā)生沖突的快速解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果,涉及jQuery結(jié)合時(shí)間函數(shù)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
jQuery 學(xué)習(xí)6 操縱元素顯示效果的函數(shù)
jQuery提供了hide() ,show()對(duì)元素進(jìn)行隱藏和顯示，下面看兩個(gè)函數(shù)的應(yīng)用2010-02-02
jQuery中removeData()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeData()方法用法,實(shí)例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery選擇器基礎(chǔ)知識(shí),結(jié)合實(shí)例分析了jQuery選擇器的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下2016-05-05
基于jquery 的一個(gè)progressbar widge
這個(gè)widget是包含在wijmo 項(xiàng)目中的一個(gè)widget。目前此widget已經(jīng)開源基于mit和gpl雙協(xié)議，目前是beta版，可能存在bug。2010-10-10
jQuery Form插件使用詳解_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery Form插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07