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)吧

    纯属我的意见,欢迎你们来喷~~