Jquery 插件學(xué)習(xí)實例1 插件制作說明與tableUI優(yōu)化
更新時間:2010年04月02日 00:00:27 作者:
Jquery 插件學(xué)習(xí)實例1 插件制作說明與tableUI優(yōu)化,需要的朋友可以參考下。
一. 先對jQuery制作方式,jQuery為開發(fā)擴(kuò)展提拱了兩個方法,分別是:
jQuery.extend(object); 為擴(kuò)展jQuery類本身.為類添加新的方法。
jQuery.fn.extend(object);給jQuery對象添加方法。
1.1、jQuery.fn.extend(object):
可以參靠jquery參考手冊的連個例子:
$.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
使用:
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
1.2、jQueryjQuery.extend(object)
擴(kuò)展jQuery對象本身。用來在jQuery命名空間上增加新函數(shù)。
jQuery 代碼:
$.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
二、tableUI具體的插件示例代碼如下:
/*
* tableUI 0.2
* 就不寫版權(quán)了吧,呵呵
* Date: 4/1/2010
* 使用tableUI可以方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替,鼠標(biāo)移上高亮顯示
* 0.2版結(jié)合25個小貼士對“政委”的那個做了些優(yōu)化,學(xué)習(xí)之用,還請指正。
*/
(function($) {
$.fn.tableUI = function(options) {
//默認(rèn)參數(shù)
var defaults = {
evenRowClass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
//用傳入?yún)?shù)覆蓋了默認(rèn)值
options = $.extend(defaults, options);
//表對象
var thisTable = $(this);
//添加奇偶行顏色
thisTable.find("tr:even").addClass(options.evenRowClass);
thisTable.find("tr:odd").addClass(options.oddRowClass);
//綁定鼠標(biāo)移動事件,不必對每行都綁定事件。
thisTable.live("mouseover", function(e) {
//獲取鼠標(biāo)所指目標(biāo)對象父級tr
$(e.target).parent().addClass(options.activeRowClass);
//阻止事件冒泡
return false;
}).live("mouseout", function(e) {
$(e.target).parent().removeClass(options.activeRowClass);
return false;
});
};
})(jQuery);
jQuery.extend(object); 為擴(kuò)展jQuery類本身.為類添加新的方法。
jQuery.fn.extend(object);給jQuery對象添加方法。
1.1、jQuery.fn.extend(object):
可以參靠jquery參考手冊的連個例子:
復(fù)制代碼 代碼如下:
$.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
使用:
復(fù)制代碼 代碼如下:
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
1.2、jQueryjQuery.extend(object)
擴(kuò)展jQuery對象本身。用來在jQuery命名空間上增加新函數(shù)。
jQuery 代碼:
復(fù)制代碼 代碼如下:
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
使用:
復(fù)制代碼 代碼如下:
$.min(2,3); // => 2
$.max(4,5); // => 5
二、tableUI具體的插件示例代碼如下:
復(fù)制代碼 代碼如下:
/*
* tableUI 0.2
* 就不寫版權(quán)了吧,呵呵
* Date: 4/1/2010
* 使用tableUI可以方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替,鼠標(biāo)移上高亮顯示
* 0.2版結(jié)合25個小貼士對“政委”的那個做了些優(yōu)化,學(xué)習(xí)之用,還請指正。
*/
(function($) {
$.fn.tableUI = function(options) {
//默認(rèn)參數(shù)
var defaults = {
evenRowClass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
//用傳入?yún)?shù)覆蓋了默認(rèn)值
options = $.extend(defaults, options);
//表對象
var thisTable = $(this);
//添加奇偶行顏色
thisTable.find("tr:even").addClass(options.evenRowClass);
thisTable.find("tr:odd").addClass(options.oddRowClass);
//綁定鼠標(biāo)移動事件,不必對每行都綁定事件。
thisTable.live("mouseover", function(e) {
//獲取鼠標(biāo)所指目標(biāo)對象父級tr
$(e.target).parent().addClass(options.activeRowClass);
//阻止事件冒泡
return false;
}).live("mouseout", function(e) {
$(e.target).parent().removeClass(options.activeRowClass);
return false;
});
};
})(jQuery);
相關(guān)文章
jQuery對象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來實現(xiàn)數(shù)據(jù)緩存,但有兩個用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value]),接下來為大家介紹下他們的區(qū)別,感興趣的朋友可以參考下哈2013-04-04js調(diào)用iframe實現(xiàn)打印頁面內(nèi)容的方法
這篇文章主要介紹了js調(diào)用iframe實現(xiàn)打印頁面內(nèi)容的方法,需要的朋友可以參考下2014-03-03jQuery實現(xiàn)輸入框下拉列表樹插件特效代碼分享
這篇文章主要介紹了jQuery實現(xiàn)輸入框下拉列表樹特效,推薦給大家,有需要的小伙伴可以參考下。2015-08-08JQuery CheckBox(復(fù)選框)操作方法匯總
這篇文章主要介紹了JQuery CheckBox(復(fù)選框)操作方法匯總,本文講解了獲取單個checkbox選中項、獲取多個checkbox選中項、設(shè)置第一個checkbox 為選中值、設(shè)置最后一個checkbox為選中值等內(nèi)容,需要的朋友可以參考下2015-04-04JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中
這篇文章主要介紹了JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中的相關(guān)資料,需要的朋友可以參考下2015-09-09jQuery live( type, fn ) 委派事件實現(xiàn)
jQuery 1.3中新增的方法。給所有當(dāng)前以及將來會匹配的元素綁定一個事件處理函數(shù)(比如click事件)。也能綁定自定義事件。2009-10-10