程序基础框架：base.html
<body>
<div class="mui-content">
<div id="output"></div>
</div>
<footer class="mui-bar-footer mui-hidden" id="footer">
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="home" href="javascript:;" pageurl="./template/home/home.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="user" href="javascript:;" pageurl="./template/user/user.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">我的</span>
</a>
<a class="mui-tab-item" id="more" href="javascript:;" pageurl="./template/more/more.html">
<span class="mui-icon mui-icon-more"></span>
<span class="mui-tab-label">更多</span>
</a>
</nav>
</footer>
<script type="text/javascript" src="base.js"></script>
</body>脚本：base.js
var _preloadPages = Array();
var arr = mui('.mui-bar-footer a');
for(var i=0;i<arr.length;i++){
var pageurl = arr[i].getAttribute('pageurl');
var pageid = arr[i].getAttribute('id');
_preloadPages.push({
url:pageurl,
id:pageid,
styles:{
top:'0',
bottom:'50px'
}
});
};
mui.init({preloadPages:_preloadPages,keyEventBind:{backbutton: true}});
mui('.mui-bar-footer').on('tap','a',function(){
var jmp_id= this.getAttribute('id');
mui.openWindow({
id:jmp_id
});
});
mui.later(function(){
mui.openWindow({
id:'home'
});
document.getElementById("footer").classList.remove("mui-hidden");
},1000);
2级页面底部条按钮：home.html user.html more.html
2级页面必须禁止返回键(包含以下代码)，每个按钮对应一个webview
<script type="text/javascript">
mui.init({
keyEventBind: {
backbutton: false //关闭back按键监听
}
});
</script> 3级页面底部条按钮比如：home.html 的a标签跳转的到页面
3级页面必须不用禁止返回键(包含以下代码)
<script type="text/javascript">
mui.init();
</script>
除了base.html 必须固定格式外，其他页面通通用<a href="3级页面.html" >
实现跳转
1 个评论
要回复文章请先登录或注册
freedemon