修改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 相关文章推荐
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
vue 如何使用递归组件
Oct 23 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
资料注册后发信小技巧
2006/10/09 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
javascript 闭包
2011/09/15 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
Javascript继承机制详解
2017/05/30 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
PyQt5实现简易电子词典
2019/06/25 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python 远程开关机的方法
2020/11/18 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
人事专员岗位职责
2013/11/20 职场文书
普通员工辞职信
2014/01/17 职场文书
采购员岗位职责
2015/02/03 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
python神经网络ResNet50模型
2022/05/06 Python
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL