页面切换

概述

在应用中很多开发者都会用到页面切换操作,BlendUI提供了相关页面切换接口供开发者使用。

示例

out方法

out方法针对的是Layer对象,可以实现退出该对象的页面并返回到上一个页面效果。 一个实例:
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();
        });
    });
});
(1) 在主页index.html上添加一个Button,定义一个页面创建事件,事件中通过Layer方法实现了content.html页面初始化并跳转。部分代码如下:
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第一个参数代表页面的id(默认首页id为“0”)。

(2) 在content.html页面上添加回退按钮id:nav-back,当触发回退操作时,使用Blend.uiget方法找到Layer实例,链式调用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();
        });
    });
});

代码中同样使用layerInit方法对id为contentLayerIdcontent.html页面进行了回退按钮绑定操作,定义了触发back回退事件,使用Layer.out()方法实现页面回退操作。

destroy方法

回退效果与out()方法效果相同,但是页面回退的同时将会对当前页面实例进行销毁操作,下次页面跳转时页面需要再次创建页面实例。基本调用方式同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) {
            //仅此处与上一节的out()方法调用不同
            Blend.ui.get('contentLayerId').destroy();
        });
    });
});

layerBack方法

回退操作既可以使用Layer中的方法也可以直接使用Blend.ui中的方法。layerBack()方法可以实现根据页面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进行页面控制。

示例源码

在线获取源码