tabBarMenu底部导航
百度云盘：官方案例
http://pan.baidu.com/s/1o8tZvjc
需要引入第三方模块
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
小编的项目
>由于项目需要，小编中间的按钮没有使用tabBarMenu的弹出菜单功能，而是跳转了一个页面、注：如果点击中间的按钮是跳转页面的话，会有一个小bug---导致中间的按钮不能点击 需要点击其他按钮才可再次点击中间的按钮
解决方法：从跳转页面回来之后，模拟一下导航点击动作
//模拟点击导航按钮 function simulate() { var tabBarMenu = api.require("tabBarMenu"); tabBarMenu.setBarSelect({ index: 0 }); }案例代码
function tabBarMenu() { var tabBarMenu = api.require("tabBarMenu"); var theme = "simple"; // 可以支持自定义主题,示例内置两种风格主题:simple,night. tabBarMenu.open({ // 打开标签菜单. defaultBarSelect: 0, // 默认选中的标签栏按钮 autoLayout: true, // 是否自动调整当前页面网页视图的位置. barConfig: { // 标签栏通用配置信息. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_bg1.png" // 背景图片路径. }, barItemConfig: { // 标签栏按钮的通用配置信息. titleColor: "#848284", // 文本颜色, 格式为#fff、#ffffff、rgba(r,g,b,a)等 titleSelectColor: "#848284", // 选中状态时,按钮文本的颜色, 默认与titleColor相同. fontSize: 11.0, // 文字大小. textMarginTop: 41.0, // 文本距离按钮上边界的距离. primaryItem: 5 // 激活弹出菜单的标签栏按钮的下标. }, barItems: [ // 标签栏各按钮的信息. { title: "聚聚", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/disc.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/disc_click.png" // 被点击时的背景图片路径. }, { title: "消息", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/chect.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/chect_click.png" // 被点击时的背景图片路径. }, { title: "", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn.png" // 被点击时的背景图片路径. }, { title: "聚友", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/meet.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/meet_click.png" // 被点击时的背景图片路径. }, { title: "我的", // 标题. bgImg: "widget://image/tabBarMenu/" + theme + "/me.png", // 背景图片路径. bgImgClick: "widget://image/tabBarMenu/" + theme + "/me_click.png" // 被点击后的背景图片路径. } ], menuConfig: { // 菜单栏通用配置. coverBgColor: "#fff", // 遮罩的背景色, 格式为#fff、#ffffff、rgba(r,g,b,a)等. coverAlpha: 1, // 遮罩的透明度, 取值范围0.0~1.0. rows: 3 // 单页菜单每行显示的按钮数. }, menuItemConfig: { // 菜单栏各按钮通用配置信息. titleColor: "#000", // 文本颜色, 格式为#fff、#ffffff、rgba(r,g,b,a)等. titleSelectColor: "#000", // 选中状态时,按钮文本的颜色, 默认与titleColor相同. fontSize: 11.0, // 字体大小. textMarginTop: 90.0 // 文本距离按钮上边界的距离. }, menuItems: [ // 菜单栏各按钮的信息. { title: "写个心情", //标题. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_talk.png", // 背景图片. bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_talk_click.png" // 被点击时的背景图片. }, { title: "每日签到", //标题. bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_registration.png", // 背景图片. bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_registration_click.png" // 被点击时的背景图片.
}, {
title: "主持人", //标题.
bgImg: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_videocamera.png", // 背景图片.
bgImgClick: "widget://image/tabBarMenu/" + theme + "/tabbar_btn_popup_videocamera_click.png" // 被点击时的背景图片.
}
]
}, function(ret, err) { // 点击标签栏或菜单栏按钮时的回调方法.点击激活菜单栏的标签栏按钮时不会触发此方法.
if(ret) {
// alert(ret.item.type+"--"+ret.item.index);
// var item = ret.index;
// if("menu" == item.type) {
// tabBarMenu.hideMenu(); // 隐藏弹出菜单.
// }
// api.alert({
// title: "提示",
// msg: "您点击了 " + item.type + " 上,第 " + item.index + " 个按钮!",
// buttons: ["确定"]
// });
switch(ret.item.index) {
case 0:
api.setFrameGroupIndex({
/*聚聚*/
name: "main_part",
index: 0,
scroll: true
});
break;
case 1:
api.setFrameGroupIndex({
/*消息*/
name: "main_part",
index: 1,
scroll: true
});
break;
case 2:
api.openWin({
/*中间按钮*/
name: "weibo_publish_word",
url: "./weibo/weibo_publish_word.html",
});
break;
case 3:
api.setFrameGroupIndex({
/*聚友*/
name: "main_part",
index: 2,
scroll: true
});
break;
case 4:
api.setFrameGroupIndex({
/*我的*/
name: "main_part",
index: 3,
scroll: true
});
break;
}
}
});
}
//创建FramGroup组
function OnFrame() {
var header = $api.byId("search");
$api.fixIos7Bar(header);
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var frameheight = api.winHeight - headerPos.h;
api.openFrameGroup({
name: "main_part",
scrollEnabled: false,
rect: {
x: 0,
y: headerPos.h,
w: "auto",
h: frameheight - 65
},
index: 0,
frames: [{
name: "home",
url: "./home/index.html",
bounces: false
}, {
name: "information",
url: "./information/info_list.html",
bounces: false
}, {
name: "weibo",
url: "./weibo/weibo_friends_list_frm.html",
bounces: false
}, {
name: "mine",
url: "./mine/my.html",
bounces: false
}]
}, function(ret, err) {
var name = ret.name;
var index = ret.index;
if(index == 0) {
$api.html($api.byId("search"), "<span style="color:#bbbbbb;margin-left:10px;"><i class="aui-iconfont aui-icon-location" style="font-size:0.9rem;"></i><e id="cityname">太原</e></span><div class="aui-searchbar-input aui-border-radius"><i class="iconfont icon-search" style="color:#00c3ff;"></i><form action="javascript:search();"><input type="search" placeholder="搜文章/搜微博/搜人" id="search-input" style="color:#bbbbbb;text-indent:6px;"></form>");
}
if(index == 2) {
$api.html($api.byId("search"), "<header class="aui-bar aui-bar-nav aui-bar-light" id="aui-header"><div class="aui-title">聚友</div><i class="iconfont icon-tianjiahaoyou aui-pull-right" tapmode onclick="addFriends();"></i><i class="iconfont icon-search aui-pull-right" tapmode onclick="doSearch();"></i>");
}
})
}