ホームページ >ウェブフロントエンド >jsチュートリアル >jquery.ui.dialog_jqueryに「現在のマウス位置で開く」機能を追加

jquery.ui.dialog_jqueryに「現在のマウス位置で開く」機能を追加

WBOY
WBOYオリジナル
2016-05-16 18:41:121223ブラウズ
コードをコピー コードは次のとおりです:

$("#dialog").dialog({
bgiframe : true,
autoOpen: false,
position: [PosX, PosY], // アラートは次のように表示されます: " , " (二重引用符なし)、またはエラーが報告されます
height : 300. ,
modal: true,
buttons: {
'新しいアカウントの作成': function() {
var bValid = true;
allFields.removeClass('ui-state-エラー') ;

bValid = bValid && checkLength(name, "ユーザー名", 3, 16);
bValid = bValid && checkLength(email, "email", 6, 80); bValid = bValid && checkLength(password, "パ​​スワード", 5, 16);

bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_]) $/i, "ユーザー名は、a ~ z、0 ~ 9、アンダースコアで構成され、文字で始まります。");
// jquery.validate.js (joern 作成)、Scott Gonzalez 提供: http://projects.scottsplayground.com より/email_address_validation/
bValid = bValid && checkRegexp(email, /^((([a-z]|d|[!#$%&'* -/=?^_`{|}~]|[u00A0-uD7FFuF900 -uFDCFuFDF0- uFFEF]) (.([a-z]|d|[!#$%&'* -/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]) )*)| ((x22 )((((x20|x09)*(x0dx0a))?(x20|x09) )?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[ u00A0-uD7FFuF900 -uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20 |x09) )?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])( [a-z] |d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).) (([a-z]) ]|[ u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0 -uFFEF] )*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])).?$/i, "例: ui@jquery.com");
bValid = bValid && checkRegexp(パスワード, /^( [0-9a-zA-Z]) $/, "パスワードフィールドは a-z 0-9 のみを許可します");

if (bValid) {
$('#users tbody' ).append (''
'' name.val() ''
'' email.val() ''' ''
'');
};
},
キャンセル: function() {
$(this).dialog('close');
}
},

: function( ) {
allFields.val('').removeClass('ui-state-error')
}
});


後で参照Wind」はjquery.ui.dialogに「閉じた時の位置を自動で記憶する」機能を追加します。彼の提案に従って、マウスの現在位置でダイアログを開くために、jquery.ui.dialog のオーバーロード メソッドを正確に作成しました。

コードは次のとおりです


コードをコピーします コードは次のとおりです:
/////////////// ////// /////////////
//jquery.ui.dialogを開いた時の位置を指定
//////////// //////// ////////////////
(function($) {
varoriginOpen = $.ui.dialog.prototype.open
$.ui.dialog.prototype .open = function() {
//var イベント = window.event || argument.callee.caller.arguments[0];
//var イベント = イベント || window.event;
var events = getEvent();
//alert(event) // ie と ff の両方で、「[object]」が表示されます
var PosX = 0; PosY = 0;
if (イベント.pageX || イベント.pageY) {
PosX = イベント.pageX;
PosY = イベント.pageY;
else {
PosX = イベント.clientX document.body.scrollLeft - document.body.clientLeft;
PosY = event.clientY document.body.scrollTop -
this.options.position = [PosX, PosY];
//alert(this.options.position);

function getEvent(); ie と ff の両方と互換性のある記述
if (document.all) return window.event
func = getEvent.caller
while (func != null) {
var arg0 = func.arguments; [0];
if ( arg0) {
if ((arg0.constructor == イベント || arg0.constructor == MouseEvent)
|| (typeof (arg0) == "オブジェクト" && arg0 .preventDefault && arg0.stopPropagation)) {
return arg0;
}
func = func.caller;
}
return
}
} )(jQuery);


「風」さん、改めてありがとうございます。テストしていただきありがとうございます。 (ie7,8,firefox3.5,chrome4対応)
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。