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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.