修改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 相关文章推荐
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
Jquery-data的三种用法
Apr 18 jQuery
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
在线引用最新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
php5中类的学习
2008/03/28 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
php接口隔离原则实例分析
2019/11/11 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Python with用法实例
2015/04/14 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python 19个值得学习的编程技巧
2020/08/15 Python
python matplotlib库的基本使用
2020/09/23 Python
如何用python批量调整视频声音
2020/12/22 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
网络技术专业推荐信
2014/02/20 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
有趣的广告词
2014/03/18 职场文书
施工安全协议书范本
2014/09/26 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android