Blend 頁面切換

概述

在應用中很多開發(fā)者都會用到頁面切換操作，BlendUI提供了相關(guān)頁面切換接口供開發(fā)者使用。

示例

out方法

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            Blend.ui.get('contentLayerId').out();
        });
    });
});

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });
});

代碼中使用Blend.ui.layerInit方法定義了index.html頁面初始化后的操作，layerInit第一個參數(shù)代表頁面的id(默認首頁id為“0”)。

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            Blend.ui.get('contentLayerId').out();
        });
    });
});

代碼中同樣使用layerInit方法對id為contentLayerId的content.html頁面進行了回退按鈕綁定操作，定義了觸發(fā)back回退事件，使用Layer.out()方法實現(xiàn)頁面回退操作。

destroy方法

回退效果與out()方法效果相同，但是頁面回退的同時將會對當前頁面實例進行銷毀操作，下次頁面跳轉(zhuǎn)時頁面需要再次創(chuàng)建頁面實例?；菊{(diào)用方式同out()，此處不再多余解釋，部分代碼如下：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            //僅此處與上一節(jié)的out()方法調(diào)用不同
            Blend.ui.get('contentLayerId').destroy();
        });
    });
});

layerBack方法

回退操作既可以使用Layer中的方法也可以直接使用Blend.ui中的方法。layerBack()方法可以實現(xiàn)根據(jù)頁面id進行頁面回退控制。部分代碼如下：

document.addEventListener("blendready", function () {
        Blend.ui.layerInit("0", function (dom) {
        $('#jump', dom).click(function (e) {
            new Blend.ui.Layer({
                "id": "contentLayerId",
                "url": "content.html",
                "active": true,
                "duration": 200
            });
        });
    });

    Blend.ui.layerInit("contentLayerId", function (dom) {
        $('#nav-back', dom).click(function (e) {
            //回退操作
            Blend.ui.layerBack();
            //Blend.ui.layerBack("退至其他頁面id");
        });
    });
});

溫馨提示：使用該方法可以不再受到Layer句柄的約束，直接通過id進行頁面控制。

示例源碼

在線獲取源碼