[Jquery] Simple encapsulation of jqueryui Dialog

Source: Internet
Author: User

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:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.