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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
JavaScript 防篡改对象的用法示例
Apr 24 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
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
简单实现python数独游戏
2018/03/30 Python
Python for循环生成列表的实例
2018/06/15 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
领导失职检讨书
2014/02/24 职场文书
补充协议书范本
2014/04/23 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
赢在执行观后感
2015/06/16 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
 Python 中 logging 模块使用详情
2022/03/03 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏