MUI学习二

页面初始化

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。

创建子页面

通过双webview模式解决，此种情况适用于需要上下拉刷新的列表页面。将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。使用方法如下：

mui.init({
subpages:[{
url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度，默认为100%
height:subpage-height,//子页面高度，默认为100%
…
},
extras:{}//额外扩展参数
}]
});

例子

现在我实现底部tab实现页面的跳转 ，有四个tab,index.html的作用就是显示固定导航和固定的底部,源码如下：

<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title"><strong > 微信</strong></h1>
		</header>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="main.html">
				<span class="mui-icon mui-icon-weixin"></span>
				<span class="mui-tab-label">微信</span>
			</a>
			<a class="mui-tab-item" href="contact.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="find.html">
				<span class="mui-icon mui-icon-paperplane"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" href="person.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

main.html 只有list ,源码如下：

		<div class="mui-content">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    幸福
                    <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                </div>
            </a>
        </li>
       
    </ul>
</div>

其他的HTML页面照本宣科，就不显示源码了，接下来就是js如何实现四个页面的跳转：

<script type="text/javascript">
			var subPages = ['main', 'contact', 'find', 'person'];  // 将四个页面存放在数组里面
			//		alert(subPages); 
			var subPageStyle = {       // 这里是设置子页面显示的位置
				top: '44px',
				bottom: '50px'
			};
	 
			mui.plusReady(function(){
				 var self= plus.webview.currentWebview();  // 获取当前窗口的指针
				 for (var i =0;i<subPages.length;i++) {
				 	var sub = plus.webview.create(subPages[i]+ ".html",subPages[i],subPageStyle);　　／／创建底部栏四个页面
				 	sub.hide();   //将所有的子页面隐藏起来
				 	self.append(sub);  // 把子页面append 进父页面
				 }
				 plus.webview.show(subPages[0]); 　／／显示第一个子页面
			});
			mui(".mui-bar-tab").on("tap","a",function(e){　　　／／　获取点击的底部栏
				var targetPage =this.getAttribute("href");
				plus.webview.show(targetPage,"fade-in",100);　　／／显示那个页面
			});
		</script>