Blend UI Footbar API文档
2018-10-17 11:35 更新
Construct
配置所需参数来初始化一个底部菜单组件Footbar
Footbar的配置格式如下:
var footbar = new Blend.ui.Footbar({"options":"values"});
Slider包含以下配置项:
id![](https://atts.w3cschool.cn/attachments/day_161016/201610161054142371.png)
footbar的id类型 | 说明 | 是否必须 |
---|---|---|
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:"我的"}
]
});
top![](https://atts.w3cschool.cn/attachments/day_161016/201610161054375340.png)
配置footbar距离屏幕top的坐标类型 | 说明 | 是否必须 |
---|---|---|
Number | footbar距离屏幕top的坐标,默认值在页面底部 | 否 |
实例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbarCase",
"top": 100,
"menus": [
{id:0,name:"账单"},
{id:1,name:"我的"}
]
});
left![](https://atts.w3cschool.cn/attachments/day_161016/201610161054478390.png)
配置footbar距离屏幕left的坐标类型 | 说明 | 是否必须 |
---|---|---|
Number | 距离屏幕left的坐标,默认值0 | 否 |
实例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbarCase",
"top": 100,
"left":100,
"menus": [
{id:0,name:"账单"},
{id:1,name:"我的"}
]
});
width![](https://atts.w3cschool.cn/attachments/day_161016/201610161054571375.png)
配置footbar宽度类型 | 说明 | 是否必须 |
---|---|---|
Number | footbar像素宽度,默认为屏幕宽度 | 否 |
实例:
var footbarCase = new Blend.ui.Footbar({
"id": "footbarCase",
"top": 100,
"left":100,
"widht":100,
"menus": [
{id:0,name:"账单"},
{id:1,name:"我的"}
]
});
height![](https://atts.w3cschool.cn/attachments/day_161016/201610161055268332.png)
配置footbar高度类型 | 说明 | 是否必须 |
---|---|---|
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:"我的"}
]
});
selected![](https://atts.w3cschool.cn/attachments/day_161016/201610161055379455.png)
菜单被选中时的触发函数类型 | 说明 | 是否必须 |
---|---|---|
Function | 点击菜单触发;默认为空; | 否 |
实例:
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:"预约"}]},
{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));
}
});
Method
show ( )![](https://atts.w3cschool.cn/attachments/day_161016/201610161055481762.png)
把footbar显示实例:
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:"预约"}]},
{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();
hide ( )![](https://atts.w3cschool.cn/attachments/day_161016/201610161056032634.png)
隐藏footbar菜单实例:
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:"预约"}]},
{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();
destroy ( )![](https://atts.w3cschool.cn/attachments/day_161016/201610161056166380.png)
销毁footbar实例:
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:"预约"}]},
{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();
以上内容是否对您有帮助:
更多建议: