JQuery UI full tutorial (dialog usage tutorial)

The current version of jQuery UI has been updated to 1.8.7. Compared with easyui, jQuery UI is more beautiful And customizable on the interface. So I will explain the usage of some jQuery UI components for future reference. People who are not familiar with jQuery UI can use jQuery UI suite as soon as possible (1) First of all, jQuery UI is frequently used. dialog component: dialog is the pop-up layer we often call, it is widely used, for example: you can use the pop-up layer for login, registration, and message prompts. The following describes in detail how to use dialog. There are six forms of dialog in the official documentation and examples provided by the official website, however, the first five items are similar, including writing code and setting two more attributes. There is no big difference. First, let's take a look at the preliminary Reserve work when using jQuery UI components. First, import the js file to your page. The file to be dependent on is as follows: jquery-ui-1.8.7.custom.css this is the CSS Sample Table of jQuery uikit, demos.css this is the CSS style used in jQuery UIdemo, because I used these styles so it is imported in, if you don't need to do it, you don't need to export this file, jquery-1.4.4.min.js this needless to say, jQuery's core file, without it all work can't be carried out. Remember: Be sure to introduce the jquery-1.4.4.min.js file before introducing other js files, don't ask why, understand jQuery people can think. Jquery-ui-1.8.7.custom.min.js, which is the core js file of jQueryUI, is also necessary. With the above reference, you can use jQuery UI on your page. Let's take a look at a simple DEMO: <div id = "dialog" title = "basic dialog"> <p> This is a dialog box using the default style. </p> </div> Add the above line of code to the page., add a script tag pair and write the following code in the script: $ (function () {$ ("# dialog "). dialog () ;}); open your page and check it. If there is no accident, you will see a dialog box similar to this. This is a pop-up layer, the title of the div is treated as the title of the dialog, and xx is disabled in the upper right corner. You can drag and drop the title in the lower right corner to change the size. This is the default dialog, although we didn't specify the height and width for it, however, it has a default value. If we do not set it, the dialog will pop up in the center of the screen by default, and the size will also have a default value. You can change the size and display the close button, these are all default styles. What should we do if we want to customize the dialog by ourselves and don't want him to show it like this? The following describes some attributes and methods to change the dialog. The attributes used are: autoOpen, modal, buttons, based on these attributes, We can customize an event that will not be automatically opened (when a button is clicked or other events are used to trigger a pop-up dialog event), with a mask (mode form) and the dialogbuttons attribute of the button is a composite attribute, in the form of: buttons {OK: function () {Click to execute the event}, cancel: function () {Click the event to be executed} Where "OK" is the text displayed by the button, and "function" is the event to be executed after the button is clicked. Note that there is a colon between OK and function:, although the button can be in Chinese, for example: OK: function () {}, but remember, the colon between the button text and function must be an English character. Do not write it as a Chinese colon; otherwise, an error may occur. Replace the js script with $ ("# dialog-form "). dialog ({autoOpen: false, modal: true, buttons: {Logon: function () {alert ("You have clicked the logon button ");}}}) // control the function open_dialog () {$ ("# dialog-form") to open dialog "). dialog ("open");} Here the dialog will contain a logon button. It is also a form with a mask. Not Displayed by default. Therefore, we need to add a button on the page to control opening the dialog <input type = "button" value = "open" onclick = "open_dialog (); "/> in this way, the dialog will be opened when you click this button. for example, some people may say that the displayed dialog is the first color and style? Because the skin of jQueryUI components is customizable, not unchanged. You can select your preferred skin style as needed. You can download the UI skin on the official jQueryUI website. You can preview the skin effect before downloading it, after downloading the file, you only need to change the CSS file in the current project to switch the skin. So where does the username: password: and two text boxes displayed in dialog come from? This is a self-written form used to log on to the user. Remember? Dialog specifies a div in the page and obtains the div object. dialog () can be used to generate a dialog. In the same way, we can add the desired form field to this div. This is my custom login form. Styles use the styles provided by the UI. If you think this style is not good, you can customize your own CSS to use it. The complete form code is as follows: <! -- Logon region form information --> <div id = "dialog-form" class = "ui-widget-content ui-corner-all" title = "User Logon"> <p id = "login_tip"> </p> <form id = "login-form"> <fieldset> username: <input type = "text" name = "name" id = "name" class = "text ui-widget-content ui-corner-all"/> password: <input type = "password" name = "password" id = "password" value = "" class = "text ui-widget-content ui-corner-all"/> </ fieldset> </form> </div> You can see that each input tag has a class attribute and three class styles are specified. This is what jQueryUI provides to us. We do not need to write style sheet files. For more attribute applications, refer to the official documentation. Because there are many attributes, we will not describe them one by one. It is very simple. If you need to query it, let's talk about the event calls in dialog. In the preceding example, dialog has only one button for logon. If I want to add another button: Close, what should I do when I click Close to close dialog? In jQueryUI, most component events are called in the following format: $ ("# dialog "). dialog ("close"), where close is the name of the event, so that when I click this button, the dialog can be closed. The same is true if you want to open dialog. $ ("# Dialog"). dialog ("open"); this is used to open the dialog. For more methods, see the document. The functions of the event are different, but the usage is basically the same: both $. dialog ("event name"). In this form, the following uses dialog as an example to implement an instance for ajax registration using a practical dialog + form (only for foreground implementation, the background must be implemented based on your server language .) First, check what is included in the registered dialog. The dialog on the home page is shown as follows: The registry form contains the user name, password, email, and user's birthday, as well as the "Submit" and "cancel button" function descriptions: when the user clicks submit, the client is verified first. If there is any non-conformity, a message is displayed to the user. The prompt is displayed at the top of the form in a conspicuous way, not alert. After the verification is passed, click the submit button to initiate an ajax request, send the form data to the background for processing, and finally record it in the database. If the registration is successful, first check the content in the div in the registry form: <div id = "register-form" class = "ui-widget-content ui-corner-all" title = "User Registration"> <p class = "validateTips"> all form fields are required. </p> <form id = "reg-form"> <fieldset> User Name: <input type = "text" name = "uname" id = "uname" value = "" class = "text ui-widget-content ui-corner-all"/> password: <input type = "password" name = "upass" id = "upass" value = "" class = "text u I-widget-content ui-corner-all "/> email: <input type = "text" name = "email" id = "email" value = "" class = "text ui-widget-content ui-corner-all"/> birthday: <input type = "text" readonly = "readonly" name = "birth" id = "birth" value = "" class = "text ui-widget-content ui-corner-all "/> </fieldset> </form> </div> the above div displays the content of the registry form. There are four items in total, which are the same as those in the dialog, and then let's see how to verify the data. The verification code is as follows: // functions related to the registry list and verification // get name, password, email, and birth objects and add them to an empty object. Alternative var uname =$ ("# uname"), password =$ ("# upass "), email = $ ("# email"), birth = $ ("# birth"), fields = $ ([]). add (uname ). add (password ). add (email), tips = $ (". validateTips "); $ (" # register-form "). dialog ({// when opening the dialog box, remove the style of the form field and set the text to the default value of open: function () {tips. removeClass (). text ("all form fields are required. "); fields. removeCl Ass ("ui-state-error"); fields. val ("") ;}, modal: true, // The mode form autoOpen: false with a mask is displayed, // The buttons: {submit: function () {// The Event var chk = true when you click the submit button; // verify that the Field Length complies with the chk = chk & checkLength (uname, "username ); chk = chk & checkLength (password, "password", 6, 20); chk = chk & checkLength (email, "email", 6, 40 ); chk = chk & checkLength (birth, "birthday", 8, 10); // regular expression to verify that the user name and email are valid chk = chk & checkReg (name, /^ ([\ u4E 00-\ uFA29] | [\ uE7C7-\ uE7F3] | [a-zA-Z]) | _ \ w * $ /, "The user name must start with a letter, underline, or Chinese character. Please modify it and submit it"); chk = chk & checkReg (email,/\ w + ([-+. '] \ w +) * @ \ w + ([-.] \ w + )*\. \ w + ([-.] \ w +) * $/, "enter the correct email format in the following format: admin@yahoo.com"); The checkLength () method and checkReg method are used in the above verification, both methods are custom methods, which are used to verify the field length and the regular expression to verify whether the input is valid. The corresponding methods are also available in the Demo officially provided by jQueryUI, I am modifying the method here, because when the verification fails in the official DEMO and the DIALOG is re-opened, the prompt information and error style of the verification failure are also saved. The method I wrote has been modified. There will be no such problem. The following are the checkLength and checkReg methods. I have clearly written the method annotations and will not explain them any more. I will explain how to add incorrect CSS styles. // Determine whether the length of a field meets the requirements. The four parameters are: o object to be detected, and the display name of the msg object to be detected. // min indicates the minimum length allowed, max maximum length function checkLength (o, msg, min, max) {if (o. val (). length> max | o. val (). length <min) {o. addClass ("ui-state-error "); // Add the CSS style updateTip for the current error field (the length of msg + "must be between" + min + "and" + max + "); // return false to update the information in the prompt area;} else {// If the verification succeeds, the CSS error style of the current object will be removed. removeClass ("ui-state-error"); return true ;}// Method for verifying content through regular expressions. o is a form field object, reg is a regular expression, n is the error message function checkReg (O, reg, n) {if (! Reg. test (o. val () {o. addClass ("ui-state-error"); updateTip (n); return false;} else {o. removeClass ("ui-state-error"); return true ;}} both use an updateTip method, the function of this method is to add a css style to the <p> label, that is, where the error message is displayed, to highlight and prompt the user. The method is as follows: // The method for updating the prompt information. The Transmitted parameter t is the displayed error information, and then the highlighted function updateTip (t) {tips is added to the display information label. text (t ). addClass ("ui-state-highlight");} the verification process is as shown above, the methods are described in detail, you can see that when all user input is verified and passed, it should be like initiating ajax requests in the background. The Code is as follows: a formSerialize () method is used here, which is a jquery. form. the js script file is a jq plug-in for the form, which can serialize the form. In this way, we only need to pass the serialized value to the background, without having to obtain and splice them one by one. If necessary, introduce the script if (chk) {// after the verification is passed, remove the style and error message tips at the prompt. removeClass (). text (""); // serialize the form var user =$ ("# reg-form "). formSerialize (); // initiate an ajax request $. ajax ({type: 'post', www.2cto. comurl: '$ {path}/UserAction? Method = register ', data: user, success: function (msg) {if (msg = "success") {$ ("# register-form "). dialog ("close");} else {alert ("server exception, please try again later") ;}}, error: function () {alert ("ajax request failed ");}});