為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開”的功能
更新時(shí)間:2009年11月24日 21:30:55 作者:
在使用jquery.ui.dialog的過程中,發(fā)現(xiàn)position參數(shù)有些問題,無法通過position: [PosX, PosY]動(dòng)態(tài)傳遞位置參數(shù)。下面是官方demo 代碼
復(fù)制代碼 代碼如下:
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
position: [PosX, PosY], //alert 出來為:" , "(不含雙引號(hào)),或者報(bào)錯(cuò),不知什么原因。
height: 300,
modal: true,
buttons: {
'創(chuàng)建新賬號(hào)': function() {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid && checkLength(name, "username", 3, 16);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(password, "password", 5, 16);
bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (bValid) {
$('#users tbody').append('<tr>' +
'<td>' + name.val() + '</td>' +
'<td>' + email.val() + '</td>' +
'<td>' + password.val() + '</td>' +
'</tr>');
$(this).dialog('close');
};
},
取消: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
后來參考"wind"的為jquery.ui.dialog 增加“自動(dòng)記住關(guān)閉時(shí)的位置”的功能。,在他的建議下,完全照葫蘆畫瓢寫了個(gè)jquery.ui.dialog的重載方法,實(shí)現(xiàn)在鼠標(biāo)當(dāng)前位置打開dialog
代碼如下
復(fù)制代碼 代碼如下:
///////////////////////////////////
//指定 jquery.ui.dialog打開時(shí)的位置
///////////////////////////////////
(function($) {
var originOpen = $.ui.dialog.prototype.open
$.ui.dialog.prototype.open = function() {
//var event= window.event || arguments.callee.caller.arguments[0];
//var event = event || window.event;
var event = getEvent();
//alert(event) // ie 和 ff下,都顯示 "[object]"
var PosX = 0;
var PosY = 0;
if (event.pageX || event.pageY) {
PosX = event.pageX;
PosY = event.pageY;
}
else {
PosX = event.clientX + document.body.scrollLeft - document.body.clientLeft;
PosY = event.clientY + document.body.scrollTop - document.body.clientTop;
};
this.options.position = [PosX, PosY];
//alert(this.options.position);
originOpen.apply(this, arguments);
};
function getEvent() { //同時(shí)兼容ie和ff的寫法
if (document.all) return window.event;
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent)
|| (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
}
})(jQuery);
再次感謝"wind"。感謝 jww測(cè)試。(已兼容ie7,8,firefox3.5,chrome4)
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)獲取table中鼠標(biāo)click點(diǎn)擊位置行號(hào)與列號(hào)的方法
- jQuery實(shí)時(shí)顯示鼠標(biāo)指針位置和鍵盤ASCII碼
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- jquery實(shí)現(xiàn)的元素的left增加N像素 鼠標(biāo)移開會(huì)慢慢的移動(dòng)到原來的位置
- Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享
- jQuery獲得指定元素坐標(biāo)的方法
- jquery中獲得元素尺寸和坐標(biāo)的方法整理
- JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法
- jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
相關(guān)文章
jQuery中Chosen三級(jí)聯(lián)動(dòng)功能實(shí)例代碼
Chosen 是一個(gè)JavaScript插件,它能讓丑陋的、很長(zhǎng)的select選擇框變的更好看、更方便,不僅如此,它更擴(kuò)大了,增長(zhǎng)了主動(dòng)篩選的功能。接下來通過本文給大家分享chosen 三級(jí)聯(lián)動(dòng)功能,一起看看吧2017-03-03CheckBoxList多選樣式j(luò)query、C#獲取選擇項(xiàng)
使用jquery、C#獲取CheckBoxList選擇項(xiàng),實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-09-09jQuery(1.3.2) 7行代碼搞定跟隨屏幕滾動(dòng)的層
jQuery(1.3.2)7行代碼搞定跟隨屏幕滾動(dòng)的層,代碼很精簡(jiǎn)啊,非常不錯(cuò)。2009-05-05jquery 實(shí)現(xiàn)兩Select 標(biāo)簽項(xiàng)互調(diào)示例代碼
這篇文章主要與大家分享了jquery實(shí)現(xiàn)兩Select標(biāo)簽項(xiàng)互調(diào)的具體實(shí)現(xiàn),比較簡(jiǎn)單,比較實(shí)用2014-09-09用jquery ajax獲取網(wǎng)站Alexa排名的代碼
其實(shí)就是利用了jquery的ajax功能,獲取遠(yuǎn)程的xml文件,讀取指定內(nèi)容的代碼,對(duì)于學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的參考。2009-12-12jQuery插件jsonview展示json數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery插件jsonview展示json數(shù)據(jù)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡(jiǎn)潔自然,涉及jquery鼠標(biāo)hover事件及頁面元素樣式的動(dòng)態(tài)改變技巧,需要的朋友可以參考下2015-08-08