Home > Developer > Web Develop
The jquery UI is very similar to the dialog in dialog and easy UI, but it has not been used at all in the recent past and has not been forgotten for some time, this essay introduces this control.
1. Example
The official website source code gives some examples, first to see what the instance looks like.
A. Default features
is also the simplest application, that is, open a dialog box, the code is as follows
<!doctype html>Refer to a bunch of JS files, this is related to the type of selection when downloading, you can choose All JQuery UI Downloads, you can also select the component to use in the current page download. Key code $ ("#dialog"). Dialog (), a dialog box pops up when the page loads. Effects such as 1
Figure 1B. Modal dialog box
The key code is as follows:
$ (function () { $ ("#dialog-message"). Dialog ({ modal:true, buttons: { ok:function () { $ (this). Dialog ("Close");}});The function is to pop a modal dialog box, mode:true, in fact, can not go back to the back of the parent page, unless the current dialog box is closed. An OK Close button is added to the back of the dialog box, with the effect of 2
Figure 2C. confirmation dialog box
The key code is as follows:
$ (function () { $ ("#dialog-confirm"). Dialog ({ resizable:false, height: "Auto", width:400, Modal:true, buttons: { "Delete all Items": function () {
Here you can add some action $ (this). dialog ("Close"); }, cancel:function () { $ (this). dialog ("Close"); } }); });Add two buttons, a confirmation, a cancellation, you can do some operations, in fact, not limited to these two buttons, if necessary, you can add any number of buttons below, to achieve any number of functions. The effect is as follows 3
Figure 3dialog box with form function
This example is somewhat complex and can be used to validate, request, and so on, the key code is as follows
<!doctype html>This is a dialog box with the request function, the code is very rigorous
var dialog, form,
Emailregex =/^[a-za-z0-9.! #$%& ' *+\/=?^_ ' {|} ~-][email protected][a-za-z0-9] (?: [a-za-z0-9-]{0,61}[a-za-z0-9])? (?:\. [A-za-z0-9] (?: [a-za-z0-9-]{0,61}[a-za-z0-9])?) *$/,
Name = $ ("#name"),
email = $ ("#email"),
Password = $ ("#password"),
AllFields = $ ([]). Add (Name). Add (password),
Tips = $ (". Validatetips");Define the element variable, the validation to use, AllFields = $ ([]). Add (Name). Add (password), which adds the variables you want to use to the collection, to add and remove CSS styles, which are used later, very cleverly, $ ([ ]) This can be used to add multiple elements to a collection.
function Updatetips (t) {
Tips
. Text (t)
. addclass ("Ui-state-highlight");
SetTimeout (function () {
Tips.removeclass ("Ui-state-highlight", 1500);
}, 500);
}Adding text and CSS styles to an element, and removing the style within 500 milliseconds, does not understand. Removeclass ("Ui-state-highlight", 1500) what does the following parameter 1500 mean
function Checklength (o, N, Min, max) {
if (O.val (). length > Max | | o.val (). Length < min) {
O.addclass ("Ui-state-error");
Updatetips ("Length of" + N + "must be between" +
Min + "and" + Max + ".");
return false;
} else {
return true;
}
}Check the length of the input text, 4 parameters are the element itself, the element name, the minimum length, the maximum length.
function Checkregexp (o, RegExp, n) {
if (! (Regexp.test (O.val ()))) {
O.addclass ("Ui-state-error");
Updatetips (n);
return false;
} else {
return true;
}
}Use regular expressions to check if an element conforms to a rule, 3 parameters, the element itself, a regular expression, and an error prompt.
function AddUser () {
var valid = true;
Allfields.removeclass ("Ui-state-error");valid = valid && checklength (name, "username", 3, 16);
valid = valid && checklength (email, "email", 6, 80);
valid = valid && checklength (password, "password", 5, 16);valid = valid && checkregexp (name,/^[a-z] ([0-9a-z_\s]) +$/i, "Username may consist of a-Z, 0-9, underscores, SPAC ES and must begin with a letter. ");
valid = valid && checkregexp (email, emailregex, "eg. [email protected] ");
valid = valid && checkregexp (password,/^ ([0-9a-za-z]) +$/, "password field only allow:a-z 0-9");if (valid) {
$ ("#users tbody"). Append ("<tr>" +
"<td>" + name.val () + "</td>" +
"<td>" + email.val () + "</td>" +
"<td>" + password.val () + "</td>" +
"</tr>");
Dialog.dialog ("close");
}
return valid;
}Add a user's method, verify the method valid = valid && The use of this is very ingenious, continuous use of && operation, the writing here is very flexible and ingenious. You can implement specific functions here, or you can add action,form to a specific page within a form.
Dialog = $ ("#dialog-form"). Dialog ({
Autoopen:false,
height:400,
WIDTH:350,
Modal:true,
Buttons: {
"Create an Account": AddUser,
Cancel:function () {
Dialog.dialog ("close");
}
},
Close:function () {
form[0].reset ();
Allfields.removeclass ("Ui-state-error");
}
});Here is the main function, a definition of a dialog box, which has a 2 buttons, one is to add an account, access to the AddUser function, one is to cancel, directly define the close dialog box, and finally define the default shutdown function, the form to clear the value of the element, clear the error prompt.
form = Dialog.find ("form"). On ("Submit", function (event) {
Event.preventdefault ();
AddUser ();
});Defining a form is actually a form in the page, and it also defines the request action at the time of the commit, cancels the default event first, and then executes the adduser.
$ ("#create-user"). button (). On ("click", Function () {
Dialog.dialog ("open");
});To add a user button to bind an event, there is no direct binding event here. Click, no live, no trigger,on is a binding function method that is officially recommended by jquery. Note that this is not the time to display the dialog box when the page is loaded, but to click on the Add account to pop up the dialog box, so define this dialog box "dialog = $ (" #dialog-form "). Dialog ({", click the Add button to pop up the dialog box " Dialog.dialog ("open"); ".
Pages such as 4
Figure 4Click the Add User popup dialog box 5
Figure 5When element validation fails 6
Figure 6This example is classic!
D. The dialog box that drives the drawing function
The key code is as follows:
$ (function () { $ ("#dialog"). Dialog ({ autoopen:false, show: { effect: "Blind", duration:1000 }, Hide: { effect: "Explode", duration:1000 } }); $ ("#opener"). Click (function () { $ ("#dialog"). Dialog ("Open"); });Define the display and shadow effect, Effect: "Blind": Turn the shutter effect on and off, from top to bottom, effect: "Explode" when closed is an outbreak, fragmentation effect.
Shutter effect such as 7
Figure 7Explosion Effect 8
Figure 8Ditto, note that this is not the page load when the dialog box is displayed, but click Add account when the dialog box pops up, so you have to define this dialog box "$ (" #dialog "). Dialog ({,", click the Add button when the dialog box "Dialog.dialog (" Open ");
2. Properties, Events, methods
For more information about properties, events and methods, you can view Chinese documents http://jqueryui.net/dialog/
dialog in the jquery UI, examples of official web Classics
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
