标签页

选项卡切换组件。

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

代码演示

有边框的效果

这里是栏目1

可以自定义任意内容

这里是栏目2

可以自定义任意内容

这里是栏目3

可以自定义任意内容

1
2
3

.tab-container{
    padding: 0 10px;
}

<div id="J_Tabs1" data-style="bordered" data-default="tab1">
    <div data-name="栏目1" data-key="tab1">
        <div class="tab-container">
            <p>这里是栏目1</p>
            <p>可以自定义任意内容</p>
        </div>
    </div>
    <div data-name="栏目2" data-key="tab2">
        <div class="tab-container">
            <p>这里是栏目2</p>
            <p>可以自定义任意内容</p>
        </div>
    </div>
    <div data-name="栏目3" data-key="tab3">
        <div class="tab-container">
            <p>这里是栏目3</p>
            <p>可以自定义任意内容</p>
        </div>
    </div>
</div>

1	var tabs1 = new woUI.Tabs('#J_Tabs1')

无边框的效果

默认选中第二项，点击 tab 后，触发回调事件

当前登录用户是： admin

在线时长：9 小时 41 分

我的文章列表

我的收藏

当前积分： 25549

本月已使用：6425

修改用户名

修改头像

修改邮箱

修改密码

1
2
3

.tab-container{
    padding: 0 10px;
}

<div id="J_Tabs2" data-default="tab2">
    <div data-name="信息" data-key="tab1">
        <div class="tab-container">
            <p>当前登录用户是： `admin`</p>
            <p>在线时长：9 小时 41 分</p>
        </div>
    </div>
    <div data-name="个人空间" data-key="tab2">
        <div class="tab-container">
            <p>我的文章列表</p>
            <p>我的收藏</p>
        </div>
    </div>
    <div data-name="积分" data-key="tab3">
        <div class="tab-container">
            <p>当前积分： 25549</p>
            <p>本月已使用：6425</p>
        </div>
    </div>
    <div data-name="设置" data-key="tab4">
        <div class="tab-container">
            <p>修改用户名</p>
            <p>修改头像</p>
            <p>修改邮箱</p>
            <p>修改密码</p>
        </div>
    </div>
</div>

var tabs2 = new woUI.Tabs('#J_Tabs2')
tabs2.on(function (tab, oldTab) {
    window.alert('页面切换:' + tab + ' <-- ' + oldTab)
})

html 支持属性

属性	是否必须	可选值	说明
`data-style`	no	bordered 或空（默认）	`Tab` 外观
`data-default`	no	any	`Tab` 默认选中标签页，与子元素 `data-key` 对应。不传入则默认为为第一页
`data-key`	yes	any	仅子元素可配置，当前 `Tab` 名
`data-name`	yes	any	仅子元素可配置，当前 `Tab` 的显示名
`class`	no	any	仅子元素可配置，此样式类将最终渲染到 `Tab` 类上

API

初始化

new woUI.Tabs(queryString)

queryString: 可以传入 Element.queryString 支持字符串，也可以直接传入元素对象

改变标签页

woUI.Tabs.prototype.change(key)

key: 切换至 key 页，对应页面的 data-key

获取当前标签页

woUI.Tabs.prototype.getCurrentTab()

返回当前的 tab 的 key 值

触发事件/取消事件

woUI.Tabs.prototype.on(callback)
woUI.Tabs.prototype.off(callback)

触发事件 callback: 监听 Tabs 的切换，回调函数接收 2 个参数，分别是切换到新 Tabs 页的 key 和切换前的 key。

取消事件 callback: 取消 Tabs 的切换监听，如果传入 callback 则取消此回调，否则取消所有回调。

标签页