layerGroup API文档

Construct

配置所需要参数来构建layerGroup。

layerGroup的配置格式如下:

var layerGroup = new Blend.ui.layerGroup({"options":"values"});

另一种配置格式如下:

var LayerGroup = Blend.ui.layerGroup;
var layerGroup = new LayerGroup({"options":"values"});

开发者可自行选定使用格式,以下统一以第一种格式展示代码

layerGroup包含以下配置项:

id

配置layerGroup的id

类型 说明 是否必须
String layerGroup的id

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }]
});

top

配置layerGroup距离屏幕top的坐标

类型 说明 是否必须
Number layerGroup距离屏幕top的坐标,默认值0

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }],
    top: 90
});

left

配置layerGroup距离屏幕left的坐标

类型 说明 是否必须
Number layerGroup距离屏幕left的坐标,默认值0

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }],
    left: 90
});

width

配置layerGroup像素宽度

类型 说明 是否必须
Number layer像素宽度,默认全屏

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }],
    width: 90
});

height

配置layerGroup像素高度

类型 说明 是否必须
Number layerGroup像素高度,默认全屏

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }],
    height: 90
});

onshow

定义layerGroup中layer间切换时事件处理,通过event对象中的detail字段可以获得当前激活的layer的id

类型 说明 是否必须
Function layer间切换时要触发的函数
function(event){
     //获取选择的layerId
     var layerId = event['detail'];
}

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }],
    onshow: function(event) {
        var layerId = event['detail'];
    }
});

layers

定义layerGroup中要显示的layers (部分配置仅限iOS)

类型 说明 是否必须
Array layerGroup中的layers
layers中layer配置参数如下:
参数 类型 说明
url String layer的link
id String layer的id
autoload Boolean 自动加载,默认值false
pullToRefresh Boolean 是否支持下拉刷新
pullBgColor String 下拉刷新的背景颜色RGB值
pullText String 下拉时显示的文字
loadingText String 加载中显示的文字
releaseText String 释放提示的文字

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true,
        "pullToRefresh":true,
        "pullBgColor":"ff0000",
        "pullText":"下拉刷新",
        "loadingText":"更新中...",
        "releaseText":"释放更新"
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }]
});

Method

active (layerId)

切换到layerId对应的layer并显示

参数 类型 说明 是否必须
layerId String 要显示的layer的id

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }]
});

layerGroup.active("top");

destroy ( )

销毁layerGroup

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }]
});

layerGroup.destroy();

isScroll ( )

isScroll判断是否可以滚动

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }]
});

layerGroup.isScroll();

setScroll ( )

setScroll

参数 类型 说明 是否必须
true|false Boolean 设置是否能手动滚动

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }]
});

layerGroup.setScroll(false);

toggleScroll ( )

toggleScroll自动切换是否能手动切换;

参数 类型 说明 是否必须
true|false Boolean 设置是否能手动滚动

实例

var layerGroup = new Blend.ui.LayerGroup({
    id: "group",
    layers: [{
        "id": "first",
        "url": "first.html",
        "autoload": true
    }, {
        "id": "top",
        "url": "top.html",
        "autoload": true
    }]
});

layerGroup.toggleScroll();