Create a jQuery plugin tutorial

Writing a plug-in is a method or function. To create a jQuery function syntax function, you must return this. each (...) to keep the link. Therefore, this function can be used for one or more jQuery objects. JQuery. fn. myFunction = function () {return this. each (function () {// element-specific code here}) ;}; example jQuery. fn. makeTextRed = function () {return this. each (function () {functions (this).css ('color', 'red') ;};}; // Example usage $ ('# my-div '). makeTextRed (); // make text in "my-div" red $ ('P '). makeTextRed (); // create a jQuery method example jQuery for all paragraphs in red. sayHelloWorld = function () {alert ('Hello World') ;}; // example $. sayHelloWorld (); // alert S "Hello World" option: flexible and user-friendly options for your plug-in. The extended () method takes two or more objects as parameters and merges their content into the first object. In this example, a function is used to set the text color (Red by default ). JQuery. fn. makeTextColored = function (settings) {var config = {'color': 'red'}; if (settings) {$. extend (config, settings);} return this. each (function () {partition (this).css ('color', config. color) ;}) ;}; now, we can choose to set parameters or not to use this function. $ ('# My-div '). makeTextColored (); // make the text red (default) $ ('# my-div '). makeTextColored ('Blue '); // make the text blue compatible. Because variables may use other plug-ins, use alias technology to make your plug-ins forward compatible. (Function ($) {$. fn. myFunction = function () {return this. each (function () {// element-specific code here}) ;}}( jQuery); the function we passed, now we can use any of our favorite aliases for jQuery. Therefore, instead of dollars, you can also use any other valid JavaScript variable name. The jQuery plug-in list is an important point to remember when developing a jQuery plug-in (from jQuery.com. [Insert plug-in name. JS. For example, name the file jQuery. Jquery. debug. js connects to the jQuery. fn object, all functions of the jQuery object, and all new methods. This is a reference to the current jQuery object. Any method or function you attach must have a semicolon (;) to end ", otherwise the compressed code will be broken. Your method must return the jQuery object unless explicitly stated. Use this. each to traverse the currently matched element set. Make sure that the plug-in jQuery is not the dollar, so with noConflict (), you can use a custom alias. JQuery plug-in templates are two good code templates when developing jQuery plug-ins. Function template (function ($) {$. fn. myPlugin = function (settings) {var config = {'foo': 'bar'}; if (settings) {$. extend (config, settings);} return this. each (function () {// element-specific code here}) ;}}) (jQuery); Method template (function ($. myPlugin = function (settings) {var config = {'foo': 'bar'}; if (settings) {$. extend (config, settings) ;}// the code returns this ;}}) (jQuery) here. For example, I chose a very simple example of jQuery slide plug-in, so far, in order for you to start browsing the Web page. The example below is a complex one that may help you inspire yourself. It uses the combination of an HTML element in the setInterval () function and any number of images in the jQuery effect fade-out () and fade-in () cycles. In setUpHTML <div id = "slideshow"> </div> CSS # slideshow img {display: none; position: absolute;} use Javascript (function ($) {$. simpleSlideShow = function (selector, settings) {// set var config = {'delay': 2000, 'fadespeed': 500}; I F (settings) {$. extend (config, settings);} // variable var obj =$ (selector); var img = obj. children ('img '); var count = img. length; var I = 0; // display the first image img. eq (0 ). show (); // run the slide setInterval (function () {img. eq (I ). fadeOut (config. fadeSpeed); I = (I + 1 = count )? 0: I + 1; img. eq (I ). fadeIn (config. fadeSpeed) ;}, config. delay); return this ;};}) (jQuery); usage to make the # Slide div on the slide, we only need to call it to use the following JavaScript code: <script type = "text/javascript"> $. simpleSlideShow ('# slideshow'); </script> because we allow settings to change the slides of behavior, we can let it wait for 5 seconds between the image and set "Gradient" for 200 ms usage: <script type = "text/javascript" >$. simpleSlideShow ('# slideshow', {'delay': 5000, 'fadespeed': 200}); </script>