Blend 頁(yè)面切換

概述

在應(yīng)用中很多開(kāi)發(fā)者都會(huì)用到頁(yè)面切換操作，BlendUI提供了相關(guān)頁(yè)面切換接口供開(kāi)發(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頁(yè)面初始化后的操作，layerInit第一個(gè)參數(shù)代表頁(yè)面的id(默認(rèn)首頁(yè)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方法對(duì)id為contentLayerId的content.html頁(yè)面進(jìn)行了回退按鈕綁定操作，定義了觸發(fā)back回退事件，使用Layer.out()方法實(shí)現(xiàn)頁(yè)面回退操作。

destroy方法

回退效果與out()方法效果相同，但是頁(yè)面回退的同時(shí)將會(huì)對(duì)當(dāng)前頁(yè)面實(shí)例進(jìn)行銷毀操作，下次頁(yè)面跳轉(zhuǎn)時(shí)頁(yè)面需要再次創(chuàng)建頁(yè)面實(shí)例?；菊{(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()方法可以實(shí)現(xiàn)根據(jù)頁(yè)面id進(jìn)行頁(yè)面回退控制。部分代碼如下：

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("退至其他頁(yè)面id");
        });
    });
});

溫馨提示：使用該方法可以不再受到Layer句柄的約束，直接通過(guò)id進(jìn)行頁(yè)面控制。

示例源碼

在線獲取源碼