Blend UI Layer API文檔

Construct

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

Layer的配置格式如下：

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

另一種格式如下：

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

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

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

url

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

類(lèi)型	說(shuō)明	是否必須
String	要顯示的頁(yè)面url地址	是

實(shí)例：

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

id

layer頁(yè)面id

類(lèi)型	說(shuō)明	是否必須
String	layer頁(yè)面id，標(biāo)識(shí)一個(gè)頁(yè)面	否

實(shí)例：

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

active

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

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

實(shí)例：

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

autoStopLoading

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

類(lèi)型	說(shuō)明	是否必須
Boolean	是否自動(dòng)停止loading狀態(tài)（默認(rèn)值true，當(dāng)頁(yè)面加載完畢時(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í)，超過(guò)定義時(shí)間將停止loading狀態(tài)

類(lèi)型	說(shuō)明	是否必須
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

是否支持下拉刷新

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

實(shí)例：

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

    "pullToRefresh":true
});

pullText

下拉顯示的文字

類(lèi)型	說(shuō)明	是否必須
String	下拉顯示的文字	否

實(shí)例：

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

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

loadingText

加載中的文字

類(lèi)型	說(shuō)明	是否必須
String	加載中的文字	否

實(shí)例：

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

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

releaseText

提示釋放的文字

類(lèi)型	說(shuō)明	是否必須
String	提示釋放的文字	否

實(shí)例：

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

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

pullIcon

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

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

實(shí)例：

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

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

loadingIcon

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

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

實(shí)例：

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

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

subLayer

是否是子layer

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

實(shí)例：

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

fixed

如果是子layer，用fixed說(shuō)明是否需要固定在頁(yè)面上

類(lèi)型	說(shuō)明	是否必須
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打開(kāi)顯示時(shí)的動(dòng)畫(huà)類(lèi)型slide|fade|pop

類(lèi)型	說(shuō)明	是否必須
Boolean	layer打開(kāi)顯示時(shí)的動(dòng)畫(huà)類(lèi)型slide|fade|pop,默認(rèn)是slide	否

實(shí)例：

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

duration

layer打開(kāi)顯示時(shí)的動(dòng)畫(huà)時(shí)長(zhǎng)

類(lèi)型	說(shuō)明	是否必須
Boolean	[normal|quick|slow|number], 動(dòng)畫(huà)持續(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頁(yè)面，在頁(yè)面初始化配置時(shí)，如果active屬性未配置，則需要使用該方法激活要顯示的頁(yè)面。

實(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退場(chǎng)，返回上一個(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退場(chǎng)，返回上一個(gè)layerA
layerB.out();

reload (url)

重載頁(yè)面

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

實(shí)例

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

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

replace (url)

頁(yè)面url替換

參數(shù)	類(lèi)型	說(shuō)明	是否必須
url	String	頁(yè)面替換的url	是

實(shí)例

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

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

getUrl ( ) : String

獲取layer頁(yè)面的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 ( ) 

清空頁(yè)面歷史記錄

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

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

destroy ( )

銷(xiāo)毀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,
});