一个简单的jQuery插件的写法 tableUI

 一直搞PHP,看来以后还要搞jQuery或者js了,来一段代码,找找写插件的思路

/*
 * tableUI 1.0
 * Copyright (c) 2009 sunscheung  http://www.cnblogs.com/sunscheung/
 * Date: 2015-08-07
 * 使用方法:假设table的class为table_solid  
 * 接口:<script type="text/javascript">
             $(function(){
                $(".table_solid").tableUI();
             });
         </script>
 */
(function($){
    $.fn.tableUI = function(options){
        //属性
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow",
            clickRowClass:"clickRow"
        };
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTables = $(this);
            $(thisTables).find("tr:even").addClass(options.evenRowClass);
            $(thisTables).find("tr:odd").addClass(options.oddRowClass);
            $(thisTables).find("tr").bind("mouseover",function(){
                $(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
            });
            $(thisTables).find("tr").bind("mouseout",function(){
                $(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
            });
             $(thisTables).find("tr").bind("click",function(){
                $(this).addClass(options.clickRowClass);
            });
        });
    };
})(jQuery);

 

posted @ 2015-08-07 15:31  SunsCheung  阅读(364)  评论(0编辑  收藏  举报