配置所需參數(shù)來初始化一個底部菜單組件Footbar
Footbar的配置格式如下:
var footbar = new Blend.ui.Footbar({"options":"values"});
Slider包含以下配置項:
類型 | 說明 | 是否必須 |
---|---|---|
String | footbar的id | 否 |
實例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbartest",
"menus": [
{id:0,name:"賬單",subMenus:[
{id:100,name:"當月賬單"},
{id:101,name:"歷史賬單"}
]
},
{id:1,name:"我的"}
]
});
類型 | 說明 | 是否必須 |
---|---|---|
Number | footbar距離屏幕top的坐標,默認值在頁面底部 | 否 |
實例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbarCase",
"top": 100,
"menus": [
{id:0,name:"賬單"},
{id:1,name:"我的"}
]
});
類型 | 說明 | 是否必須 |
---|---|---|
Number | 距離屏幕left的坐標,默認值0 | 否 |
實例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbarCase",
"top": 100,
"left":100,
"menus": [
{id:0,name:"賬單"},
{id:1,name:"我的"}
]
});
類型 | 說明 | 是否必須 |
---|---|---|
Number | footbar像素寬度,默認為屏幕寬度 | 否 |
實例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbarCase",
"top": 100,
"left":100,
"widht":100,
"menus": [
{id:0,name:"賬單"},
{id:1,name:"我的"}
]
});
類型 | 說明 | 是否必須 |
---|---|---|
Number | 菜單高度,默認45px | 否 |
實例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbarCase",
"top": 100,
"left":100,
"widht":100,
"height":100,
"menus": [
{id:0,name:"賬單"},
{id:1,name:"我的"}
]
});
類型 | 說明 | 是否必須 |
---|---|---|
Function | 點擊菜單觸發(fā);默認為空; | 否 |
實例:
footbarCase = new Blend.ui.Footbar({
id:"footbartest",
menus:[
{id:0,name:"賬單",
subMenus:[{id:100,name:"當月賬單"},{id:101,name:"歷史賬單"}]},
{id:1,name:"我的",
subMenus:[{id:100,name:"積分"},{id:101,name:"額度"},{id:102,name:"開卡"},{id:103,name:"繳費"},{id:104,name:"預(yù)約"}]},
{id:2,name:"自助查詢"},
{id:3,name:"資訊",
subMenus:[{id:101,name:"今日頭條"},{id:102,name:"昨日頭條"},{id:103,name:"前日頭條"},{id:104,name:"大前日頭條"}]}
],
selected:function(e){
alert(JSON.stringify(e.data));
}
});
實例:
var footbarCase = new Footbar({
id:"footbartest",
menus:[
{id:0,name:"賬單",
subMenus:[{id:100,name:"當月賬單"},{id:101,name:"歷史賬單"}]},
{id:1,name:"我的",
subMenus:[{id:100,name:"積分"},{id:101,name:"額度"},{id:102,name:"開卡"},{id:103,name:"繳費"},{id:104,name:"預(yù)約"}]},
{id:2,name:"自助查詢"},
{id:3,name:"資訊",
subMenus:[{id:101,name:"今日頭條"},{id:102,name:"昨日頭條"},{id:103,name:"前日頭條"},{id:104,name:"大前日頭條"}]}
],
selected:function(e){
alert(JSON.stringify(e.data));
}
});
footbarCase.show();
實例:
var footbarCase = new Footbar({
id:"footbartest",
menus:[
{id:0,name:"賬單",
subMenus:[{id:100,name:"當月賬單"},{id:101,name:"歷史賬單"}]},
{id:1,name:"我的",
subMenus:[{id:100,name:"積分"},{id:101,name:"額度"},{id:102,name:"開卡"},{id:103,name:"繳費"},{id:104,name:"預(yù)約"}]},
{id:2,name:"自助查詢"},
{id:3,name:"資訊",
subMenus:[{id:101,name:"今日頭條"},{id:102,name:"昨日頭條"},{id:103,name:"前日頭條"},{id:104,name:"大前日頭條"}]}
],
selected:function(e){
alert(JSON.stringify(e.data));
}
});
footbarCase.hide();
實例:
var footbarCase = new Footbar({
id:"footbartest",
menus:[
{id:0,name:"賬單",
subMenus:[{id:100,name:"當月賬單"},{id:101,name:"歷史賬單"}]},
{id:1,name:"我的",
subMenus:[{id:100,name:"積分"},{id:101,name:"額度"},{id:102,name:"開卡"},{id:103,name:"繳費"},{id:104,name:"預(yù)約"}]},
{id:2,name:"自助查詢"},
{id:3,name:"資訊",
subMenus:[{id:101,name:"今日頭條"},{id:102,name:"昨日頭條"},{id:103,name:"前日頭條"},{id:104,name:"大前日頭條"}]}
],
selected:function(e){
alert(JSON.stringify(e.data));
}
});
footbarCase.destroy();
更多建議: