Blend UI 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	是否支持下拉刷新(仅支持iOS)
pullBgColor	String	下拉刷新的背景颜色RGB值(仅支持iOS)
pullText	String	下拉时显示的文字(仅支持iOS)
loadingText	String	加载中显示的文字(仅支持iOS)
releaseText	String	释放提示的文字(仅支持iOS)

实例

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