Jquery 插件学习实例1 插件制作说明与tableUI优化

山茶水瓶

山茶水瓶

2016-02-19 13:32

今天图老师小编要向大家分享个Jquery 插件学习实例1 插件制作说明与tableUI优化教程,过程简单易学,相信聪明的你一定能轻松get!
一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是:
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
1.1、jQuery.fn.extend(object):
可以参靠jquery参考手册的连个例子:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});

使用:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

1.2、jQueryjQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
jQuery 代码:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$.extend({
min: function(a, b) { return a b ? a : b; },
max: function(a, b) { return a b ? a : b; }
});

使用:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
$.min(2,3); // = 2
$.max(4,5); // = 5

二、tableUI具体的插件示例代码如下:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
/*
* tableUI 0.2
* 就不写版权了吧,呵呵
* Date: 4/1/2010
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
* 0.2版结合25个小贴士对“政委”的那个做了些优化,学习之用,还请指正。
*/
(function($) {
$.fn.tableUI = function(options) {
//默认参数
var defaults = {
evenRowClass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
//用传入参数覆盖了默认值
options = $.extend(defaults, options);
//表对象
var thisTable = $(this);
//添加奇偶行颜色
thisTable.find("tr:even").addClass(options.evenRowClass);
thisTable.find("tr:odd").addClass(options.oddRowClass);
//绑定鼠标移动事件,不必对每行都绑定事件。
thisTable.live("mouseover", function(e) {
//获取鼠标所指目标对象父级tr
$(e.target).parent().addClass(options.activeRowClass);
//阻止事件冒泡
return false;
}).live("mouseout", function(e) {
$(e.target).parent().removeClass(options.activeRowClass);
return false;
});
};
})(jQuery);

展开更多 50%)
分享

猜你喜欢

Jquery 插件学习实例1 插件制作说明与tableUI优化

Web开发
Jquery 插件学习实例1 插件制作说明与tableUI优化

一个简单的jQuery插件制作 学习过程及实例

Web开发
一个简单的jQuery插件制作 学习过程及实例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery 位置插件

Web开发
jQuery 位置插件

jquery的颜色选择插件实例代码

Web开发
jquery的颜色选择插件实例代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery Lightbox 图片展示插件使用说明

Web开发
jQuery Lightbox 图片展示插件使用说明

jQuery select控制插件

Web开发
jQuery select控制插件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

HierarchicalFlexGrid控件

HierarchicalFlexGrid控件

基于jQuery的消息提示插件 DivAlert之旅(二)

基于jQuery的消息提示插件 DivAlert之旅(二)
下拉加载更多内容 ↓