jquery is so popular that all kinds of jquery plugins are flying. Have you ever thought of putting some of your usual JS functions into jquery plugins? If your answer is yes, then come on! Learn to write jquery plugins with me! Many of the company's front-end design and development staff are girls, and these girls a lot of JavaScript skills are not very good. JavaScript skills are essential in the front-end development process. So, if the front-end small mm is worrying about a javascript effect, you dashing past, and then said to her: "Hey, beautiful, use this bar." This is a jquery plugin I wrote. "I think basically your life event will be solved quickly."
think about what to do first.
This is the first and very important step, since we are just learning to write jquery plugin, so this feature must be simple. Don't try to eat a fat man, we can't do it. Let's just pick a skinny one. However, this function can not be too boring, if bored to almost useless, even if the good is thrown into the toilet, will not continue to update, it will not continue to progress.
My final choice is: beautify the table, make the table's odd and even row color different, and then move the mouse over a row, a row can be highlighted. function is simple and practical, good, good. Hehe ~ ~
no hurry to write, first think about the principle of implementation
It is not urgent, think about the principle of implementation first. When necessary, first write a prototype of a simple implementation.
My example of this landscaping table, the implementation of the principle is simple, is to find the table of odd even row, and then add a different class, active row highlighting is also very simple, as long as the Judge MouseOver event, and then add a class,mouseout time, Remove this class again.
a common framework
Before you start writing your own jquery plugin, it's natural to look at the plugins that others have written. In fact, there is a general framework for writing jquery. OK, let's just copy this frame.
Copy CodeThe code is 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 lake, just can dick, enough awe. Do not believe, you listen to others "China dental anti-group"! Therefore, we must have a loud name here, must be simple, clear, enough authority. So, the decision, it's called "Tableui"!
Parameters and attributes are also simple, which is simply the name of the three class. It's called: Evenrowclass, Oddrowclass and Activerowclass.
So, above the frame, we put the upper body to fill in.
Copy CodeThe 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 () {
Implementation code
});
};
}) (JQuery);
Here's the point:
Copy CodeThe code is as follows:
var options = $.extend (defaults, options);
What looks like a dick 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 a friend who wants to know more, you can refer to the official documentation for jquery: http://api.jquery.com/jQuery.extend/
Start the lower body.
OK, the upper body fills up, we can fill the lower body bar. It's all about finding cardinality lines and even lines (thanks to jquery, which provides a way to tr:even like this, making it simple), and then adding the corresponding class. Then give all the TR, bind the mouseover and mouseout events. The lower body code is as follows:
Copy CodeThe 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 odd and even row colors
$ (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 have the most important step is not completed, that is, must be on the plug-in, write the name of the plugin, version number, completion date, author, the author's contact information, date of birth, measurements ... Wait a minute. Because this is the only way to show that the plugin is professional enough.
Copy CodeThe code is as follows:
/*
* Tableui 0.1
* Copyright (c) Justinyoung http://justinyoung.cnblogs.com/
* date:2010-03-30
* Use Tableui to make it easy to use the table hint experience. Features first provided with odd and even row color alternates, mouse move on 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 and even row colors
$ (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
Learn to write jquery Plugin development methods
