1. Write the plugin section, as follows:
;(function ($) {
$.fn.plugin = function (options) {
var defaults = {
//various properties, various parameters
}
var options = $.extend (defaults, options);
This.each (function () {
//feature code
var _this = this;
});
}
) (JQuery);
Attach an example:
;(function ($) {$.fn.table = function (options) {var defaults = {//arguments, properties Evenrowclass: ' Evenrow ', Oddrowclass: ' Oddrow ', Currentrowclass: ' CurrentRow ', EventType: ' MouseOver ', Eventty
Pe2: ' Mouseout ',} var options = $.extend (defaults, options);
This.each (function () {//function code var _this = $ (this);
Even row _this.find (' Tr:even:not (' #thead ') '). addclass (Options.evenrowclass);
_this.find (' #thead '). Removeclass (Options.evenrowclass);
Odd row _this.find (' tr:odd '). addclass (Options.oddrowclass);
/*_this.find (' tr '). MouseOver (function () {$ (this). addclass (Options.currentrowclass);
}). mouseout (function () {$ (this). Removeclass (Options.currentrowclass);
} */_this.find (' tr '). Bind (Options.eventtype, function () {$ (this). addclass (Options.currentrowclass);
}); _this.find (' tr '). Bind (Options.eventtype2, function (){$ (this). Removeclass (Options.currentrowclass);
});
});
return this; }) (JQuery);
The HTML part invokes the plugin as follows:
After the page is loaded successfully, execute
; $ (function () {
$ (' #table1 '). Table ({
//arguments, properties
evenrowclass: ' EvenRow1 ',
ODDROWCL Ass: ' OddRow1 ',
currentrowclass: ' CurrentRow1 '
});
Attached code:
<!doctype html>
Through this example, we learned the JQuery object-level plug-in development
The above jquery plug-in way to realize the table query function of a simple example is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
