修改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 UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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代码(星期六,星期日总和)
2009/11/12 PHP
基于php 随机数的深入理解
2013/06/05 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue配置接口域名方法总结
2019/05/12 Javascript
在Mac OS上搭建Python的开发环境
2015/12/24 Python
查看keras的默认backend实现方式
2020/06/19 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
小学科学教学反思
2014/01/26 职场文书
元旦晚会策划方案
2014/02/18 职场文书
个人委托书怎么写
2014/04/04 职场文书
自主招生推荐信范文
2014/05/10 职场文书
法制宣传月活动方案
2014/05/11 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
要账委托书范本
2014/09/15 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
P站美图推荐——变身女主角特辑
2022/03/20 日漫