修改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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
jquery实现心算练习代码
Dec 06 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
微信小程序实现点赞业务
Feb 10 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写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python监控进程脚本
2018/04/12 Python
彻底理解Python中的yield关键字
2019/04/01 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
python实现无边框进度条的实例代码
2020/12/30 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
技术总监的工作职责
2013/11/13 职场文书
保护环境建议书
2014/03/12 职场文书
演讲稿格式
2014/04/30 职场文书
介绍信如何写
2015/01/31 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers