Jquery UI Dialog is a very good UI plug-in. Next I will introduce you to the beautiful effects prompted on the current page when jquery UI Dialog is used to achieve no jump, for more information, see.
JQuery UI is a jQuery-based open-source JavaScript webpage user interface code library. A visual control that includes underlying user interaction, animation, special effects, and replaceable themes.
Prepare the jQuery Environment
First, create a button. When you click this button, a dialog box is displayed.
The Code is as follows: |
Copy code |
<Input type = "button" value = "delete" id = "btn"/> |
To set the event for clicking this button, you need to prepare the jQuery environment.
The Code is as follows: |
Copy code |
<Script type = "text/javascript" src = "scripts/jquery-1.4.2.js"> </script> |
Set the button clicking event in ready.
The Code is as follows: |
Copy code |
$ (Function (){ // Initialization $ ("# Btn"). click (function (){ Alert ("btn clicked! "); } ); |
Confirm that this step is correct.
Prepare dialog box
Step 2: Prepare the content of the dialog box. The content comes from the jQuery UI demo file.
The Code is as follows: |
Copy code |
<Div id = "dialog-confirm" title = "Empty the recycle bin? "> <P> <Span class = "ui-icon-alert" style = "float: left; margin: 0 7px 20px 0;"> </span> These items will be permanently deleted and cannot be recovered. Are you sure? </P> </Div> |
To use the jQuery UI dialog box, you need to add references to these files.
The Code is as follows: |
Copy code |
<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 uses a large number of styles for modification. You need to reference the jQuery UI format, And the jquery.ui.all.css file references a large number of other style files to copy the content in the development-bundlethemesbase folder of jQuery UI.
The Code is as follows: |
Copy code |
1 <link type = "text/css" href = "styles/jquery.ui.all.css" rel = "stylesheet"/> |
In the ready function, this dialog box is also initialized.
The Code is as follows: |
Copy code |
$ (Function (){ // Initialization $ ("# Btn"). click (function (){ Alert ("btn clicked! "); }); // Initialization dialog box $ ("# Dialog-confirm"). dialog (); });
|
Now, when you open this page, you can see the dialog box.
An instance combined with asp.net
The Code is as follows: |
Copy code |
<Body> <Form id = "form1" runat = "server"> <Div id = "dlg"> <Asp: TextBox ID = "TextBox1" runat = "server"> </asp: TextBox> </Div> <Asp: Button ID = "Showdlg" runat = "server" Text = "..."/> </Form> <Script type = "text/javascript" language = "javascript"> $ (Function (){ $ ("# Dlg"). dialog ({ AutoOpen: false, Closed: true, Width: 450, Modal: true, AppendTo: "form ", Buttons :{ "OK": function (){ $ ("Form"). submit (); }, "Cancle": function (){ $ (This). dialog ("close "); } }, Close: function (){ } }); $ ("# <% = Showdlg. clientID %> "). button (). click (function () {$ ("# dlg "). dialog ("open"); return false }); } ); </Script> </Body> |
Create a simple dialog box:
The Code is as follows: |
Copy code |
<Script type = "text/javascript> $. Fx. speeds. _ default = 1000; $ (Function (){ $ ("# Dialog"). dialog ({ AutoOpen: false, Show: "blind ", Hide: "explode" });
$ ("# Opener"). click (function (){ $ ("# Dialog"). dialog ("open "); Return false; }); }); Script> <Script type = "text/javascript> $. Fx. speeds. _ default = 1000; $ (Function (){ $ ("# Dialog"). dialog ({ AutoOpen: false, Show: "blind ", Hide: "explode" });
$ ("# Opener"). click (function (){ $ ("# Dialog"). dialog ("open "); Return false; }); }); Script> |
Page:
The Code is as follows: |
Copy code |
<Div class = "demo"> <Div id = "dialog" title = "Basic dialog box"> <P> This is a dialog box that allows you to move, zoom, and close the "x" icon. </p> </Div> <Button id = "opener"> Open dialog box </button> </Div>
<Div class = "demo"> <Div id = "dialog" title = "Basic dialog box"> <P> This is a dialog box that allows you to move, zoom, and close the "x" icon. </p> </Div> <Button id = "opener"> Open dialog box </button> </Div>
|