修改Jquery Dialog 位置的實現(xiàn)方法
今天在做一個功能的時候使用到了Jquery UI中的dialog組件,因為是一個很簡單的組件,有很多功能都沒有提供,比如說直接獲取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖動的位置看不見的時候,這個時候就是坑了,關閉不了,也拖動不了,這個時候只能刷新頁面來重新初始化界面了。
我今天解決的就是這個問題:解決這種問題有兩種方式(個人認為)
1、修改屬性讓可拖動局域可見,進行拖動
2、不讓出現(xiàn)可拖動區(qū)域不可見的情況。
針對第一種情況,我沒有想到合適的辦法。下面給出第二種情況的解決辦法,原理就是判斷當前dialog的位置,如果拖動位置的可能出現(xiàn)不可見的情況,這個時候修改dialog的位置,dialog有個方法是監(jiān)聽dialog拖動的,我的實現(xiàn)方式就是放在這個方法內的,
代碼如下:
/** * 添加拖拽監(jiān)聽 當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 位置的實現(xiàn)方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
jQuery操作input type=radio的實現(xiàn)代碼
jQuery操作input type=radio的實現(xiàn)代碼,需要的朋友可以參考下2012-06-06jQuery常用事件方法mouseenter+mouseleave+hover
這篇文章主要介紹了jQuery常用事件方法mouseenter、mouseleave和hover方法,下文內容介紹詳細,需要的小伙伴可以參考一下2022-03-03jquery 學習之二 屬性(html()與html(val))
取得第一個匹配元素的html內容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。2010-11-11jquery選擇器中的空格與大于號>、加號+與波浪號~的區(qū)別介紹
這篇文章主要介紹了jquery選擇器中的空格與大于號>、加號+與波浪號~的區(qū)別介紹的相關資料,需要的朋友可以參考下2016-06-06