zoukankan      html  css  js  c++  java
  • 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的。下面,开始我的第一个插件...

    参考《锋利的JQuery》,JQuery为开发插件增设了俩个方法:$.extend(object), $.fn.extend(object).

    这篇博文对插件制作的讲解挺好的,就是有点长,但值得玩味:http://blog.csdn.net/guorun18/article/details/49819715

    下面谈一个我对插件的(片面)理解:

    插件分俩种:

    ·类级别组件开发:

              ---即给JQuery命名空间下添加新的全局函数,也称静态方法。形式如下: 

    jQuery.myPlugin = function (){
               //do something
    };

    例如:$.ajax(options); $.type();

    ·对象级别组件开发

               ---挂在JQuery原型下的方法,通过选择器获取的JQuery对象实例能共享该方法,称为动态方法。形式如下:

    //$.fn == $.prototype
    $.fn.myPlugin = function () {
              //do somthing
    };

    例如:.addClass(); .attr();

     

    同时,插件也要保持JQuery链式调用的特性,链式调用的形式如下:

    $.fn.myPlugin = function (){

             return this.each(function (){   //return实现链式调用

                             //do something 

             });

    };

    ----------------------------------以上就是插件机制---------------------------------

     下面实现一个简单的表格隔行变色插件:

     //为了更好的兼容性,前面有个分号
    (function($){
        $.fn.tableUI = function(options){
            var defaults = {
                evenRowClass:"evenRow",
                oddRowClass:"oddRow",
                activeRowClass:"activeRow",
                clickRowClass:"clickRow"
            }
            var options = $.extend(defaults, options);//$.extend(option...)返回一个对象.
            //为了实现链式调用,用return返回对象
            return this.each(function(){
                //缓存this
                var thisTable = $(this);
                $(thisTable).find("tr:even").addClass(options.evenRowClass);
                $(thisTable).find("tr:odd").addClass(options.oddRowClass);
                $(thisTable).find("tr").bind("mouseover",function(){
                    $(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
                });
                $(thisTable).find("tr").bind("mouseout",function(){
                    $(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
                });
                $(thisTable).find("tr").bind("click",function(){
                    $(this).addClass(options.clickRowClass);
                });
            });
        };
    })(jQuery);

    鉴于本人初次编写插件,但还是要分享一下此刻所感所悟,未来看到肯定会觉得头脑简单吧。

    首先利用this传递DOM元素对象,可以看做是插件最外层的元素,然后通过JQuery提供的查询(find)方法匹配内部元素对象,将匹配到的元素配合设置的属性(options)一步一步实现想要的功能。

    ps:options的类名应提前写好css样式,以备使用。

  • 相关阅读:
    STL源码剖析之_allocate函数
    PAT 1018. Public Bike Management
    PAT 1016. Phone Bills
    PAT 1012. The Best Rank
    PAT 1014. Waiting in Line
    PAT 1026. Table Tennis
    PAT 1017. Queueing at Bank
    STL源码剖析之list的sort函数实现
    吃到鸡蛋好吃,看看是哪只母鸡下的蛋:好用的Sqlite3
    cJSON
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/6758248.html
Copyright © 2011-2022 走看看