Many of the company's front-end design developers are girls, and many of these girls are not very good at JavaScript skills. And in the front-end development process, JavaScript skills are essential. So, if the front end small mm is worrying about a javascript effect, you chic past, and then said to her: "Hey, beautiful, use this bar." This is a jquery plugin I wrote. "I think basically your life will be solved quickly," he said.
what function do you want to do first ?
This is the first step, but also a very important step, since we are just learning to write jquery plug-ins, so this function must be simple. Don't try to eat a fat one mouthful. Let's pick a thin one. However, this function can not be too boring, if boring to almost no use, even if done is also thrown into the toilet, will not continue to update, will not continue to progress.
My final choice is to beautify the table so that the odd and even color of the table is different, and then the mouse is moved to a row, and a row can be highlighted. The function is simple and practical, good, good. Oh ~ ~
don't rush to write, first think about the principle of implementation
It is not urgent, first think about the principle of implementation. When necessary, first write out the prototype of the simple implementation.
My example of this beautification form, the principle of implementation is simple, nothing more than to find the odd and even rows of the table, and then add a different class, activity line highlighting is also very simple, as long as the Judge MouseOver event, and then add a class,mouseout, Remove this class again.
a common framework
Before you start writing your own jquery plugin, it is natural to study the plug-ins that others have written. In fact, writing jquery also has a general framework. OK, let's just copy the frame here.
Copy Code code as follows:
(function ($) {
$.fn.yourname = function (options) {
Various properties, Parameters
}
var options = $.extend (defaults, options);
This.each (function () {
Plug-in implementation code
});
};
}) (JQuery);
With this, we can set things inside.
names, parameters, and attributes
Finally began to lakes, must have a loud name to do, so walk in the rivers and lakes, can cock, enough prestige. Do not believe, you listen to others "Chinese dental Defense Group"! Therefore, we must have a loud name here, must be simple, clear, enough authority. So, decided, is called "Tableui"!
Parameters and properties are also simple, which is the name of the three class. It's called: Evenrowclass, Oddrowclass and Activerowclass.
So, the above frame, we have to fill in the upper body.
Copy Code code as follows:
(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 is a key point to say this sentence:
Copy Code code as follows:
var options = $.extend (defaults, options);
What looks like a good word is actually merging multiple objects into one. Here is, if you write a new parameter at the time of the call, use your new parameter, if it is not written, use the default parameter. For further information, you can refer to the official jquery documentation: http://api.jquery.com/jQuery.extend/
Start with your lower body.
OK, the upper body is finished, we can fill the lower half of it. Nothing more than to find cardinality rows and even rows (thanks to jquery for providing a similar tr:even, make it simple), and then add the corresponding class. Then give all the TR, bind MouseOver and Mouseout events. Lower body code is as follows:
Copy Code code 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 odd even line color
$ (thistable). Find ("Tr:even"). addclass (Options.evenrowclass);
$ (thistable). Find ("Tr:odd"). addclass (Options.oddrowclass);
Add Active row Color
$ (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!
Maybe some friends think it's done. But on the contrary, we still have the most important step is not completed, that is, must be in the top of the plugin, write the name of the plugin, version number, completion date, author, contact method of the author, date of birth, measurements ... Wait a minute. Because the only way to show this plug-in is professional enough.
Copy Code code as follows:
/*
* Tableui 0.1
* Copyright (c) 2009 Justinyoung http://justinyoung.cnblogs.com/
* date:2010-03-30
* Use Tableui to make it easy to use the table hints experience. The first features are the odd and even row color alternating, the mouse move to highlight
*/
(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 odd even line color
$ (thistable). Find ("Tr:even"). addclass (Options.evenrowclass);
$ (thistable). Find ("Tr:odd"). addclass (Options.oddrowclass);
Add Active row Color
$ (thistable). Find ("tr"). Bind ("MouseOver", function () {
$ (this). addclass (Options.activerowclass);
});
$ (thistable). Find ("tr"). Bind ("Mouseout", function () {
$ (this). Removeclass (Options.activerowclass);
});
});
};
}) (JQuery);
Demo Address
Instance Download address
