Today I used the client's dialog box 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.
<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.
<script type= "Text/javascript" src= "Scripts/jquery-1.4.2.js" ></script>
Set the Click event for the button in ready.
Copy Code code as follows:
$ (function () {
Class
$ ("#btn"). Click (function () {
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.
Copy Code code as follows:
<div id= "dialog-confirm" title= "Empty the Recycle Bin?" >
<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>
In order to use the 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
The jquery UI is decorated with a number of styles, and needs to refer to the jquery UI style, noting that jquery.ui.all.css this file refers to a large number of other style files, \development-bundle\themes the jquery UI The contents of the \base folder are copied over.
<link type= "Text/css" href= "Styles/jquery.ui.all.css" rel= "stylesheet"/>
In the Ready function, this dialog box is also initialized.
Copy Code code as follows:
$ (function () {
Class
$ ("#btn"). Click (function () {
Alert ("BTN is clicked!") ");
});
Initialize dialog box
$ ("#dialog-confirm"). Dialog ();
});
Now, when you open this page, you can already see the dialog box.
Pop-up dialog by button
We want this dialog to not be visible when we initialize on the page and then appear when we click the button. 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.
Copy Code code as follows:
<div id= "dialog-confirm" title= "Empty the Recycle Bin?" style= "Display:none" >
<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 the dialog box is initialized, it is not displayed, just completes the initialization work.
When you initialize the dialog box, pass a parameter Autoopen:false
Copy Code code as follows:
$ ("#dialog-confirm"). Dialog (
{
Autoopen:false
}
);
In the Click event of the button, the dialog box pops up.
Copy Code code as follows:
$ ("#btn"). Click (function () {
Alert ("BTN is 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, simulate the mode effect, which can be initialized dialog box, passing a parameter modal:true to achieve. The modified initialization code becomes:
Copy Code code as follows:
$ ("#dialog-confirm"). Dialog (
{
Modal:true,//Create modal dialog box
Autoopen:false,//Initialize only, do not show
}
);
Add button to dialog box
You can 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.
Copy Code code as follows:
Initialize dialog box
$ ("#dialog-confirm"). Dialog (
{
Modal:true,//Create modal dialog box
Autoopen:false,
Buttons: {
"OK": function () {
$ (This). dialog (' Close ');
},
"Cancel": function () {
$ (This). dialog (' Close ');
}
}
});
