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

    純屬我的意見,歡迎你們來噴~~