jQueryUI Dialog_jquery의 간단한 캡슐화

제가 작성한 코드가 약간 왜곡되어 다시 캡슐화해야 합니다! 따라서 다음과 같은 간단한 DialogHelper 보조 클래스가 있습니다. 이 기사의 초점은 아이디어에 맞춰져 있기 때문에 현재 버전의 코드는 여전히 매우 대략적입니다. 이 아이디어는 옳습니다. 앞으로 어떤 내용을 요약하더라도 이 아이디어가 모든 사람에게 영감을 줄 수 있기를 바랍니다. 동시에 모든 사람이 자신의 생각을 확장하고 개선을 위한 더 나은 제안을 할 수 있기를 바랍니다.

DialogHelper의 소스코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//--대화상자 보조 객체-시작
//이제 이 객체는 단순한 캡슐화일 뿐입니다(향후에는 더 복잡해질 수 있습니다).
// jQuery UI 대화 상자의 호출 방법을 단순화하는 기능입니다. 독립적인 DOM 구조를 수정할 필요가 없으며 매개변수 전달 방법이 더 직접적입니다.
DialogHelper = function() {
var m_title = ""; //제목 설정
var m_msg = ""; //메시지 텍스트 설정
var m_btns = null; 버튼
this.dlgDiv = $("

");//이 부분은 상황에 따라 맞춤 설정 가능합니다
//todo: 아이콘, 높이, 너비, 팝업 모드 등 모두 설정해야 합니다.
this.set_Title = function(val) {
this.m_title = val;
}
this.get_Title = function() {
return this.m_title
}
this.set_Msg = function(val) {
this.m_msg = val;
}
this.get_Msg = function() {
return this.m_msg;
}
this .set_Buttons = function(val) {
this.m_btns = val;
}
this.get_Buttons = function() {
return this.m_btns;
}
this.open = function() {
$dlg = this.dlgDiv.clone(); //이 클론은 매우 중요합니다. 그렇지 않으면 텍스트가 반복적으로 추가됩니다.
$dlg.children().filter("p").html(this.dlgDiv.children().filter("p").html() this.get_Msg()) //사용자 정의 메시지 추가
$dlg.dialog({
autoOpen: true,
표시: '블라인드',
숨기기: '폭발',
위치: '중앙',
높이: 260,
너비: 460,
모달: true,
제목: this.get_Title(),
버튼: this.get_Buttons()
})
}
// todo: 메모리 누수 가능성이 있는지 고려
}
//--Dialog 보조 객체-end

DialogHelper 보조 클래스를 사용하는 코드는 다음과 같습니다. :

코드 복사 코드는 다음과 같습니다.

$(document). Ready(function() {
$('#opener').click(function() {
//보조 객체를 초기화합니다. 이 객체는 전역 객체로 한 번 생성하고 반복적으로 사용할 수 있습니다. 더 좋습니다. !
dlgHelper = new DialogHelper();
//개인정보 설정
dlgHelper.set_Title("기존 프로젝트를 삭제하시겠습니까?")
dlgHelper.set_Msg("Perform 이 작업을 수행하면 원래 프로젝트가 삭제됩니다. 계속하시겠습니까? ");
dlgHelper.set_Buttons({
'OK': function(ev) {
/ /여기에서 다른 공용 메소드를 호출할 수 있습니다.
$(this).dialog(' close')
},
'Cancel': function() {
//다른 공용 메소드를 호출할 수 있습니다. 여기에 메소드
$(this).dialog('close');
}
})
//양식 열기
dlgHelper.open()
});
});

코드 패키지 다운로드http://xiazai.jb51.net/201006/yuanma/jQueryUI_DialogDemo.rar