JavaScript jQuery-7 JQuery uses plugins (using plugins, Calendar plugins, form verification plugins)

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)