修改Jquery Dialog 位置的实现方法


Posted in Javascript onAugust 26, 2016

今天在做一个功能的时候使用到了Jquery UI中的dialog组件,因为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了。

我今天解决的就是这个问题:解决这种问题有两种方式(个人认为)

1、修改属性让可拖动局域可见,进行拖动

2、不让出现可拖动区域不可见的情况。

针对第一种情况,我没有想到合适的办法。下面给出第二种情况的解决办法,原理就是判断当前dialog的位置,如果拖动位置的可能出现不可见的情况,这个时候修改dialog的位置,dialog有个方法是监听dialog拖动的,我的实现方式就是放在这个方法内的,

代码如下:

/**
* 添加拖拽监听 当UI的位置跑出屏幕外的时候 进行更新
* @param {Object} event
* @param {Object} ui
*/
drag : function(event,ui)
{
	var posX = ui.position.left;
	var posY = ui.position.top;
	if (posX < 5)
	{
		posX = 5;
	}
	if (posY < 5)
	{
		posY = 5;
	}
	ui.position.left = posX;
	ui.position.top = posY;
}

这是一段很简单的代码,没有什么可以说的地方,主要是使用ui的一些属性。

以上这篇修改Jquery Dialog 位置的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
在线引用最新jquery文件的实现方法
Aug 26 #Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 #Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 #Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 #Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 #Javascript
谈谈JavaScript的New关键字
Aug 26 #Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 #Javascript
You might like
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python给你的头像加上圣诞帽
2018/01/04 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
实例详解Python模块decimal
2019/06/26 Python
python中os包的用法
2020/06/01 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
情人节活动策划方案
2014/02/27 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
离职感谢信
2015/01/21 职场文书
2014年个人总结范文
2015/03/09 职场文书
面试通知邮件
2015/04/20 职场文书
西游记读书笔记
2015/06/25 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书