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解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
详解YII关联查询
2016/01/10 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP错误机制知识汇总
2016/03/24 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
python实现外卖信息管理系统
2018/01/11 Python
python实现抖音视频批量下载
2018/06/20 Python
python让列表倒序输出的实例
2018/06/25 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python基于event实现线程间通信控制
2020/01/13 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
九年级物理教学反思
2014/01/29 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
Redis三种集群模式详解
2021/10/05 Redis
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers