jquery easyui滚动条部分设置介绍


Posted in Javascript onSeptember 12, 2013

在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法

//获取浏览器显示区域的高度 
$(window).height(); 
//获取浏览器显示区域的宽度 
$(window).width(); //获取页面的文档高度 
$(document.body).height(); 
//获取页面的文档宽度 
$(document.body).width(); 
//获取滚动条到顶部的垂直高度 
$(document).scrollTop(); 
//获取滚动条到左边的垂直宽度 
$(document).scrollLeft();

ok,下面问题就很好处理了,移动dialog有现成的函数,不过dialog本身没有move函数,但是dialog是继承自panel的,panel有move函数,因此可以调用panel的move函数来移动dialog
$('#dlg').dialog('open'); 
$("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});

其中 $(window).height()-250,这里250px是dialog的宽度。
Javascript 相关文章推荐
jquery validate poshytip 自定义样式
Nov 26 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
JavaScript网页定位详解
Jan 13 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 #Javascript
利用jquery包将字符串生成二维码图片
Sep 12 #Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 #Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 #Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 #Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 #Javascript
jquery foreach使用示例
Sep 12 #Javascript
You might like
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python中的元类编程入门指引
2015/04/15 Python
Python语法快速入门指南
2015/10/12 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
keras打印loss对权重的导数方式
2020/06/10 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
求职简历中自我评价
2014/01/28 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
法人授权委托书
2014/09/16 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL