mui和html5plus之页面切换

学mui和html5plus主要是想学一些调用设备的能力，比如拍照／选图／保存图片到相册／录音／录制视频／定位等。

 

页面切换：

标签切换：

<div class="mui-content">
     <div id="home"  class='mui-control-content'>
     	首页
     </div>
     <div id="address" class='mui-control-content'>
     	通讯录
     </div>
     
     
       <nav class="mui-bar mui-bar-tab" >
	    <a class="mui-tab-item mui-active" href='#home'>
	        <span class="mui-icon mui-icon-chatbubble"></span>
	        <span class="mui-tab-label">微信</span>
	    </a>
	    <a class="mui-tab-item" href='#address'>
	        <span class="mui-icon mui-icon-phone"></span>
	        <span class="mui-tab-label">通信录</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-navigate"></span>
	        <span class="mui-tab-label">发现</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-person"></span>
	        <span class="mui-tab-label">我</span>
	    </a>
	</nav>
     
     
   
     
</div>
	

点击微信，显示首页，点击通信录显示通讯录。

 

html页面切换 

			mui.plusReady(function() {
				var page = [
					'wx.html',
					'list.html',
					'find.html',
					'me.html'
				];
				var ws = plus.webview.currentWebview();
				//当前窗口

				var styles = {
					top: "0px",
					bottom: "50px"
				};
				for(var i = 0; i < page.length; i++) {
					var item = plus.webview.create(page[i], page[i], styles);

					//创建4个新窗口
					item.hide();
					ws.append(item);
					//都放入到当前窗口中
				}
				plus.webview.show(page[0])

				mui(".mui-bar-tab").on("tap", 'a', function() {
					var href = this.getAttribute("href");
					plus.webview.show(href);
				});
			})