First, jQuery use plug-in
Plug-in lookup and help
-Plug-in library for the official JQuery website (http://plugins.jquery.com)
A large number of plugins are available. and give out the user rating, version and bug of each plugin.
-The library lists zip file downloads, demos, sample code and tutorials for each plugin
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/76/wKiom1cAyTnSndGiAADBKW6jZSY282.png "title=" Web.png "alt=" Wkiom1caytnsndgiaadbkw6jzsy282.png "/>
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/73/wKioL1cAy2HBAH1UAAA7xF6vNEI150.png "title=" Web.png "alt=" Wkiol1cay2hbah1uaaa7xf6vnei150.png "/>
Using plugins
-Step 1: Import the plug-in package into the page and make sure it is behind the jquery source file
<script src= "Jqeury-1.11.1.js" ></script>
<script></script>
-Step 2: Write or import a custom script file in the page and use the plugin to create or extend the method
$ ("#myID"). Plugins ();
Second, calendar plugin
Calendar Plugin
-Calendar control is one of the more commonly used controls on a Web page, and the support for calendar controls is also added in HTML5
-In addition to HTML5, many jquery plugins are also associated with calendar space, such as DatePicker, My97, and so on in the jquery UI.
-Over the years, the Calendar control layer is out of poverty and users can download the desired calendar control on the Internet according to their needs
MY97 Calendar Plugin
-My97 Calendar is one of the most commonly used calendar plugins for the Internet.
-My97 has a more user-friendly and comprehensive function, and has a very powerful date range limiting function
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/76/wKiom1cA0-TSgpoOAACFtvSQ85s382.png "title=" Web.png "alt=" Wkiom1ca0-tsgpooaacftvsq85s382.png "/>
-MY97 Calendar Plugin use steps
-Step 1: Download My97 related compressed files (CSS, JS, image files), http://www.my97.net/
-Step 2: Introduction of Wdatepicker.js file (only need this one file, CSS file user automatically introduced)
-Step 3: Complete functions as required
Default Calendar
-The following code can display the default My97 calendar in the page
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/73/wKioL1cA1yTRtFfiAAAlt4yogIg638.png "title=" Web.png "alt=" Wkiol1ca1ytrtffiaaalt4yogig638.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M02/ 7e/76/wkiom1ca1pui3p8xaaa59qy0i4i436.png "title=" Web.png "alt=" Wkiom1ca1pui3p8xaaa59qy0i4i436.png "/>650" this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/73/wKioL1cA12ygTSW7AAAfqtSZdeE823.png "title=" Web.png " alt= "Wkiol1ca12ygtsw7aaafqtszdee823.png"/>
Property
-The following are the common properties of My97
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/77/wKiom1cA15HSvDT0AACcQ4J9yKA664.png "title=" Web.png "alt=" Wkiom1ca15hsvdt0aaccq4j9yka664.png "/>650" this.width=650; "src=" http://s2.51cto.com/wyfs02/M00/ 7e/77/wkiom1ca2bywrspmaabhttg82qo191.png "title=" Web.png "alt=" Wkiom1ca2bywrspmaabhttg82qo191.png "/>
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/73/wKioL1cA2OzgEZj0AAA7qsjMDI4736.png "title=" Web.png "alt=" Wkiol1ca2ozgezj0aaa7qsjmdi4736.png "/>
Built-in functions
-$DP. $D (Id,object): the date string in the date box corresponding to the ID, plus the defined date difference, returns the string that was formatted with real.
-ID: ID of the object
-Object: Date difference, can be set to {y: value, M: value, D: Value, H: Value, M: value, S: Value}
-{M:3,d:7} represents 3 months 7 days
Event
-$onpicking: Events that are fired when a date is selected
-$onpicked: Events that are fired after the date is selected
-$onclearing: Events fired when the selected date is clear
-$oncleared: Clears events fired after the selected date
-Event Object:d p
-DP.CAL.GETDATESTR (): Returns the Date object formatted value before selection
-DP.CAL.GETNEWDATESTR (): Returns the formatted value of the selected Date object
Iii. Forms Validation Plugin
Form validation Plug-in
-form verification plug-in is mainly for the value of the form element to verify, and give the corresponding graphics and text hints.
-Common Verification Plugin
-Formvalidator
-Jquery.validator
-Earyform
Formvalidator
-Download the required files for Formvalidator
-Images: The image folder to be used in the verification process
-Style:f Ormvalidator The style folder to use during the validation process Validator.css
-Jqeury_last.js:jquery files that can be replaced by their own
-Formvalidator.js: Validation of the core file, most of the validation rules exist with this
-formvalidatorregex.js: Validation file on custom regular expressions
-index.html: Description, Case, etc. start page
Authentication method
-Formvalidator supports 5 kinds of authentication methods
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/77/wKiom1cA28GiaK8TAAEI32gnLzE251.png "title=" Web.png "alt=" Wkiom1ca28giak8taaei32gnlze251.png "/>
Public functions
-$.formvalidator.initconfig
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/73/wKioL1cA3WixyOxfAABiZ-FTYZU667.png "title=" Web.png "alt=" Wkiol1ca3wixyoxfaabiz-ftyzu667.png "/>650" this.width=650; "src=" http://s4.51cto.com/wyfs02/M00/ 7e/77/wkiom1ca3ohgu3lsaaaamnemjym216.png "title=" Web.png "alt=" Wkiom1ca3ohgu3lsaaaamnemjym216.png "/>
Formvalidator function
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/73/wKioL1cA3gfgADlGAAB7oyW-gZg913.png "title=" Web.png "alt=" Wkiol1ca3gfgadlgaab7oyw-gzg913.png "/>650" this.width=650; "src=" http://s2.51cto.com/wyfs02/M02/ 7e/77/wkiom1ca3ynzpwyzaaau6hphec4902.png "title=" Web.png "alt=" Wkiom1ca3ynzpwyzaaau6hphec4902.png "/>
Invalidator
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/77/wKiom1cA3a6Cq4_LAABJR_gcyf8305.png "title=" Web.png "alt=" Wkiom1ca3a6cq4_laabjr_gcyf8305.png "/>650" this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/ 7e/73/wkiol1ca3pxtbep0aabpjl12mh8724.png "title=" Web.png "alt=" Wkiol1ca3pxtbep0aabpjl12mh8724.png "/>
CompareValidator
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/77/wKiom1cA3hjBitkXAABam5901e4935.png "title=" Web.png "alt=" Wkiom1ca3hjbitkxaabam5901e4935.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/ 7e/77/wkiom1ca3jzhjaaxaabs19wube4326.png "title=" Web.png "alt=" Wkiom1ca3jzhjaaxaabs19wube4326.png "/>
Regexvalidator
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/77/wKiom1cA3mGhObLwAABpzxDUsCU544.png "title=" Web.png "alt=" Wkiom1ca3mghoblwaabpzxduscu544.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M01/ 7e/77/wkiom1ca3ojrhbaraabvyxz-omy685.png "title=" Web.png "alt=" Wkiom1ca3ojrhbaraabvyxz-omy685.png "/>
Summary: This chapter focuses on jQuery using plug-ins (using plug-ins, calendar plugins, form validation plug-ins)
This article from the "Flying Ants" blog, declined to reprint!
JavaScript jQuery-7 JQuery uses plugins (using plugins, Calendar plugins, form verification plugins)