Footbar API文档

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