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 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
easyui validatebox验证
Apr 29 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
微信小程序实现轮播图效果
Sep 07 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 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 字符串分割和比较
2009/10/06 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
python访问抓取网页常用命令总结
2017/04/11 Python
Django内容增加富文本功能的实例
2017/10/17 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python修改字典键(key)的方法
2019/08/05 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
python输入中文的实例方法
2020/09/14 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
幼儿园运动会入场词
2014/02/10 职场文书
房屋租赁意向书
2014/04/01 职场文书
最美护士演讲稿
2014/08/27 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
赢在执行观后感
2015/06/16 职场文书
公司董事任命书
2015/09/21 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python