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上的文档。