jquery easyui滾動條部分設置介紹
更新時間：2013年09月12日 17:29:39 作者：
dialog并沒有隨著滾動條往下滾動，這時就需要用戶滑動滾動條來定位dialog，在說出解決方案前先來普及一下jquery關(guān)于定位的幾個方法
在使用dialog插件時，默認是屏幕居中的，但是當頁面出現(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的寬度。
復制代碼 代碼如下:
//獲取瀏覽器顯示區(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的寬度。
您可能感興趣的文章:
- 基于jQuery實現(xiàn)歌詞滾動版音樂播放器的代碼
- JQuery插件iScroll實現(xiàn)下拉刷新，滾動翻頁特效
- jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
- jquery實現(xiàn)簡單的無縫滾動
- 六款幫助你實現(xiàn)驚艷視差滾動效果的jQuery插件
- 使用jquery animate創(chuàng)建平滑滾動效果（可以是到頂部、到底部或指定地方）
- 基于Jquery的文字滾動跑馬燈插件(一個頁面多個滾動區(qū))
- jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法
- JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
- jQuery實現(xiàn)的簡單歌詞滾動功能示例
相關(guān)文章
jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果
這篇文章主要介紹了jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了jQuery Easyui一些用法，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
本文以示例的方式為大家介紹下jquery sortable的拖動方法的具體實現(xiàn)，感興趣的朋友可以參考下2014-01-01
本篇文章主要是對JQuery的$和其它JS發(fā)生沖突的快速解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了jQuery實現(xiàn)的左右移動焦點圖效果,涉及jQuery結(jié)合時間函數(shù)響應鼠標事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
jQuery提供了hide() ,show()對元素進行隱藏和顯示，下面看兩個函數(shù)的應用2010-02-02
這篇文章主要介紹了jQuery中removeData()方法用法,實例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery選擇器基礎知識,結(jié)合實例分析了jQuery選擇器的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下2016-05-05
這個widget是包含在wijmo 項目中的一個widget。目前此widget已經(jīng)開源基于mit和gpl雙協(xié)議，目前是beta版，可能存在bug。2010-10-10
jQuery Form插件使用詳解_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了jQuery Form插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07