Blend Tabs

概述

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

添加Tab切換按鈕

使用Html+CSS方式設(shè)計兩個Tab按鈕，通過點擊進行頁面切換，格式如下：

//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è)計為準，不作要求。

為Tabs添加頁面

用戶在添加了切換按鈕的基礎(chǔ)上，添加兩個名為tab1和tab2的html頁面。使用BlendUI中的LayerGroup組件實現(xiàn)頁面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
        });
    });
});

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

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

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

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

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

添加當前頁面指示

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

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);
        });
    });
});

溫馨提示：以上代碼中通過為li添加class的方式，結(jié)合css樣式來實現(xiàn)tab指示，實際效果以用戶設(shè)計為準，如果要顯示頁面上方的tab按鈕的話，要為LayerGroup設(shè)置top值。

示例源碼

在線獲取源碼