Blend UI layerGroup API文檔

Construct

配置所需要參數(shù)來構(gòu)建layerGroup。

layerGroup的配置格式如下：

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

另一種配置格式如下：

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

開發(fā)者可自行選定使用格式，以下統(tǒng)一以第一種格式展示代碼

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的坐標(biāo)

類型	說明	是否必須
Number	layerGroup距離屏幕top的坐標(biāo)，默認(rèn)值0	否

實例

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

left

配置layerGroup距離屏幕left的坐標(biāo)

類型	說明	是否必須
Number	layerGroup距離屏幕left的坐標(biāo)，默認(rèn)值0	否

實例

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

width

配置layerGroup像素寬度

類型	說明	是否必須
Number	layer像素寬度，默認(rèn)全屏	否

實例

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

height

配置layerGroup像素高度

類型	說明	是否必須
Number	layerGroup像素高度，默認(rèn)全屏	否

實例

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中l(wèi)ayer間切換時事件處理，通過event對象中的detail字段可以獲得當(dāng)前激活的layer的id

類型	說明	是否必須
Function	layer間切換時要觸發(fā)的函數(shù)	否

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中l(wèi)ayer配置參數(shù)如下：

參數(shù)	類型	說明
url	String	layer的link
id	String	layer的id
autoload	Boolean	自動加載，默認(rèn)值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對應(yīng)的layer并顯示

參數(shù)	類型	說明	是否必須
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

參數(shù)	類型	說明	是否必須
true|false	Boolean	設(shè)置是否能手動滾動	是

實例

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自動切換是否能手動切換;

參數(shù)	類型	說明	是否必須
true|false	Boolean	設(shè)置是否能手動滾動	是

實例

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