chromatable.js源码简单阅读一个jquery插件

    chromatable.js实现了一个表格表头固定,表格体滚动的效果.

    今天找到的纯html解决方案:建立两个表格,一个表格放表头的信息,一个表格使用div包装起来,div中加上滚动样式;这样就实现了上面的效果.

    这个插件实现跟上述解决方案差不多,给jquery对象加一个chromatable函数;代码如下:

     $.fn.chromatable = function(options){}

       chromatable的函数体:

       var options = $.extend({}, $.chromatable.defaults, options);//继承了默认配置
       var $this = $(this);    //获取当前表格
       var $uniqueID = $(this).attr("ID") + ("wrapper");    //根据获得表格的id获取一个新ID
             
       $(this).css('width', options.width).addClass("_scrolling");//当前表格增加样式
                
       $(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>');                                                            //使用两个div包装表格
                                
       $(".scrolling_outer").css({'position':'relative'});            //设置最外面的div样式
       $("#"+$uniqueID).css(                                               //设置第二层div样式
                                                                    
                     {'border':'1px solid #CCCCCC',
                        'overflow-x':'hidden',
                        'overflow-y':'auto',
                        'padding-right':'17px'                        
                        });
                
       $("#"+$uniqueID).css('height', options.height);
       $("#"+$uniqueID).css('width', options.width);
             
       $(this).before($(this).clone().attr("id", "").addClass("_thead").css(   
                          //复制一个新表格,赋予新id,thead增加样式                                                               
                        {'width' : 'auto',
                         'display' : 'block',
                         'position':'absolute',
                         'border':'none',
                         'border-bottom':'1px solid #CCC',
                         'top':'1px'
                            }));
    
                
      
       $('._thead').children('tbody').remove();        //删除复制表格的表格体tbody

        从上面的代码看,可以看出这也是使用两个表格来实现表哥固定和表体滚动的效果,只不过是使用

js实现而已.

        这个就是jquery简单插件的构建方法,弄一个option,可以让你设置一些功能,再在jquery全局对象上

加一个函数,实现具体功能.这样可以被所有jquery对象使用了.

        这让我想起了,highchart中的构建略有不同,他不是基于jquery的,而是基于面向对象的js,创建js

对象,在创建对象的过程中就将想要完成的功能给完成了.听说js中还有一种构建方式是基于js的mvc的,不过,没看过太多的源码,我感觉应该跟Ext中的使用差不多,使用store存储器存储数据(m),使用各种布局对象显示数据

(V),提供了一些工具类,用于将store中的数据交给布局对象显示,这些工具类就相当于那个(C)吧

    纯属个人意见,欢迎大家来喷~~        

转载于:https://my.oschina.net/KangL/blog/117853