JQuery UI Dialog usage (1/2)

The client's dialog box was used to learn the dialog box in the jquery UI.

Preparing for the jquery environment
First, we create a button, and when we click on the button, a dialog box pops up.

1 <input type= "button" value= "delete" id= "btn"/>

In order to set this button to click on the event, you need to prepare the jquery environment.

1 <script type= "text/web Effects" src= "Scripts/jquery-1.4.2.js" ></script>

Set the Click event for the button in ready.

1 $ (function () {
2//initialization
3 $ ("#btn"). Click (function () {
4 Alert ("BTN" was clicked!) ");
5}
6);

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.

1 <div id= "dialog-confirm" title= "Empty the Recycle Bin?" >
2 <p>
3 <span class= "Ui-icon ui-icon-alert" style= "Float:left"; margin:0 7px 20px 0; " ></span>
4 these items would be permanently deleted and cannot to be recovered. Are you sure?</p>
5 </div>

In order to use the JQuery UI dialog box, you need to add references to these files.

1 <script type= "Text/javascript" src= "Scripts/jquery.ui.core.js" ></script>
2 <script type= "Text/javascript" src= "Scripts/jquery.ui.widget.js" ></script>
3 <script type= "Text/javascript" src= "Scripts/jquery.ui.mouse.js" ></script>
4 <script type= "Text/javascript" src= "Scripts/jquery.ui.button.js" ></script>
5 <script type= "Text/javascript" src= "Scripts/jquery.ui.draggable.js" ></script>
6 <script type= "Text/javascript" src= "Scripts/jquery.ui.position.js" ></script>
7 <script type= "Text/javascript" src= "Scripts/jquery.ui.dialog.js" ></script>

Add Style

The jquery UI uses a number of styles to decorate, and needs to refer to the jquery UI style, note that the Jquery.ui.all.css tutorial this file refers to a large number of other style files, bringing the jquery UI The contents of the Development-bundlethemesbase folder are copied over.

1 <link type= "text/css" href= "Styles/jquery.ui.all.css" rel= "stylesheet"/>
In the Ready function, this dialog box is also initialized.

1 $ (function () {
2//initialization
3 $ ("#btn"). Click (function () {
4 Alert ("BTN" was clicked!) ");
5});
6
7//Initialization dialog box
8 $ ("#dialog-confirm"). Dialog ();
9});

Now, when you open this page, you can already see the dialog box.

Home 1 2 last page