标签页 - AuxUI - 模块化前端UI框架

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

实例

默认风格不支持响应式

默认风格1

默认风格2

默认风格3

默认风格4

默认风格5

<div class="ui-tabs">
    <ul class="nav nav-tabs">
        <li class="tabs-nav-item active">
            <a href="javascript:;" class="tab-toggle" data-tab="tab1">标签页1</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
        <li class="tabs-nav-item dropdown">
            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="javascript:;" data-tab="tab3">标签页3</a></li>
                <li><a href="javascript:;" data-tab="tab4">标签页4</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="javascript:;" data-tab="tab5">标签页5</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" data-tab="tab1">默认风格1</div>
        <div class="tab-pane" data-tab="tab3">默认风格3</div>
        <div class="tab-pane" data-tab="tab4">默认风格4</div>
        <div class="tab-pane" data-tab="tab5">默认风格5</div>
    </div>
</div>

<!-- js -->
<script type="text/javascript">
auxui(['tabs'], function(tab) {

    //这里面执行各种事件、各种操作

});
</script>

默认风格 - 两端对齐的标签页

支持响应式

默认风格1

默认风格2

默认风格3

<div class="ui-tabs">
    <ul class="nav nav-tabs nav-tabs-align">
        <li class="tabs-nav-item active">
            <a href="javascript:;" class="tab-toggle" data-tab="tab1">标签页1</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
        <li class="tabs-nav-item">
            <a href="javascript:;" class="tab-toggle" data-tab="tab2">标签页2</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
        <li class="tabs-nav-item">
            <a href="javascript:;" class="tab-toggle" data-tab="tab3">标签页2</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" data-tab="tab1">默认风格1</div>
        <div class="tab-pane" data-tab="tab2">默认风格2</div>
        <div class="tab-pane" data-tab="tab3">默认风格3</div>
    </div>
</div>
<!-- js -->
<script type="text/javascript">
auxui(['tabs'], function(tab) {

    //这里面执行各种事件、各种操作

});
</script>

简洁风格

不支持响应式

简洁风格1

简洁风格2

简洁风格3

简洁风格4

简洁风格5

<div class="ui-tabs ui-tab-brief">
    <ul class="nav nav-tabs">
        <li class="tabs-nav-item active">
            <a href="javascript:;" class="tab-toggle" data-tab="tab1">标签页1</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
        <li class="tabs-nav-item">
            <a href="javascript:;" class="tab-toggle" data-tab="tab2">标签页2</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
        <li class="tabs-nav-item dropdown">
            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="javascript:;" data-tab="tab3">标签页3</a></li>
                <li><a href="javascript:;" data-tab="tab4">标签页4</a></li>
            </ul>
        </li>
        <li class="tabs-nav-item">
            <a href="javascript:;" class="tab-toggle" data-tab="tab5">标签页1</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" data-tab="tab1">简洁风格1</div>
        <div class="tab-pane" data-tab="tab2">简洁风格2</div>
        <div class="tab-pane" data-tab="tab3">简洁风格3</div>
        <div class="tab-pane" data-tab="tab4">简洁风格4</div>
        <div class="tab-pane" data-tab="tab5">简洁风格5</div>
    </div>
</div>
<!-- js -->
<script type="text/javascript">
auxui(['tabs'], function(tab) {

    //这里面执行各种事件、各种操作

});
</script>

简洁风格 - 两端对齐标签页

支持响应式

简洁风格1

简洁风格2

简洁风格3

简洁风格4

<div class="ui-tabs ui-tab-brief">
    <ul class="nav nav-tabs nav-tabs-align">
        <li class="tabs-nav-item active">
            <a href="javascript:;" class="tab-toggle" data-tab="tab1">标签页1</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
        <li class="tabs-nav-item dropdown ">
            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="javascript:;" data-tab="tab2">标签页2</a></li>
                <li><a href="javascript:;" data-tab="tab3">标签页3</a></li>
            </ul>
        </li>
        <li class="tabs-nav-item">
            <a href="javascript:;" class="tab-toggle" data-tab="tab4">标签页4</a>
            <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" data-tab="tab1">简洁风格1</div>
        <div class="tab-pane" data-tab="tab2">简洁风格2</div>
        <div class="tab-pane" data-tab="tab3">简洁风格3</div>
        <div class="tab-pane" data-tab="tab4">简洁风格4</div>
    </div>
</div>
<!-- js -->
<script type="text/javascript">
auxui(['tabs'], function(tab) {

    //这里面执行各种事件、各种操作

});
</script>

卡片风格

当选项卡过多溢出后自动添加到下拉菜单中，支持响应式

卡片选项卡1

卡片选项卡2

卡片选项卡3

卡片选项卡4

卡片选项卡5

卡片选项卡6

卡片选项卡7

卡片选项卡8

卡片选项卡9

卡片选项卡10

卡片选项卡11

卡片选项卡12

卡片选项卡13

<div class="ui-tabs ui-tab-card">
    <div class="ui-page-tabs">
        <div class="input-group">
            <div class="form-control">
                <ul class="nav nav-pills">
                    <li class="tabs-nav-item active">
                        <a href="javascript:;" class="tab-toggle" data-tab="tab1">标签页1</a>
                        <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
                    </li>
                    <li class="tabs-nav-item dropdown ">
                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
                        <a href="javascript:;" class="btn-close" aria-hidden="true">×</a>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="javascript:;" data-tab="tab4">标签页4</a></li>
                            <li><a href="javascript:;" data-tab="tab5">标签页5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="input-group-btn dropdown">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right"></ul>
            </div>
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" data-tab="tab1">卡片选项卡1</div>
        <div class="tab-pane" data-tab="tab4">卡片选项卡4</div>
        <div class="tab-pane" data-tab="tab5">卡片选项卡5</div>
    </div>
</div>
<!-- js -->
<script type="text/javascript">
auxui(['tabs'], function(tab) {

    //这里面执行各种事件、各种操作

});
</script>

动态操作

我是TAB1

简洁风格1

简洁风格2

简洁风格3

我是TAB2

简洁风格1

简洁风格2

简洁风格3

在TAB2 - 新增选择卡删除TAB2中的第三个选择卡隐藏TAB2中的第二个选择卡显示TAB2中的第二个选择卡

<!-- js -->
<script type="text/javascript">
auxui(['tabs'], function(tab) {

    //这里面执行各种事件、各种操作

    $('.btn-add').click(function(event) {
        tab[1].add({
            title : '新增选项卡',
            content : '新选项卡内容',
            isclose : true  //是否显示关闭按钮
        });
    });

    $('.btn-del').click(function(event) {
        //删除第2个TAB中的 第3个选项卡，索引从0开始计算
        tab[1].del(2);

        //删除第1个TAB
        //tab[0].del(2);
    });


    $('.btn-hide').click(function(event) {
        //隐藏第2个TAB中的 第2个选项卡，索引从0开始计算
        tab[1].hide(1);

        //隐藏第1个TAB中的 第2个选项卡
        //tab[0].hide(1);

    });

    $('.btn-show').click(function(event) {
        //显示第2个TAB中的 第2个选项卡，索引从0开始计算
        tab[1].show(1);

        //显示第1个TAB中的 第2个选项卡
        //tab[0].show(1);
    });

});
</script>

方法

名称	描述
.add(object)	在指定TAB中，新增一个新选项卡，`object`例如 { title : '选项卡标题', content : '内容', isclose : false}
.del(index)	删除指定选择卡，`index`选项卡索引，默认从0开始计算
.hide(index)	隐藏指定选择卡，`index`选项卡索引，默认从0开始计算
.show(index)	显示指定选择卡，`index`选项卡索引，默认从0开始计算
.reset()	重置刷新选择卡，也可以使用`$.fn.tabsReset()`进行重置
.switch(index)	选择指定选择卡，`index`选项卡索引，默认从0开始计算

<!-- js -->
<script type="text/javascript">
auxui(['tabs'], function(tab) {

    //这里面执行各种事件、各种操作

    $('.btn-add').click(function(event) {
        tab[1].add({
            title : '新增选项卡',
            content : '新选项卡内容',
            isclose : true  //是否显示关闭按钮
        });
    });

    $('.btn-del').click(function(event) {
        //删除第2个TAB中的 第3个选项卡，索引从0开始计算
        tab[1].del(2);

        //删除第1个TAB
        //tab[0].del(2);
    });

});
</script>

监听事件

名称	描述
tab.switch	选项卡改变后触发
tab.close	选项卡关闭之后触发
tab.hide	选项卡隐藏之前触发
tab.show	选项卡隐藏之后触发
tab.insert	新增一个选项卡时触发

<script type="text/javascript">
auxui(['tabs'], function(tab) {

    $(document).on('tab.switch',function (e, data) {
        console.log('改变选项卡',data);
    });

    $(document).on('tab.close',function (e, data) {
        console.log('关闭选项卡',data);
    });

    $(document).on('tab.hide',function (e, data) {
        console.log('隐藏选项卡',data);
    });

    $(document).on('tab.show',function (e, data) {
        console.log('显示选项卡',data);
    });

});
</script>