178th, Jquery-ui, the front end of the FAQ--dialog UI

Jquery-ui, Front end--Dialog UI

Learning Essentials:

1. Turn on Multiple dialog

2. Modify the dialog style

The properties of the 3.dialog () method

Event of the 4.dialog () method

Use on () in 5.dialog

The dialog () method, which implements the dialog box function for the specified chunk

A Open multiple

Dialog we can open multiple dialog at the same time, as long as you set a different ID.

$ (' #reg '). dialog (); $ (' #login '). dialog ();

Two Modify the dialog style

In the Pop-up Dialog dialog box, open Firebug in Firefox or right-click to view elements. In this way, we can look at the dialog style and modify it according to the style. We modify the title background of dialog in order to conform to the theme of the website.

{ background:url (.. /img/ui_header_bg.png);}

Note: Other modification scenarios are similar.

Three Properties of the dialog () method

There are two forms of the dialog: 1.dialog (options), options are the parameters of the object key-value pairs, each key-value pair represents an option, 2.dialog (' action ', param), the action is the string that operates the dialog method, param is an option for options.

The dialog () method, which receives an object that sets the various parameters of the dialog box in the form of a key-value pair

Dialog appearance options

Title of the title String dialog box, which can be set directly on the DOM element

The buttons object is added to the dialog by the object key-value pair method. The key is the name of the button, and the value is the callback function that is called after the user clicks

Html

<DivID= "header">    <Divclass= "Header_main">        <H1>Know the question</H1>        <Divclass= "Header_search">            <inputtype= "text"name= "Search"class= "Search"/>        </Div>        <Divclass= "Header_button">            <inputtype= "button"value= "Query"ID= "Search_button"/>        </Div>        <Divclass= "Header_member">            <ahref="###"ID= "Reg_a">Registered</a> | <ahref= "javascript:void (0)"ID= "Login_a">Login</a>        </Div>    </Div></Div><DivID= "Reg">form Area</Div>

$ (' #reg_a '). Click (function  () {        $ (' #reg '). Dialog ({            ' title ': ' Member Registration ',        //  The title of the title String dialog box can be set directly on the DOM element            ' buttons ':                {' commit ':function () {    // The buttons object is added to the dialog by the object key-value pair method. The key is the name of the button, the value is the callback function called after the user clicks                                     },                ' reset ':function () {    //  The buttons object is added to the dialog by the object key-value pair method. The key is the name of the button, the value is the callback function called after the user clicks                                     }}        )     ;

178th, Jquery-ui, Front End--dialog UI