zoukankan      html  css  js  c++  java
  • Jquery 插件学习实例1插件制作说明与tableUI优化

    一.   先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是:

         jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

    jQuery.fn.extend(object);jQuery对象添加方法。

    1.1jQuery.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.2jQueryjQuery.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个小贴士对“政委”的那个做了些优化,学习之用,还请指正。

    *来源:http://www.cnblogs.com/windy2008/archive/2010/04/01/1702126.html
    */
    (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);

    出处: http://www.cnblogs.com/windy2008

  • 相关阅读:
    [51nod1685]第k大区间
    [51nod1515]明辨是非
    centos中jdk配置 平凡的人生
    centos中apachetomcat的配置 平凡的人生
    centos6.5中gitlab的搭建 平凡的人生
    centos精简系统 源码安装客户端git 平凡的人生
    Vue学习笔记vue调试工具vuedevtools安装及使用
    Django Admin 实现三级联动的示例代码(省市区)===>小白级
    Vue学习笔记基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)
    Django Admin 配置和定制基本功能(基本二次开发配置)
  • 原文地址:https://www.cnblogs.com/windy2008/p/1702126.html
Copyright © 2011-2022 走看看