mass Framework tabs外掛程式 v2

隨著uibase模組的完成，許多共用功能都往上挪到其父類中去。tabs模組只專註於它專業功能與其他新功能就行。

v2的新功能，除了可以選定頁面某一塊具有TABS結構的HTML片斷作為它的UI實體外，現在我還允許像EXT使用者那樣完全不出HTML，光用JS就可以拼湊出華麗的介面。當然越漂亮的介面就越要求有豐富的背景圖片。目前，我的UI還沒有用到圖片。待UI組件豐富起來再說。選定頁面結構，我們使用data_expr，意即資料來源的CSS運算式，第二種則用到data屬性，二選一。它們在代碼中的體現如下：

        if(typeof ui.data_expr === "string" && ui.data_expr.length > 1){            ui.target = $(ui.data_expr);//選中頁面上類似結構的HTML作為ui實體        }else{            ui.target = createTabs(ui.data, ui)//建立一個ui實體            ui.target.find( "div" ).first().addClass(ui.active_class); //預設選中第一個切換卡        }

另一個新功能，就是增加了add方法，用於動態添加一個新的切換卡。到此為止，我們可以讓程式或使用者選中某一個切換卡，移除切換卡與添加切換卡了。

例子：

CSS代碼：

            .mass_tabs {                position:relative;                height:200px;                width:400px;                padding-left:20px;                padding-top:5px;                background:#464646;                overflow:hidden;            }            .mass_tabs .section {                float:left;            }            .mass_tabs .trigger {                display:inline-block;                height:20px;                line-height:20px;                padding:2px 10px 1px;                margin-left:5px;                color:#000;                background:#708090;                text-align:center;                text-decoration:none;            }            .mass_tabs .active .trigger{                padding-bottom:8px;/* panel.top - parent.padding-top - tigger.height */                color:#ff8000;                background:#000;            }            .mass_tabs .panel{                display: none;                position:absolute;                width:420px;/* parent.width+ parent.padding-left*/                height:175px;/* parent.height +  padding-top - tabs.top */                top: 30px;                left:0px;                color:#fff;                background:#000;            }            .mass_tabs .active .panel{                display:block;            }            .content {                margin:5px;            }

JS代碼

         $.require("ready,more/tabs",function( ){                $("#black").tabs({                    data:[                        {trigger:"標題1",panel:"<div class=content>面板1</div>"},                        {trigger:"標題2",panel:"<div class=content>面板2</div>"},                        {trigger:"標題3",panel:"<div class=content>面板3</div>"},                        {trigger:"標題4",panel:"<div class=content>面板4</div>"}                    ]                })            });

更詳盡的說明見GITHUB上的文檔。