Jquery 插件学习实例1 插件制作说明与tableUI优化
作者:bea
一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 1.1、jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子: 代码如下: $.fn.extend({ check: function() { return this.each(f
一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是:
jQuery.extend(object); 为扩展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)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
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
* 就不写版权了吧,呵呵
* 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);
有用 | 无用
jQuery.extend(object); 为扩展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)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
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
* 就不写版权了吧,呵呵
* 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);
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript encodeURI和encodeURIComponent的比较
- jQuery 技巧小结
- jquery 页面全选框实践代码
- jQuery 自动增长的文本输入框实现代码
- jquery select下拉框操作的一些说明
- 纯JavaScript实现的完美渐变弹出层效果代码
- AJAX使用了UpdatePanel后无法使用alert弹出脚本
- 获取焦点时,利用js定时器设定时间执行动作
- Javascript 类与静态类的实现(续)
- 用js实现计算加载页面所用的时间
- 捕获input文本框内容改变事件的js代码
- Extjs Ext.MessageBox.confirm 确认对话框详解
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- Extjs列表详细信息窗口新建后自动加载解决方法
- JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
- 可以测试javascript运行效果的代码
- js 刷新页面的代码小结 推荐
- javascript 打字游戏实现代码
- JQuery 插件制作实践 xMarquee插件V1.0