mui 底部導航選單功能（原創）
阿新 • • 發佈：2019-01-27
簡單版
專業版<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>底部導航選單切換</title> <link href="../../../css/mui.min.css" rel="stylesheet" /> </head> <body> <nav class="mui-bar mui-bar-tab " id="nav"> <a class="mui-tab-item mui-active" id="a1"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item " id="a2"> <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span> <span class="mui-tab-label">訊息</span> </a> <a class="mui-tab-item " id="a3"> <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span> <span class="mui-tab-label">訊息</span> </a> </nav> <script src="../../../js/mui.min.js"></script> <script type="text/javascript" charset="utf-8"> mui.init({ subpages:[//先載入首頁 { url:'1.html', id:'a1', styles:{ top:'0px', bottom:'60px' } } ], preloadPages:[//快取其他頁面 { url:'2.html', id:'a2', styles:{ top:'0px', bottom:'60px' } }, { url:'3.html', id:'a3', styles:{ top:'0px', bottom:'60px' } } ] }); mui.plusReady(function(){ // 獲取所有Webview視窗 var winAll=plus.webview.all();//獲取所有窗體 //console.log(JSON.stringify(winAll)) var a1,a2,a3 mui("#nav").on("tap","#a1",function(){//點選觸發 a1=plus.webview.getWebviewById("a1"); console.log(JSON.stringify(a1)) a1.show() a2.hide()//這一步必須有 a3.hide()//這一步必須有 }) mui("#nav").on("tap","#a2",function(){//點選觸發 a2=plus.webview.getWebviewById("a2"); a2.show() }) mui("#nav").on("tap","#a3",function(){//點選觸發 a3=plus.webview.getWebviewById("a3"); a3.show() }) }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>底部導航選單切換(專業寫法)</title> <link href="../../../css/mui.min.css" rel="stylesheet" /> </head> <body> <nav class="mui-bar mui-bar-tab " id="nav"> </nav> <script src="../../../js/jquery.js"></script> <script src="../../../js/mui.min.js"></script> <script type="text/javascript" charset="utf-8"> var hrefArr=[ {"title":"首頁","id":"a1","href":"1.html","icon":"mui-icon-home"}, {"title":"訊息也","id":"a2","href":"2.html","icon":"mui-icon-email"}, {"title":"個人中心","id":"a3","href":"3.html","icon":"mui-icon-contact"} ]//要跳轉的 頁面跟他的ID要先寫好 var navFirst=[],navOther=[],viewObj=[]//第一個頁面資料 其他頁面資料 窗體物件 mui.plusReady(function(){ navInit() clickFun(navFirst[0].id,plus.webview.getWebviewById(navFirst[0].id)) mui("#nav").on("tap","a",function(e){ var id=$(this).attr("id") var obj=plus.webview.getWebviewById(id) clickFun(id,obj) }) }); function clickFun(id,obj){ if(id==navFirst[0].id){ $.each(navOther,function(i,v){ var otherObj=plus.webview.getWebviewById(v.id) otherObj.hide() }) } obj.show() } //初始化html function navInit(){ var html="" $.each(hrefArr,function(i,v){ if(i==0){ } html+='<a class="mui-tab-item'+((i==0)?" mui-active":"")+' " id="'+v.id+'">'+ '<span class="mui-icon '+v.icon+'"></span>'+ '<span class="mui-tab-label">'+v.title+'</span>'+ '</a>' }) $("#nav").html(html) $.each(hrefArr,function(i,v){ var arrI={"url":v.href,"id":v.id,styles:{top:'0px',bottom:'60px' }} if(i==0){//第一個頁面 navFirst.push(arrI) }else{//快取住的頁面 navOther.push(arrI) } }) mui.init({ subpages:navFirst,//先載入首頁 preloadPages:navOther//快取其他頁面 }); } //點選事件初始化 </script> </body> </html>