成都网站建设设计

将想法与焦点和您一起共享

jQuery插件--表格隔行变色

插件分俩种:

成都创新互联是一家集网站建设,东海企业网站建设,东海品牌网站建设,网站定制,东海网站建设报价,网络营销,网络优化,东海网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

·类级别组件开发:

          ---即给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 

         });

};

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

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

jQuery插件--表格隔行变色

 //为了更好的兼容性,前面有个分号(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);

jQuery插件--表格隔行变色


当前题目:jQuery插件--表格隔行变色
本文网址:http://chengdu.cdxwcx.cn/article/gojids.html