修改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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
js获取form表单中name属性的值
Feb 27 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解压文件代码实现php在线解压
2014/02/13 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
JavaScript字符串对象
2017/01/14 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
Python编程入门的一些基本知识
2015/05/13 Python
Django返回json数据用法示例
2016/09/18 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
初中学生操行评语
2014/12/26 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python