Home > Web Front-end > JS Tutorial > Jquery plug-in learning example 1 plug-in production instructions and tableUI optimization_jquery

Jquery plug-in learning example 1 plug-in production instructions and tableUI optimization_jquery

WBOY
Release: 2016-05-16 18:30:44
Original
1046 people have browsed it

1. Let’s start with the jQuery production method. jQuery provides two methods for developing extensions, namely:
jQuery.extend(object); To extend the jQuery class itself, add new methods to the class.
jQuery.fn.extend(object); Add methods to jQuery objects.
1.1, jQuery.fn.extend(object):
You can refer to the jquery reference manual for examples:

Copy code The code is as follows:

$.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});

Use:
Copy code The code is as follows:

$(" input[type=checkbox]").check();
$("input[type=radio]").uncheck();

1.2, jQueryjQuery.extend(object)
Extend the jQuery object itself. Used to add new functions to the jQuery namespace.
jQuery code:
Copy code The code is as follows:

$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
} ; >$.min(2,3); // => 2
$.max(4,5); // => 5


2. TableUI specific plug-in examples The code is as follows: The code is as follows:


/*
* tableUI 0.2
* Let’s not write about the copyright, haha
* Date: 4/1/2010
* Using tableUI can easily display the table prompts for user experience. The first function provided is the color alternation of odd and even rows, which will be highlighted when the mouse is moved up
* Version 0.2 has made some optimizations for the "Political Commissar" based on 25 tips. For learning purposes, please correct me. */ (function($) { $.fn.tableUI = function(options) { //Default parametersvar defaults = { evenRowClass: "evenRow" ,
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
//Override the default value with the passed parameters
options = $.extend(defaults, options);
//Table object
var thisTable = $(this);
//Add odd and even row colors
thisTable.find("tr:even").addClass(options.evenRowClass);
thisTable.find("tr:odd").addClass(options.oddRowClass);
//Bind mouse movement events, it is not necessary to bind events to each row.
thisTable.live("mouseover", function(e) {
//Get the parent tr of the target object pointed by the mouse
$(e.target).parent().addClass(options.activeRowClass);
//Prevent event bubbling
return false;
}).live("mouseout", function(e) {
$(e.target).parent().removeClass(options.activeRowClass);
return false;
});
};
})(jQuery);



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template