修改 Jquery Dialog 的位置

今天在做一个功能的时候使用到了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的一些属性。

时间: 2024-12-14 18:47:36

修改 Jquery Dialog 的位置的相关文章

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

jquery dialog open后,服务器端控件失效的快速解决方法

jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的open后,服务器端控件全部失效了,不能执行相应的后台代码.只是源于jquery默认把dialog添加到body中,而不是原来所在的服务器端的form中了 解决方法: 1.可以调用dialog的open前,$("#dialog").parent().appendTo("form:fi

jquery dialog

jquery dialog 详解 博客分类: JQuery JavaScript 还是先看例子吧.另外如果要拖动.改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js<!DOCTYPE html><html><head><link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel=&

maven本地仓库的配置以及如何修改默认.m2仓库位置

本地仓库是远程仓库的一个缓冲和子集,当你构建Maven项目的时候,首先会从本地仓库查找资源,如果没有,那么Maven会从远程仓库下载到你本地仓库.这样在你下次使用的时候就不需要从远程下载了.如果你所需要的jar包版本在本地仓库没有,而且也不存在于远程仓库,Maven在构建的时候会报错,这种情况可能是有些jar包的新版本没有在Maven仓库中及时更新. 默认仓库的存储位置 Maven缺省的本地仓库路径为${user.home}/.m2/repository具体如下图 自定义修改仓库的存储位置: 可

jquery dialog 参数说明

var dialog = art.dialog({ title: '欢迎', content: '欢迎使用artDialog对话框组件!', icon: 'succeed', follow: document.getElementById('btn2'), ok: function(){ this.title('警告').content('请注意artDialog两秒后将关闭!').lock().time(2); return false; }, button: [ { name: '同意',

JQuery在光标位置插入内容

1 (function($) { 2 $.fn.extend({ 3 insertAtCaret: function(myValue) { 4 var $t = $(this)[0]; 5 //IE 6 if (document.selection) { 7 this.focus(); 8 sel = document.selection.createRange(); 9 sel.text = myValue; 10 this.focus(); 11 } else 12 //!IE 13 if

获取文件的详细属性,大小,修改日期,所在位置等

asp.net 获得文件属性中的修改时间,获得系统文件属性的方法,最后一次写入时间 1 #region 获取文件的详细属性,大小,修改日期,所在位置等 2 /// <summary> 3 /// 获取文件的详细属性,大小,修改日期,所在位置等 4 /// </summary> 5 /// <param name="files">文件的路径</param> 6 /// <returns></returns> 7 pu

jQuery Dialog and timepicker显示层的问题

timepicker官网http://timepicker.co/demos/ 当在dialogue上面调用时间选择时,时间选择的框框被dialogue窗口挡住了. 搜出来的方法说修改css,根本改不了,还是会被它自己的定义覆盖. 这种显然是在js里面设置的了.. 怒了,直接修改js.修改jquery.timepicker.js 因为dialogue里面设置的是100,所以这里就101了..

使用jquery dialog

网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… 我自己简单地写了个使用jquery dialog封装函数,有兴趣的朋友看看. JavaScript(看起来有点多,但放到vs里,ctrl+m+o,还是比较清楚明了的): $.ivanjs = $.ivanjs || {}; $.ivanjs.com = $.ivanjs.com || {}; $.i