Blend Tabs

概述

在多數(shù)的應(yīng)用中都會(huì)使用到Tabs功能，BlendUI中可以利用LayerGroup組件快捷實(shí)現(xiàn)Tabs樣式，允許用戶通過(guò)tap和slide方式在不同頁(yè)面間切換。

添加Tab切換按鈕

使用Html+CSS方式設(shè)計(jì)兩個(gè)Tab按鈕，通過(guò)點(diǎn)擊進(jìn)行頁(yè)面切換，格式如下：

//html部分
<div id="nav">
    <ul>
        <li id="tab1" class="on"><a href="tab1.html">Tab1</a></li>
        <li id="tab2"><a href="tab2.html">Tab2</a></li>
    </ul>
</div>
//css部分
<style>
    #nav {
        display: block;
    }
    #nav>ul {
        height: 42px;
        display: box;
        display: -webkit-box;
        list-style:none;
        padding: 0;
        margin:0;
    }
    #nav>ul>li {
        -webkit-box-flex: 1;
        position: relative;
    }
    #nav>ul>li>a {
        font-size: 16px;
        display: block;
        width: 40px;
        height: 42px;
        line-height: 42px;
        margin: 0 auto;
        text-align: center;
    }
    .on {
        background-color: grey;
    }
</style>

溫馨提示：具體tabs的樣式需求以用戶設(shè)計(jì)為準(zhǔn)，不作要求。

為Tabs添加頁(yè)面

用戶在添加了切換按鈕的基礎(chǔ)上，添加兩個(gè)名為tab1和tab2的html頁(yè)面。使用BlendUI中的LayerGroup組件實(shí)現(xiàn)頁(yè)面slide切換，格式如下：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        var tabs = new Blend.ui.LayerGroup({
            id: "group",
            layers: [
                {
                    "id": "tab1",
                    "url": "tab1.html",
                    "active":true
                },
                {
                    "id": "tab2",
                    "url": "tab2.html",
                    "autoload": true
                }
            ],
            left: 0,
            top: 50
        });
    });
});

通過(guò)配置active參數(shù)設(shè)置默認(rèn)顯示頁(yè)，也就是tab1的頁(yè)面。當(dāng)前用戶已經(jīng)可以通過(guò)橫向滑動(dòng)頁(yè)面實(shí)現(xiàn)tab切換了，但是還不能通過(guò)點(diǎn)擊tab實(shí)現(xiàn)頁(yè)面切換，請(qǐng)繼續(xù)閱讀。

關(guān)聯(lián)Tab點(diǎn)擊響應(yīng)

用戶需要自行關(guān)聯(lián)點(diǎn)擊，可以使用LayerGroup中的active(id)方法，需要用戶添加的代碼如下：

$("#nav a").on("click", function (e) {
    e.preventDefault();
    tabs.active($(this).parent()[0].id);
});

溫馨提示：用戶使用LayerGroup時(shí)，一定要為每一個(gè)子頁(yè)面設(shè)置id。

添加當(dāng)前頁(yè)面指示

在頁(yè)面滑動(dòng)切換過(guò)程中，可以使用LayerGroup中的onshow參數(shù)配置，在頁(yè)面滑動(dòng)的過(guò)程中可以通過(guò)event事件的detail字段返回當(dāng)前頁(yè)面的id屬性，用戶可以通過(guò)添加css樣式來(lái)高亮當(dāng)前tab。添加頁(yè)面指示后的代碼如下：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        var tabs = new Blend.ui.LayerGroup({
            id: "group",
            layers: [
                {
                    "id": "first",
                    "url": "first.html",
                    "active":true
                },
                {
                    "id": "content",
                    "url": "content.html",
                    "autoload": true
                }
            ],
            onshow: function (event) {
                var layerId = event['detail'];
                $("#nav li").removeClass('on');
                $("#"+ layerId).addClass('on');
            },
            left: 0,
            top: 50
        });

        $("#nav a").on("click", function (e) {
            e.preventDefault();
            tabs.active($(this).parent()[0].id);
        });
    });
});

溫馨提示：以上代碼中通過(guò)為li添加class的方式，結(jié)合css樣式來(lái)實(shí)現(xiàn)tab指示，實(shí)際效果以用戶設(shè)計(jì)為準(zhǔn)，如果要顯示頁(yè)面上方的tab按鈕的話，要為L(zhǎng)ayerGroup設(shè)置top值。

示例源碼

在線獲取源碼