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
- 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 ...
- JavaScript Example 2- Color changes the interlacing of a particular table
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 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 ...
- 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. ...
- 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 ...
- 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 ...
- 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 ...
- 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 , ...
- 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
- 【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 ...
- 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 ...
- 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 ...
- 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) ...
- TranslateAnimation Detailed explanation
TranslateAnimation Detailed explanation Android JDK For us 4 Animation effects , Namely : AlphaAnimation,RotateAnimation, ScaleAnimation, Tr ...
- 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 ...
- 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 ...
- 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 ...
- .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 ...
- 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 ...