Learn to write jQuery plug-in with me (with a complete example and download)

Document directory

• Hi, beauty, this is a jQuery plug-in I wrote!
• First think about what functions
• Don't rush to write, first think about the implementation principle
• A general framework
• Name, parameters, and attributes
• Start the lower half
• The most important step!
• OK! Let's take a look at a complete instance!
• Online instances and downloads of the jQuery plug-in tableUI
• Recently recommended articles

JQuery is so popular.JQuery pluginThe sky is also flying. Have you ever thought about writing some of your common JS functions into jQuery plug-ins? If your answer is yes, come on! Join meLearning to write jQuery plug-insRight!

Hi, beauty, this is a jQuery plug-in I wrote!

Many front-end design developers in many companies are girls, and many of these girls have poor JavaScript skills. In front-end development, JavaScript skills are essential. So, if the front-end small MM is worrying about a JavaScript effect, you will go over and say to her, "Hi, beauty, use this. This is a jQuery plug-in I wrote ." I think your major events in your life will be quickly solved.

First think about what functions

This is the first step and an important step. Since we are just learning to write jQuery plug-ins, this function must be simpler. You don't need to take a bite to eat fat man. Let's try again. However, this function cannot be too boring. If it is boring and useless, even if it is done, it will be thrown into the toilet and will not be updated continuously, and it will not continue to improve.

My final choice is: beautify the table, make the table's parity line color different, then move the mouse over a row, a row can be highlighted. Simple and practical functions, good, good. Haha ~~

Don't rush to write, first think about the implementation principle

Not in a hurry. first think about the implementation principle. When necessary, first write a simple implementation prototype.

In my example of beautifying a table, the implementation principle is simple. It is nothing more than finding the odd and even rows of the table, and then adding different classes. It is also very easy to highlight the active row, as long as you determine the mouseover event, add a class and remove the class when mouseout.

A general framework

Before writing your own jQuery plug-ins, you should first study the plug-ins written by others. In fact, writing jQuery also basically has a general framework. All right, let's copy the framework.

(function($){

    $.fn.yourName = function(options){

// Various attributes and Parameters

        }

        var options = $.extend(defaults, options);

        this.each(function(){

// Plug-in implementation code

        });

    };

})(jQuery);

With this, we can set something in it.

Name, parameters, and attributes

It is difficult to start to enter the rivers and lakes, so you must have a loud name. Only when you walk on the rivers and lakes can you be awesome. Do not believe it. You have heard of the Chinese anti-Dental protection group "! Therefore, we must set up a loud name here. It must be simple, clear, and authoritative. Therefore, it is called"TableUI!

Parameters and attributes are also very simple. They are nothing more than the names of the three classes. It is called evenRowClass, oddRowClass, and activeRowClass.

So, the above frame will fill in the upper half.

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"            

        }

        var options = $.extend(defaults, options);

        this.each(function(){

// Implementation code

        });

    };

})(jQuery);

Here we will focus on this sentence:

var options = $.extend(defaults, options);

In fact, it seems very embarrassing to merge multiple objects into one. Here, if you write a new parameter during the call, you will use your new parameter. If not, you will use the default parameter. For more information, please refer to jquery's official documentation: http://api.jquery.com/jQuery.extend/

Start the lower half

OK. You can fill the upper half. It is nothing more than finding the base and even rows (thanks to jQuery for providing a method similar to tr: even to make it simple), and then adding the corresponding class. Then, bind the mouseover and mouseout events to all the tr instances. The lower body code is as follows:

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"            

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            var thisTable=$(this);

// Add the color of the parity row

            $(thisTable).find("tr:even").addClass(options.evenRowClass);

            $(thisTable).find("tr:odd").addClass(options.oddRowClass);

// Add the color of the active row

            $(thisTable).find("tr").bind("mouseover",function(){

                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout",function(){

                $(this).removeClass(options.activeRowClass);

            });

        });

    };

})(jQuery);

The most important step!

Some may think this is even done. On the contrary, the most important step is to write the plug-in name, version number, completion date, and author at the top of the plug-in, author's contact information, date of birth, Sanwei ...... And so on. This is because this plug-in is professional enough.

/*

 * tableUI 0.1

 * Copyright (c) 2009 JustinYoung  http://justinyoung.cnblogs.com/

 * Date: 2010-03-30

* You can use tableUI to easily prompt you to use the table. The features provided in the first step show the color of the odd and even rows, highlighted by moving the mouse

 */

(function($){

    $.fn.tableUI = function(options){

        var defaults = {

            evenRowClass:"evenRow",

            oddRowClass:"oddRow",

            activeRowClass:"activeRow"            

        }

        var options = $.extend(defaults, options);

        this.each(function(){

            var thisTable=$(this);

// Add the color of the parity row

            $(thisTable).find("tr:even").addClass(options.evenRowClass);

            $(thisTable).find("tr:odd").addClass(options.oddRowClass);

// Add the color of the active row

            $(thisTable).find("tr").bind("mouseover",function(){

                $(this).addClass(options.activeRowClass);

            });

            $(thisTable).find("tr").bind("mouseout",function(){

                $(this).removeClass(options.activeRowClass);

            });

        });

    };

})(jQuery);

OK! Let's take a look at a complete instance!

No picture, no truth, no code, no truth. Therefore, textures and complete instances are required.

Learning to write jQuery plug-in instances

Online instances and downloads of the jQuery plug-in tableUI

• Online instance page
• Instance
• By the way, we recommend a good jquery plug-in.

Recently recommended articles

Lecture materials for the March 20 blog Forum Zhang Jiang

Opening bricks: how to develop Internet projects