Simple encapsulation of Dialog in jQueryUI _ jquery

In the past few days, I am working on an Interactive Prototype. For the first time, a large number of jQueryUI is used, which is really very convenient and easy to use. Some of the features use the pop-up confirmation box. I saw the example of jQueryUIDialog. The effect is good, it's just a bit awkward to use. The code is a bit unscrewed and needs to be encapsulated! So we have the following simple DialogHelper helper class, because the focus of this article is the idea, so the current version of the code is still very rough. The train of thought is correct. We hope that this train of thought will give you some inspiration. At the same time, we welcome everyone to think and propose better suggestions for improvement.

The source code of DialogHelper is as follows:

The Code is as follows:

// -- Auxiliary object of the dialog box-begin
// This object is simple encapsulation (it may be more complicated in the future ).
// Its function is to simplify the calling method of the dialog of jQuery UI, without modifying the independent DOM structure. The parameter passing method is more direct.
DialogHelper = function (){
Var m_title = ""; // set the title
Var m_msg = ""; // set the message body
Var m_btns = null; // set button
This. dlgDiv = $ ("

"); // This part can be customized as needed
// Todo: You can set the icon, height, width, and pop-up mode.
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 (); // this clone is important; otherwise, the body is added repeatedly.
$ Dlg. children (). filter ("p" 2.16.html (this. dlgDiv. children (). filter ("p" ).html () + this. get_Msg (); // Add custom messages
$ Dlg. dialog ({
AutoOpen: true,
Show: 'blind ',
Hide: 'plode ',
Position: 'center ',
Height: 260,
Width: 460,
Modal: true,
Title: this. get_Title (),
Buttons: this. get_Buttons ()
});
}
// Todo: Check whether memory leakage is possible.
}
// -- Dialog Box secondary object-end

The code for using the DialogHelper helper class is as follows:

The Code is as follows:

$ (Document). ready (function (){
$ ('# Opener'). click (function (){
// Initialize a secondary object. This object can be used as a global object only once and used repeatedly!
DlgHelper = new DialogHelper ();
// Set personalized information
DlgHelper. set_Title ("are you sure you want to delete the existing project? ");
DlgHelper. set_Msg ("after this operation, the original project will be deleted. Are you sure you want to do this? ");
DlgHelper. set_Buttons ({
'OK': function (ev ){
// Other public methods can be called here.
$ (This). dialog ('close ');
},
'Cancel': function (){
// Other public methods can be called here.
$ (This). dialog ('close ');
}
});
// Open the form
DlgHelper. open ();
});
});

Code package download http://xiazai.jb51.net/201006/yuanma/jQueryUI_DialogDemo.rar