> 웹 프론트엔드 > JS 튜토리얼 > jquery.ui.dialog_jquery에 '현재 마우스 위치에서 열기' 기능 추가

jquery.ui.dialog_jquery에 '현재 마우스 위치에서 열기' 기능 추가

WBOY
풀어 주다: 2016-05-16 18:41:12
원래의
1227명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

$("#dialog").dialog({
bgiframe : true,
autoOpen: false,
position: [PosX, PosY], //경고는 " , "(큰따옴표 제외)로 표시되거나 오류가
높이로 보고됩니다. : 300. ,
modal: true,
buttons: {
'새 계정 만들기': 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, " 사용자 이름은 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(password, /^( [0-9a-zA-Z]) $/, "비밀번호 필드는 a-z 0-9만 허용합니다.")

if (bValid) {
$('#users tbody' ).append (''
'' name.val() ''
'' email.val() ''' 비밀번호.val() ''
'')
$(this).dialog('close');
};
},
취소: function() {
$(this).dialog('close')
}
},

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

나중에 " wind"는 jquery.ui.dialog에 "닫을 때 위치를 자동으로 기억"하는 기능을 추가합니다. , 그의 제안에 따라 그는 현재 마우스 위치에서 대화 상자를 열 수 있도록 jquery.ui.dialog의 오버로드 메서드를 정확하게 작성했습니다.

코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.
////////////// ////// ////////////
//jquery.ui.dialog가 열렸을 때 위치 지정
//////////// //////// ///////////////
(function($) {
var OriginOpen = $.ui.dialog.prototype.open
$.ui.dialog.prototype .open = function() {
//var event= window.event || 인수.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, 인수)

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);


"wind"님께 다시 한 번 감사드립니다. 테스트해 주셔서 감사합니다. (ie7,8,firefox3.5,chrome4와 호환 가능)
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿