Jquery UI dialog box Learning

Today, I found another good thing: jquery UI, learning and learning. The official website is very detailed, because my English is not very good! So I don't know much about it! If you have any experts, please give me more advice. Thank you!
Official Website: http://jqueryui.com/demos
Introduction:
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.

Usage:
First, import the JS and CSS files:

<Link href = "../styles/jquery-ui-1.8.6.custom.css" mce_href = "styles/jquery-ui-1.8.6.custom.css" rel = "stylesheet" type = "text/CSS"/>
<SCRIPT src = "../scripts/jquery-1.4.2.min.js" mce_src = "scripts/jquery-1.4.2.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "../scripts/jquery-ui-1.8.6.custom.min.js" mce_src = "scripts/jquery-ui-1.8.6.custom.min.js" type = "text/JavaScript"> </SCRIPT>

You can also download the required files from the official website.

Each jquery UI component provides a standard jquery method that can be connected in series. When creating an instance, you only need to call the component method on the jquery object. For example:

$ ("# Login-form"). Dialog (); // create dialog box

The component methods can be used in tandem:

Create an object that can be dragged and resized

$ ("# ID"). draggable (). resizable ();

Create a tab and set the automatic switch label every 5 seconds

$ ("# News-panel"). tabs (). tabs ("Rotate", 5000 );

Create a simple dialog box:

View plaincopy to clipboardprint?
<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:

View plaincopy to clipboardprint?
<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>
 

During normal usage, It would be troublesome to operate on the display and hiding of multiple Div, so I wrote a simple method to pass in the DIV ID:

View plaincopy to clipboardprint?
<SCRIPT type = "text/JavaScript" Language = "JavaScript"> <! --
// Hide the layer and pass in the DIV ID
Function hidediv (ID ){
VaR divid = "#" + ID;
$ (Divid). Dialog ("close ")
Return false;
}
// Display layer, input Div ID
Function showdiv (ID ){
VaR divid = "#" + ID;
$ (Divid). Dialog ({
Autoopen: false,
Show: "blind ",
Hide: "explode"
})
$ (Divid). Dialog ("open ");
Return false;
}

// --> </SCRIPT>
<SCRIPT type = "text/JavaScript" Language = "JavaScript"> <! --
// Hide the layer and pass in the DIV ID
Function hidediv (ID ){
VaR divid = "#" + ID;
$ (Divid). Dialog ("close ")
Return false;
}
// Display layer, input Div ID
Function showdiv (ID ){
VaR divid = "#" + ID;
$ (Divid). Dialog ({
Autoopen: false,
Show: "blind ",
Hide: "explode"
})
$ (Divid). Dialog ("open ");
Return false;
}

// --> </SCRIPT>

Call:

View plaincopy to clipboardprint?
<Div id = "div1" Title = "Basic dialog box" style = "display: none" mce_style = "display: none">
<P>
Username <asp: textbox id = "textbox3" runat = "server"> </ASP: textbox>
</P>
<P>
Password <asp: textbox id = "textbox4" runat = "server" textmode = "password"> </ASP: textbox>
</P>
<Div style = "text-align: Right" mce_style = "text-align: Right">
<Asp: button id = "button2" runat = "server" text = "Submit" onclientclick = "hidediv ('div1 ');"/>
<Input name = "name" type = "button" onclick = "hidediv ('div1 ');" value = "close"/>
</Div>
</Div>
</Div>
<Input name = "name" type = "button" onclick = "showdiv ('div1 ');" value = "display"/>
<Div id = "div1" Title = "Basic dialog box" style = "display: none" mce_style = "display: none">
<P>
Username <asp: textbox id = "textbox3" runat = "server"> </ASP: textbox>
</P>
<P>
Password <asp: textbox id = "textbox4" runat = "server" textmode = "password"> </ASP: textbox>
</P>
<Div style = "text-align: Right" mce_style = "text-align: Right">
<Asp: button id = "button2" runat = "server" text = "Submit" onclientclick = "hidediv ('div1 ');"/>
<Input name = "name" type = "button" onclick = "hidediv ('div1 ');" value = "close"/>
</Div>
</Div>
</Div>
<Input name = "name" type = "button" onclick = "showdiv ('div1 ');" value = "display"/>

As follows:

Set attribute values when creating an instance
When creating a component instance, set the attributes of the instance with object parameters. $ (". Class"). component name ({attribute name 1: value 1, attribute name 2: Value 2 });
 
For example:

$ (". Class"). draggable ({axis: "X", cursor: "crosshair "});
 
Get Attribute Value
After the component is instantiated, the attribute value can be obtained through the option method.

VaR A = $ (". Class"). component name ("option", attribute name );
 
For example:

VaR axis = $ (". Class"). draggable ("option", "axis ");
 
Resetting property values
After the component is instantiated, You can reset the attribute value using the option method.

$ (". Class"). component name ("option", attribute name, attribute value );
 
For example:

$ (". Class"). draggable ("option", "axis", "Y ");
 

Method:
Open. Dialog ("open ")
The dialog box is displayed.

Isopen. Dialog ("isopen ")
Returns true if the dialog box is visible.

Movetotop. Dialog ("movetotop ")
Bring the dialog box to the forefront.

Close. Dialog ("close ")
Close the dialog box.

Destroy. Dialog ("Destroy ")
Destroy dialog box instance.

Disable. Dialog ("Disable ")
Operation prohibited dialog box.

Enable. Dialog ("enable ")
Allow operation dialog box.

Option. Dialog ("option", optionname [, value])
Get the properties of the dialog box and set the properties when passing the value parameter.

Attribute reference can go to http://jqueryui.net/dialog/ Chinese documentation