Although there are a lot of plug-ins on the Internet for us to use , But there may not be one for you , If necessary, we should knock by ourselves . below , Start my first plug-in ...

Reference resources 《 Incisive JQuery》,JQuery Add two methods for plug-in development ：$.extend(object), $.fn.extend(object).

This blog post is very good for the explanation of plug-in production , It's just a little long , But it's worth pondering ：http://blog.csdn.net/guorun18/article/details/49819715

Let's talk about one of my plug-ins （ one-sided ） understand ：

There are two kinds of plug-ins ：

· Class level component development ：

--- That is to JQuery Add a new global function under the namespace , Also known as static methods . Form the following ：

jQuery.myPlugin = function (){

//do something

};

for example ：$.ajax(options); $.type();

· Object level component development

--- Hang on JQuery The method under the prototype , From the selector JQuery Object instances can share this method , It's called dynamic method . Form the following ：

//$.fn == $.prototype

$.fn.myPlugin = function () {

//do somthing

};

for example ：.addClass(); .attr();

meanwhile , Plug ins should also be maintained JQuery Features of chained calls , Chained calls take the form of ：

$.fn.myPlugin = function (){

return this.each(function (){   //return Implement chain call

//do something

});

};

---------------------------------- That's the plug-in mechanism ---------------------------------

The following is a simple table interlacing color plug-in ：

 // For better compatibility , There's a semicolon on the front 

(function($){

$.fn.tableUI = function(options){

var defaults = {

evenRowClass:"evenRow",

oddRowClass:"oddRow",

activeRowClass:"activeRow",

clickRowClass:"clickRow"

}

var options = $.extend(defaults, options);//$.extend(option...) Return an object .

// In order to implement the chain call , use return Returns the object 

return this.each(function(){

// cache this

var thisTable = $(this);

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

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

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

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

});

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

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

});

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

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

});

});

};

})(jQuery);

In view of the fact that I wrote the plug-in for the first time , But share what you're feeling right now , In the future, I'm sure I'll feel simple .

The first use of this Pass on DOM Element object , It can be seen as the outermost element of the plug-in , And then through JQuery Queries provided (find) Methods match internal element objects , Match the matched element with the set attribute （options） Step by step to achieve the desired function .

ps:options The class name should be written in advance css style , For use .

My first one jQuery plug-in unit -- More articles about the color change of table interlacing

  1. use JQuery To change color and highlight the current line

    use JQuery To change color and highlight the current line Source code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  2. JavaScript Example 2- Color changes the interlacing of a particular table

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery The form of the plug-in changes color every other line and is highlighted by mouse

    The plug-in is written by the author of this blog , The purpose is to improve the author's js Ability , Also give some js Rookies provide some convenience when using plug-ins , Let the old bird fly by leisurely . The purpose of this plug-in is to change the color of the table , And when the mouse moves over a row of the table , The line can be highlighted . The whole code is like ...

  4. jQuery Table interlacing plug-in

    jQuery Provides for extending jQuery Functional approach , namely jQuery.fn.extend() Methods and jQuery.extend() Method . Basic JS The framework code is as follows : ;(function($) { $.fn. ...

  5. Made a jquery plug-in unit , Make the title column of the table stretch left and right

    Sample download The plug-in name is :jquery.tableresize.js, The code is as follows : /* Writen by mlcactus, 2014-11-24 This is one of my packages jquery plug-in unit , Can make table ...

  6. jquery Realization html The color of the table is different from each other

    design sketch Implementation code : adopt css Control style , utilize jquery Of addClass Method realization <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  7. Jquery Similar to Sina Weibo , Mouse over the avatar , Use floating windows to display user information , It has been made into one jquery plug-in unit

    Please note that !!!!! This plug-in demo PHP Of demo download   C#.NET Of demo download The following figure is needed , 1. Move the mouse to the avatar DIV when ,Ajax get data , And let it float DIV Show it . 2. You can move the mouse over it ...

  8. How to write a jquery plug-in unit

      This article summarizes how to write a jquery plug-in unit ? Although today's various mvvm The frame is very hot , however jquery This is the company we grow up with , The excellent library that has brought us a lot of help should not be abandoned by us , Write this article , As a supplement to the notes that I owe you in the past , ...

  9. You really need a jQuery Plug in

    jQuery The plug-in provides a good way to , Saves time and simplifies development , Avoid programmers writing every component from scratch . however , Plug ins also introduce an unstable factor into the code . A good plug-in saves countless development time , A bad quality plug-in can lead to a fix error ...

Random recommendation

  1. 【BZOJ 2693】jzptab

    Somehow stuck in long long Yes , I was in the same place again . stay “ On the road , Dream together ” There was a big joke in the crowd QAQ #include<cstdio> #include<cstring&g ...

  2. WPF Digital input box and IP Address input box

    Digital input box brief introduction In the business , We often need to limit user input , For example, limit the input length , Limit input to numbers and so on . Limit input length WPF Built in TextBox It's done for us , But restrictions on numbers are not in place WPF Built in solutions . send ...

  3. Mybatis Middle configuration Mapper Methods

    In this article, I mainly want to talk about Mybatis In profile mappers Configuration of elements . For the basic part, please refer to http://haohaoxuexi.iteye.com/blog/1333271. We know that M ...

  4. 9.26 noip Simulation questions

    Magic ball problem weakened version (ball.c/.cpp/.pas) Title Description Suppose there is n Root column , Here we are according to the following rules n Put the numbers in the columns in turn 1,2,3,… The ball of . (1) You can only put the ball on the top of a certain pillar at a time . (2) ...

  5. TranslateAnimation Detailed explanation

    TranslateAnimation Detailed explanation Android JDK For us 4 Animation effects , Namely : AlphaAnimation,RotateAnimation, ScaleAnimation, Tr ...

  6. C# Delegation and event details in

    C# Delegate and event in The code is in VS2005 Pass through , because VS2003(.Net Framework 1.1) Implicit delegate variables are not supported , So if you give a method name directly to a location that accepts a delegate type , stay VS2003 I'll make a mistake next time ...

  7. Spring+SpringMVC+MyBatis In depth learning and building ( 6、 ... and )——MyBatis Relational query

    Reprint please indicate the source :http://www.cnblogs.com/Joanna-Yan/p/6923464.html There's going to be :Spring+SpringMVC+MyBatis In depth learning and building ( 5、 ... and )-- dynamic ...

  8. LeetCode(42)-Best Time to Buy and Sell Stock( Selling shares )

    subject : Say you have an array for which the ith element is the price of a given stock on day i. If you w ...

  9. .net Basic science java series （ 3、 ... and ） Wandering and reflecting

    .net Basic science java series ( 3、 ... and ) Wandering and reflecting Last article :.net Basic science java series ( Two )IDE And plug-in unit I have finished reading these two nights IDEA Teaching video of :https://edu.51cto.com/course/1 ...

  10. ASP.NET Routing system based on Network ： Route mapping

    in general , We can go through RouteTable Static properties of Routes Get a global routing table based on Application , Through the introduction above, we know that this is a type of RouteCollection Collection object for , We can call its MapP ...