tab ui.tab

导航切换

<div class="ui-tab ">
    <ul class="tab-nav">
        <li class="cur ">
            <a href="javascript:;">属性</a>
        </li>
        <li class=" ">
            <a href="javascript:;">样式</a>
        </li>
    </ul>
    <div class="tab-panels">
        <div class="tab-content cur">first content</div>
        <div class="tab-content">second content</div>                                                   </div>
</div>

• 使用tab控件时不需要考虑样式问题
• 所有tab控件需遵循这样的一个结构

呈现样式

具体效果可参见 http://www.kuaizhan.com/ui/ui-create

创建一个tab

使用接口 ui.tab 可以动态地创建一个tab

参数（以JS Object形式给出）：
    theme: 设置ui.tab的最外层包裹class,用于定义tab样式,不写为默认样式,填写theme-simple可以使用简化tab的样式
    class: 加到tab导航项上的class
    tab_nav: 导航项名称
    [
        {
            cur: 是否是当前显示,true或者false,只能有一个选项为true
            title: 名称
        },
        ...
    ]
    tab_content: 导航项内容
    [
        {
            content: 内容，可以是自定义的html或者使用现有控件生成html
        },
        ...
    ]

示例代码:

var form = $("#js-form-put-tab"),
    placeholder = $("#js-put-tab");
//生成tab对应的html
var tab = ui.tab.create({
    "theme": "theme-simple"
    "tab_nav": [
        {
            "cur": true,
            "title": "属性"
        },
        {
            "title": "样式"
        }
    ],
    "tab_content": [
        {
            content: "first content"
        },
        {
            content: "second content"
        }
    ]

});

placeholder.replaceWith(tab);
//绑定tab对应的事件
ui.tab.init(form);