Blend UI Layer API文檔

Construct

配置所需參數(shù)來構(gòu)建一個(gè)Layer。

Layer的配置格式如下：

var layer = new Blend.ui.Layer({"xxx":"xxx"});// 傳入創(chuàng)建Layer的參數(shù)鍵值對，具體參見以下文檔

另一種格式如下：

var Layer = Blend.ui.Layer;
var layer = new Layer({"xxx":"xxx"});

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

Layer包含以下配置項(xiàng)：

url

通過該項(xiàng)設(shè)置要顯示的頁面地址

類型	說明	是否必須
String	要顯示的頁面url地址	是

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

id

layer頁面id

類型	說明	是否必須
String	layer頁面id，標(biāo)識一個(gè)頁面	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer"
});

active

通過該項(xiàng)配置是否立即激活。如果不激活的話，該頁面將不會顯示。

類型	說明	是否必須
Boolean	是否立即激活，默認(rèn)為false，激活時(shí)需要使用Layer的in()方法激活頁面	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true
});

autoStopLoading

是否自動停止loading狀態(tài)

類型	說明	是否必須
Boolean	是否自動停止loading狀態(tài)（默認(rèn)值true，當(dāng)頁面加載完畢時(shí)將停止loading狀態(tài)）	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "autoStopLoading":true
});

maxLoadingTime

當(dāng)autoStopLoading設(shè)置為false時(shí)，超過定義時(shí)間將停止loading狀態(tài)

類型	說明	是否必須
Number	超時(shí)停止loading狀態(tài)（默認(rèn)2毫秒，單位毫秒）	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "autoStopLoading":false,
    "maxLoadingTime":10
});

pullToRefresh

是否支持下拉刷新

類型	說明	是否必須
Boolean	是否支持下拉刷新（默認(rèn)為false，不支持下拉刷新）	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true
});

pullText

下拉顯示的文字

類型	說明	是否必須
String	下拉顯示的文字	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true,
    "pullText":"下拉可以刷新⊙０⊙"
});

loadingText

加載中的文字

類型	說明	是否必須
String	加載中的文字	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "autoStopLoading":true,

    "pullText":"下拉可以刷新⊙０⊙",
    "loadingText":"更新中，請等待..."
});

releaseText

提示釋放的文字

類型	說明	是否必須
String	提示釋放的文字	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true,
    "pullText":"下拉可以刷新⊙０⊙",
    "loadingText":"更新中，請等待...",
    "releaseText":"釋放更新⊙０⊙"
});

pullIcon

下拉操作時(shí)需要顯示的Icon

類型	說明	是否必須
String	Base64編碼的圖片字符串（不包含數(shù)據(jù)頭）	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "pullToRefresh":true,
    "pullText":"下拉可以刷新⊙０⊙",
    "loadingText":"更新中，請等待...",
    "releaseText":"釋放更新⊙０⊙",
    "pullIcon":"base64圖片字符串"
});

loadingIcon

在頁面加載完畢前的loading狀態(tài)時(shí)，屏幕顯示的Icon

類型	說明	是否必須
String	Base64編碼的圖片字符串（不包含數(shù)據(jù)頭）	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,

    "loadingIcon":"base64圖片字符串"
});

subLayer

是否是子layer

類型	說明	是否必須
Boolean	是否是子layer,默認(rèn)不是	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "subLayer":true
});

fixed

如果是子layer，用fixed說明是否需要固定在頁面上

類型	說明	是否必須
Boolean	如果subLayer==true, 是否fiexd到附屬layer上面，默認(rèn)false	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    "subLayer":true,
    "fixed":true,
});

fx

layer打開顯示時(shí)的動畫類型slide|fade|pop

類型	說明	是否必須
Boolean	layer打開顯示時(shí)的動畫類型slide|fade|pop,默認(rèn)是slide	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    'fx': 'pop',
});

duration

layer打開顯示時(shí)的動畫時(shí)長

類型	說明	是否必須
Boolean	[normal|quick|slow|number], 動畫持續(xù)時(shí)間可以是字符串或者指的數(shù)值，默認(rèn)為normal	否

實(shí)例：

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "id":"contentLayer",
    "active":true,
    'fx': 'pop',
    "duration":"quick"
});

Method

in ( )

激活layer頁面，在頁面初始化配置時(shí)，如果active屬性未配置，則需要使用該方法激活要顯示的頁面。

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

//替換layer的url
layer.replace("http://www.baidu.com");
layer.in();

out ( )

當(dāng)前l(fā)ayer退場，返回上一個(gè)Layer

實(shí)例

var layerA = new Blend.ui.Layer({
    "url":"contentA.html",
    "active":true
});
var layerB = new Blend.ui.Layer({
    "url":"contentB.html",
    "active":true
});

//layerB退場，返回上一個(gè)layerA
layerB.out();

reload (url)

重載頁面

參數(shù)	類型	說明	是否必須
url	String	重載頁面時(shí)所用的url	是

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

layer.reload("http://www.baidu.com");

replace (url)

頁面url替換

參數(shù)	類型	說明	是否必須
url	String	頁面替換的url	是

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

layer.replace("http://www.baidu.com");
//可以利用in()方法，激活頁面
layer.in();

getUrl ( ) : String

獲取layer頁面的url屬性

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

console.log(layer.getUrl());

canGoBack ( ) : Boolean

layer是否可以回退，是否有歷史記錄

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

if(layer.canGoBack()){
    //可以回退后操作
    Blend.ui.layerBack();
}

clearHistory ( ) 

清空頁面歷史記錄

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

layer.clearHistory();

isActive ( ) : Boolean

layer是否是激活狀態(tài)

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html",
    "active":true
});

//頁面激活狀態(tài)，以下為true
console.log(layer.isActive());

destroy ( )

銷毀layer

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

layer.destroy();

setLayout( )

如果是子layer,此可以設(shè)置layer的大小和位置

實(shí)例

var layer = new Blend.ui.Layer({
    "url":"content.html"
});

layer.setLayout({
    left: 30,
    top: 180,
    width: 250,
    height: 200,
});