A detailed analysis of the usage of JQUERY dialog

Source: Internet
Author: User
Tags empty prepare

  This article is mainly on the use of jquery dialog in a detailed analysis of the introduction, the need for friends can come to the reference, I hope to help you.

Today I used the client's dialog box to learn the dialog box in the JQuery UI.   Prepare JQuery Environment   First, we create a button, and when we click this button, a dialog box pops up.   <input type= "button" value= "delete" id= "btn"/>   in order to set this button click event, need to prepare jQuery environment.   <script type= "Text/javascript" src= "Scripts/jquery-1.4.2.js" ></script>   Set button click events in ready.   Code as follows:  $ (function () {   //initialization     $ ("#btn"). Click (function () {      &NB Sp Alert ("BTN is clicked!") ");    }  );   Confirm that this step is not a problem.   Prepare dialog box in the second step, you need to prepare the contents of the dialog box. This content comes from the demo file of the JQuery UI.     Code as follows:  <div id= "dialog-confirm" title= "Empty the Recycle Bin?" >         &NBSP ;<p>              <span class= "Ui-icon ui-icon-alert" style= "Float:left"; margin:0 7px 20px 0; " ></span>              these items would be permanently deleted and cannot to be re Covered. Are you sure?</p>  </div>   in order to use JQUery UI dialog box, you need to add references to these files.    <script type= "Text/javascript" src= "Scripts/jquery.ui.core.js" ></script>  <script Type= "Text/javascript" src= "scripts/jquery.ui.widget.js" ></script>  <script type= "text/" JavaScript "src=" Scripts/jquery.ui.mouse.js "></script>  <script type=" Text/javascript "src=" Scripts/jquery.ui.button.js "></script>  <script type=" Text/javascript "src=" scripts/ Jquery.ui.draggable.js "></script>  <script type=" Text/javascript "src=" scripts/ Jquery.ui.position.js "></script>  <script type=" Text/javascript "src=" scripts/ Jquery.ui.dialog.js "></script>   Add style jquery UI with a lot of styling to decorate, need to refer to the jquery UI style, note, jquery.ui.all.css This file refers to a large number of other style files, copying the contents of the Development-bundlethemesbase folder in the JQuery UI.   <link type= "text/css" href= "Styles/jquery.ui.all.css" rel= "stylesheet"/>   in the Ready function, also initializes the dialog box.   Code as follows:  $ (function () {     //initialization      $ ("#btn"). Click (function () {         alert ("BTN was clicked!"). ");      });        //Initialization dialog      $ ("#dialog-confirm"). Dialog ();  });   Now, when you open this page, you can already see the dialog box.   Through the button pop-up dialog we want the page to initialize on the time we do not see this dialog box, click on the button to appear again. So it takes a few jobs.   First, add a style to the dialog box that doesn't appear by default. Style= "Display:none" so that you don't see this part by default.   Code is as follows:  <div id= "dialog-confirm" title= "Empty the Recycle Bin?" style= "Display:none" >     &NBSP ;<p>          <span class= "Ui-icon ui-icon-alert" style= "Float:left"; margin:0 7px 20px 0; " ></span>          these items would be permanently deleted and cannot to be recovered. Are you sure?</p>  </div>   Then, when initializing the dialog box, do not display, just complete the initialization work.   When initializing the dialog box, pass a parameter Autoopen:false   code as follows:  $ ("#dialog-confirm"). Dialog (     {  &NB Sp      autoopen:false      }  );   In the button click event, pop-up this dialog box. The code is as follows:  $ ("#btn"). Click (function () {     //alert ("Btn clicked!"). ");      $ ("#dialog-confirm"). Dialog ("Open");  });   If you pass close, the dialog box closes.   Implementation Mode dialog box in practical applications, we often need to implement a modal dialog box, in the WEB needs to add a mask layer to block the underlying elements, simulation mode effect, which can be Initialized dialog box, pass a parameter modal:true to achieve. The modified initialization code becomes: The   code is as follows:  $ ("#dialog-confirm"). Dialog (     {         MOD Al:true,            //Create Mode dialog box          autoopen:false,   & nbsp    //Only initialize, do not show      }  ;   Add buttons to the dialog box to add any buttons to the dialog box and customize the event handling for the button. We first add two buttons, one OK, one cancel, and let them close the dialog box first.   Code as follows:  //Initialization dialog  $ ("#dialog-confirm"). Dialog ( {     modal:true,     &NB Sp      //Creation Mode dialog      autoopen:false,      buttons: {   ,   & nbsp   "OK": function (){              $ (this) dialog (' Close ');             &N Bsp       "Cancel": function () {             $ (this) dialog (' Close ');          }      }  };   
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.