mui 底部导航菜单功能(原创)
2016-08-20 23:56
253 查看
简单版
<!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>
相关文章推荐
- Android使用开源组件PagerBottomTabStrip实现底部菜单和顶部导航功能
- TabHost、RadioGroup、ToolBar实现底部菜单导航
- Bing Maps进阶系列七:Bing Maps功能导航菜单华丽的变身
- 简单的jquery导航二级菜单展示功能
- Fragment+ViewPager实现底部导航功能
- 经典三行两列布局带隐藏导航功能和菜单折叠功能
- 网页底部圆形可折叠式导航菜单
- mui底部导航
- 深入了解aspx页面的智能导航(SmartNavigation)功能(downmoon原创)
- Android 底部导航菜单
- 固定底部导航菜单-续集(BottomMenu-移动端V3.0)
- AndroidUI FragmentTabHost类完成 底部导航布局功能
- Bing Maps进阶系列七:Bing Maps功能导航菜单华丽的变身
- WordPress菜单导航功能设置教程
- 实现一个顶部和底部的导航功能
- 转-TabHost组件(二)(实现底部菜单导航)
- android SectorMenuView底部导航扇形菜单的实现代码
- Bing Maps进阶系列七:Bing Maps功能导航菜单华丽的变身
- 【原创】在IE9下 登录光大银行后,左侧的网银导航菜单显示不了的临时解决办法
- 安卓项目之淘忆2.0的代码实现之主页底部的导航栏功能