[Jquery] Simple encapsulation of jqueryui Dialog

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 jqueryui dialog example, and the results are pretty good, it's a bit awkward to use.CodeA little unscrew. You need to encapsulate it again! So we have the following simple dialoghelper helper class, becauseThis articleArticleSharing focuses on ideasSo the code of the current version 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.

Dialoghelper'sSource codeAs follows:

// -- Auxiliary object of the dialog box-begin // This object is only a simple encapsulation (it may be more complex 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 the button this. dlgdiv =$ ("<div> <p> <SPAN class = \" UI-Icon UI-icon-alert \ "style = \" float: Left; margin: 0 7px 20px 0; \ "> </span> </P> </div>"); // 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 very 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 message $ 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 for Memory leakage.} // -- Dialog Box secondary object-end

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

 
$ (Document ). ready (function () {$ ('# opener '). click (function () {// initialize a secondary object. This object can be created only once as a global object and used repeatedly! Dlghelper = new dialoghelper (); // set the personalized information dlghelper. set_title ("are you sure you want to delete the existing project? "); Dlghelper. set_msg (" to perform this operation, the original project will be deleted. Are you sure you want to do this? "); Dlghelper. set_buttons ({'confirmed': 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 ();});});
 

Download source code: