源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-09-07 10:59 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Jquery 插件学习实例1 插件制作说明与tableUI优化
一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 1.1、jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子:
[u]复制代码[/u] 代码如下:
$.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } });
使用:
[u]复制代码[/u] 代码如下:
$("input[type=checkbox]").check(); $("input[type=radio]").uncheck();
1.2、jQueryjQuery.extend(object) 扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。 jQuery 代码:
[u]复制代码[/u] 代码如下:
$.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } });
使用:
[u]复制代码[/u] 代码如下:
$.min(2,3); // => 2 $.max(4,5); // => 5
二、tableUI具体的插件示例代码如下:
[u]复制代码[/u] 代码如下:
/* * 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);
[img]http://files.jb51.net/upload/2010-4/20100402000026397.JPG[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部