修改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的一些属性。

以上这篇修改Jquery Dialog 位置的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 修改jquery中dialog的title属性方法(推荐)

    好久都没办法尝试成功 在网上找的经测试也不行 于是在官方文档上看到了 结果终于成功了 $("#overTime").dialog({ autoOpen: false, width: 400, modal: true, title: "Dialog Title", buttons: { "确定": function () { }, "取消": function () { } } }); 在初始化的时候要写title属性(官方文档

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

  • jQuery实现dialog设置focus焦点的方法

    本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ //显示新建项目群组对话框 function showCreateProjectGroupDialog(i) { $("#l

  • jQuery弹出框代码封装DialogHelper

    看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. 复制代码 代码如下: //require ScrollHelper.js function DialogHelper() {     var _this

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • jQuery UI库中dialog对话框功能使用全解析

    对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript 的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 一．开启多个dialog    只要设置不同的id 即可实现. $('#x').dialog(); $('#y').dialog(); 二．修改dialog 样式    在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素.可以看看dialog 的样式,对dialog 的标题背景进行修

  • JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法

    背景:想通过Esc键关闭展示中的Dialog对话框,发现有些对话框可以,有些会失效. 原因分析: 1.对话框上可以输入内容的标签元素可以,反之不行. 2.如果鼠标点击对话框后,也可以Esc键关闭. 可以看出对话框上是需要聚焦就可以了. 解决方案: 方案一: focus:function(){ $("#id").focus(); } 方案二: 延迟聚焦 setTimeout(function() { $("#id").focus(); }, 500); 以上所述是小编

  • 修改Jquery Dialog 位置的实现方法

    今天在做一个功能的时候使用到了Jquery UI中的dialog组件,因为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了. 我今天解决的就是这个问题:解决这种问题有两种方式(个人认为) 1.修改属性让可拖动局域可见,进行拖动 2.不让出现可拖动区域不可见的情况. 针对第一种情况,我没有想到合适的办法.下面给出第二种情况

  • 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获取焦点的方法.分享给大家供大家参考,具体如下: $(document).ready(function () { //初始化新增申请对话框 $("#addBusinessTrip").dialog({ open: function (event, ui) { $(':input', '#addBusinessTripForm').not(':button, :submit, :reset, :hidden').val(''); $("#

  • Android编程自定义对话框(Dialog)位置及大小的方法

    本文实例讲述了Android编程自定义对话框(Dialog)位置及大小的方法.分享给大家供大家参考,具体如下: 代码: package angel.devil; import android.app.Activity; import android.app.Dialog; import android.os.Bundle; import android.view.Gravity; import android.view.Window; import android.view.WindowMana

  • CentOS6.7 mysql5.6.33修改数据文件位置的方法

    CentOS6.7 mysql5.6.33修改数据文件位置的方法

    问题:mysql存放的数据文件,分区容量较小,目前已经满,导致mysql连接不上, 解决方案: 1.删除分区里一个不需要用的数据,如:日志文件等(解决不了根本问题) 2.对某个磁盘扩容 3.修改数据存储位置 修改数据存储位置步骤: 1.查看mysql存储目录 #安装目录 --basedir=/usr #数据存储位置 --datadir=/home/mysqlData/mysql #用户 --user=mysql #日志 --log-error=/home/mysqlData/mysql/loca

  • jQuery Dialog 打开时自动聚焦的解决方法(两种方法)

    下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题.具体实现方法大家可以参考下本文. 方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭"

  • jQuery往textarea中光标所在位置插入文本的方法

    本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <script src="jquery-1.8.1.min.js"></script> <script > $(function() { /* 在textarea处插入文本--Start */ (function($) { $.fn.extend({ insertContent : f

  • 修改jQuery Validation里默认的验证方法

    在最近做的一个项目中,使用jQuery Validation验证日期,遇到的问题和一个没有预料到的情况是,在ASP.NET MVC 3的项目中,对于 <input type="date" data-val="true" />的元素,如果调用form的valid方法验证form,虽然我没有添加日期验证的设置,仅仅type="date",但其依然调用了日期验证逻辑来验证日期格式是否正确.这本来是个不错的行为,但问题在于,其支持的日期格式有

  • vue封装jquery修改自身及兄弟元素的方法

    目录 一.引入Jquery 二.封装 三.引用 1.单文件应用 2.全局引用 在项目中我们经常有,点击某一个元素让其自身样式发生变化,同时其兄弟元素改变的需求,最简单的就是通过Jquery来操作,但是如果需求多的话,那么我们就可以对这个方法进行封装,然后再引入使用.今天我们就来看看这个封装… 一.引入Jquery 1.下载jquery源码: 我们在网页中打开https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js,复制代码粘贴到我们的项目文件中. 2.

随机推荐