mui 之 选项卡

Div 选项卡

代码块：mTabSegmented

<div class="mui-content">
    <div class="mui-segmented-control">
        <a class="mui-control-item mui-active" href="#item1">选项卡1</a>
        <a class="mui-control-item" href="#item2">选项卡2</a>
    </div>
</div>

例子: 能切换的 DIv 选项卡

锚点的形式的进行切换

添加几个样式，在 mui-segmented-control 添加

• mui-segmented-control-inverted
• mui-segmented-control-negative
• mui-segmented-control-positive
• mui-segmented-control-vertical

<div class="mui-segmented-control">
    <!--href 锚点-->
    <a class="mui-control-item mui-active" href="#item1">选项卡1</a>
    <a class="mui-control-item" href="#item2">选项卡2</a>
</div>
<div>
    <div id="item1" class="mui-control-content">选项卡 1 的内容</div>
    <div id="item2" class="mui-control-content">选项卡 2 的内容</div>
</div>

底部选项卡

代码块：mtab

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-phone"></span>
        <span class="mui-tab-label">电话</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">邮件</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>

左右滑动选项卡

代码块：mtabviewpage

<div class="mui-slider">
    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <a class="mui-control-item" href="#item1">选项卡1</a>
        <a class="mui-control-item" href="#item2">选项卡2</a>
    </div>
    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
    <div class="mui-slider-group">
        <div id="item1" class="mui-slider-item mui-control-content mui-active">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">第1个选项卡子项</li>
                <li class="mui-table-view-cell">第1个选项卡子项</li>
            </ul>
        </div>
        <div id="item2" class="mui-slider-item mui-control-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">第2个选项卡子项</li>
                <li class="mui-table-view-cell">第2个选项卡子项</li>
            </ul>
        </div>
    </div>
</div>

升级版 标题也能滚动

<div class="mui-slider">
    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-scroll-wrapper">
        <div class="mui-scroll">
            <!-- 锚点关联 -->
            <a href="#item1" class="mui-control-item mui-active">Item 1</a>
            <a href="#item2" class="mui-control-item">Item 2</a>
            <a href="#item3" class="mui-control-item">Item 3</a>
            <a href="#item4" class="mui-control-item">Item 4</a>
            <a href="#item5" class="mui-control-item">Item 5</a>
        </div>
    </div>
    <!-- 横条，可以调整长短 -->
    <!-- <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div> -->
    <div class="mui-slider-group">
        <!-- 选项内容 1  -->
        <div id="item1" class="mui-slider-item mui-control-content mui-active">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">第1个选项卡子项</li>
                <li class="mui-table-view-cell">第1个选项卡子项</li>
            </ul>
        </div>
        <!-- 选项内容 2  -->
        <div id="item2" class="mui-slider-item mui-control-content">item 2 content</div>
        <!-- 选项内容 3  -->
        <div id="item3" class="mui-slider-item mui-control-content">item 3 content</div>
        <!-- 选项内容 4  -->
        <div id="item4" class="mui-slider-item mui-control-content">item 4 content</div>
        <!-- 选项内容 5  -->
        <div id="item5" class="mui-slider-item mui-control-content">item 5content</div>
    </div>
</div>