1. Form Validation plugin--validate
The plugin comes with validation rules that contain required, numeric, URL-based content, instant display of exception information, and also allows for custom validation rules, which are called by plug-ins as follows:
$ (form). Validate ({options})Where the form parameter represents the form element name, the options parameter represents the configuration object when the method is called, and all validation rules and the location where the exception information is displayed are set in the object.
2.Form plug-in--form through the form form plug-in, call the Ajaxform () method, implement Ajax way to submit form data to the server, and through the options object in the method to get the server return data, the call format is as follows:
$ (form). Ajaxform ({options})Where the form parameter represents the form element name; Options is a configuration object that is used to send the AJAX request process to set the data and parameters to be sent.
3. Picture Lightbox plugin--lightbox The plugin can display the selected picture in the form of rounded corners, use the button to view the top and bottom picture, bring the progress bar when loading the picture, and also can browse the picture in the way of auto-play, the call format is as follows:
$ (linkimage). LightBox ({options})Where the Linkimage parameter is the <a> element name that contains the picture, options is the configuration object for the plug-in method.
4. Picture Magnifier plugin--jqzoom
In the call Jqzoom Picture Magnifier plug-in, you need to prepare a small two of the same picture, in the page display small picture, when the mouse in the small picture, call the plug-in Jqzoom () method, display the same large picture area with the small picture, so as to achieve the effect of the magnifying glass, the calling format is as follows:
$ (linkimage). Jqzoom ({options})Where the Linkimage parameter is the <a> element name that contains the picture, options is the configuration object for the plug-in method.
5.cookie plugin--cookie
After using the cookie plugin, it is convenient to save, read, delete the user's information through the cookie object, and to save the user's browsing record through the cookie plugin, which is called in the following format:
Save: $.cookie (Key,value); read: $.cookie (key), delete: $.cookie (key,null)Where parameter key is the name of the saved cookie object, value is the cookie value corresponding to the name.
6.Search Plugin--autocomplete The function of the search plugin is to use the plug-in's AutoComplete () method to bind to the text box, when the text box input characters, the binding plug-in will return a string similar to the character prompt selection, the call format is as follows: $ (textbox). AutoComplete (Urldata,[options]);
6. Right-click menu Plug-in--contextmenu Right-click menu plug-in can be bound to any element of the page, after binding, select the element, right-click, then through the plug-in popup A shortcut menu, click the menu name to do the corresponding action, the calling code is as follows:
$ (selector). ContextMenu (Menuid,{options});The selector parameter is the element that binds the plug-in, Meunid is the shortcut menu element, and options is the configuration object.
7. Custom object-level plug-in--lifocuscolor plug-in custom Lifocuscolor plug-ins can be in the <ul> element, when the mouse in the table items <li> elements move, customize the background color when it gets focus, that is, define <li> The background color when the element is selected, called in the format:
$ (Id). Focuscolor (color)Where the parameter ID represents the ID number of the <ul> element, and color indicates the background color when the <li> element is selected.
8. Custom class-level plug-in--twoaddresult by invoking different methods in the custom plug-in Twoaddresult, you can add and subtract two values, and after importing the plug-in, the calling format is:
$.addnum (P1,P2) and $.subnum (P1,P2)The call format is calculated as the result of adding and subtracting two values, p1 and P2 are arbitrary values.
9.1.jQuery UI plug-in
The function of the drag plugin draggable is to drag the bound element, and when this jquery UI plug-in is bound to the element, it can be implemented by calling the Draggable () method to achieve the effects of the various drag elements, called in the following format:
$ (selector). draggable ({options})The options parameter is the configuration object at the time of the method invocation, and depending on the object you can set various drag effects, such as the "containment" property to specify the drag area, and the Axis property to set the coordinate direction when dragging.
As you can see, because the jquery UI plugin Draggable binds two subclasses <div> elements and sets the containment property value of the configuration object to "parent", these two subclasses <div> Element can be dragged only in the parent box of the outer layer.
9.2Place plug-in--droppable (similar to shopping cart) in addition to dragging any element with the Draggable plugin, you can also call the Droppable UI plug-in to place any dragged element in the specified area, similar to the shopping cart effect, in the following format:
$ (selector). droppable ({options})The selector parameter is a configuration object for the receive drag element, options is the method, and in the object, the drop function indicates that the call to the function is triggered when the dragged element being received completely enters the container of the receiving element.
9.3Drag-and-drop sorting plug-in--sortable the function of the drag-and-drop sorting plugin is to drag sequence elements (such as <option>, <li>) in any position to form a new sequence of elements that implements the function of dragging and sorting, which is called in the following format:
$ (selector). Sortable ({options});The selector parameter is an element for dragging and sorting, and options is the configuration object when the method is called.
9.4.Panel folding plug-in--accordion panel folding plug-in can be implemented in the page specified area like "accordion" folding effect, that is, click on the title to expand the content, and then click on another title, close the expanded content, the call format is as follows:
$ (selector). Accordion ({options});Where the parameter selector is the entire panel element, the options parameter is the corresponding configuration object for the method.
9.5.tab plug-in--tabs Use the tab plug-in to define the <li> option in <ul> as the option title, and then use the <a> element's href property to set the content of the option title, which is called in the following format:
$ (selector). Tabs ({options});The selector parameter is the overall peripheral element of the tab, which contains the tab title and content, and the options parameter is a configuration object of the tabs () method, which also allows the contents of the tab to be loaded in AJAX mode.
9.6. dialog box Plugin--dialog
The dialog plugin can pop up several types of dialogs with animated effects, implementing the functions of the alert () and confirm () functions in the JavaScript code, which are called in the following format:
$ (selector). dialog ({options});The selector parameter is the element that displays the popup dialog box, usually the <div>,options parameter as the method's configuration object, where you can set the type of dialog box, the code that the OK, Cancel button executes, and so on.
9.7.The menu tool plug-in--menu menu tool plug-in allows you to create multi-level inline or pop-up menus through <ul>, which allows you to control the menu swipe with the keyboard orientation key, allowing you to add icons to the menu options, with the following format: $ (selector). Menu ({options}) ; The selector parameter is the outermost <ul> element in the menu list, and the options is the Configuration object for the menu () method.
9.8. Spinner button Plug-in--spinner spinner plug-in can not only enter values directly in the text box, but also by clicking the Up and down buttons on the right of the input box to modify the value of the input box, also support the keyboard up and DOWN ARROW keys to change the input value, the call format is as follows:
$ (selector). Spinner ({options});The selector parameter is a text input box element, optionally the options parameter is a configuration object for the spinner () method, where you can set the maximum and minimum values for the input, get the change values, and set the corresponding events.
9.9. tooltip plugin--tooltip tooltip plug-in can customize the appearance of elements, prompt content support variables, AJAX remote access, you can also customize the location of the cue content display, its invocation format is as follows:
$ (selector). tooltip ({options});Where selector is the element that needs to display the hint information, the option parameter options is the configuration object of the ToolTip () method, where you can set the popup, hidden effect, and location of the cue information.
jquery Basics (Common plugin form validation, image Magnifier, custom object level, JQuery UI, panel folding)
