### 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>'); } }) } ~~~