阅读(2.1k) 书签赞(0) 我要纠错

Blend UI Footbar API文档

2018-10-17 11:35 更新

Construct

配置所需参数来初始化一个底部菜单组件Footbar

Footbar的配置格式如下：

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

Slider包含以下配置项：

id

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

配置footbar距离屏幕top的坐标

类型	说明	是否必须
Number	footbar距离屏幕top的坐标，默认值在页面底部	否

实例：

var footbarCase = new Blend.ui.Footbar({
    "id": "footbarCase",
    "top": 100,
    "menus": [
        {id:0,name:"账单"},
        {id:1,name:"我的"}
     ]
});

left

配置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

配置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

配置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

菜单被选中时的触发函数

类型	说明	是否必须
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 ( )

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

隐藏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 ( )

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

以上内容是否对您有帮助：

← Blend UI Slider API文档

Blend UI cascadingMenu API文档 →

写笔记

我要补充