手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery 插件学习实例1 插件制作说明与tableUI优化
Jquery 插件学习实例1 插件制作说明与tableUI优化
摘要:一.先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是:jQuery.extend(object);为扩展jQuery类...

一. 先对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 插件学习实例1 插件制作说明与tableUI优化1

【Jquery 插件学习实例1 插件制作说明与tableUI优化】相关文章:

JQuery插件ajaxfileupload.js异步上传文件实例

JavaScript事件委托实例分析

Node.js本地文件操作之文件拷贝与目录遍历的方法

jQuery封装的tab选项卡插件分享

JQuery中DOM加载与事件执行实例分析

JQuery中DOM事件合成用法实例分析

JQuery插件jcarousellite的参数中文说明

Jquery zTree 树控件异步加载操作

jQuery子窗体取得父窗体元素的方法

jQuery插件expander实现图片翻转特效

精品推荐
分类导航