Home > Developer > Web Develop
On many occasions, we call jquery's plugin to complete a function, such as a slider.
For example, make a div that passes "$ ( " #slider "). Slider (); Way to turn the div directly into a slider, more readable and versatile than the slider ($ (' #slider ')) closer to jquery's chained invocation notation.
So, we're also going to write plugins for jquery. Facilitates component-in-project.
The method is very simple, so write a demo of the test as a basis for verification.
Define HTML, let's say we want to change the test div to a width of 200px, the background color red is such a plug-in function.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <DivID= ' Test '></Div>
<Scripttype= ' Text/javascript 'src= "Jquery-1.11.3.min.js"></Script> <Scripttype= ' Text/javascript '></Script> </Body></HTML>
Write a plug-in function called test to complete the functionality of the plugin. You can use this directly to represent the element that the selector chooses to encapsulate the object.
function Test () { this. css (' background-color ', ' Red '); this. css (' width ', ' n '); this. css (' height ', ' n '); }To complete a self-executing function, the key is to hook up the plugin function into the Jquery.fn.
(function(jquery) { = test; }) (jQuery);Call the test plug-in function directly after selecting the test div with the jquery selector.
$ (' #test '). Test ();So, the simplest plug-in is done.
Code:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <DivID= ' Test '></Div> <Scripttype= ' Text/javascript 'src= "Jquery-1.11.3.min.js"></Script> <Scripttype= ' Text/javascript '>functionTest () { This. CSS ('Background-color','Red'); This. CSS ('width', ' $'); This. CSS ('Height', ' $'); } (function(jquery) {jquery.fn.test=test; }) (jQuery); $('#test'). Test (); </Script> </Body></HTML>
Write Plugins for jquery
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
