yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-bar{
				background: #fff;
				touch-action: none;
			}
			/*.mui-bar {
				-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
				padding-top: 6px;
			}*/
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" data-id="home">
				<img class="mui-icon" src="../images/home-active.png" />
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="equip">
				<img class="mui-icon" src="../images/equip.png" />
				<span class="mui-tab-label">设备</span>
			</a>
			<a class="mui-tab-item" data-id="warning">
				<img class="mui-icon" src="../images/warning.png" />
				<span class="mui-tab-label">预警</span>
			</a>
			<a class="mui-tab-item" data-id="personalinfo">
				<img class="mui-icon" src="../images/my.png" />
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content">

		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				//关闭等待框
				plus.nativeUI.closeWaiting();
				//显示当前页面
				mui.currentWebview.show();
				plus.webview.hide('login');
				plus.webview.close('login');
				//预加载页面
				var subInfos = [{
					    url: 'homePage.html',
					    id: 'home'
					}, {
					    url: 'equip.html',
					    id: 'equip',
					}, {
					    url: '../warning/warning.html',
					    id: 'warning'
					}, {
					    url: 'personalinfo.html',
					    id: 'personalinfo'
					}];
					
				var objStyle = {
					top: "0px",
					bottom: "52px",
				};
				
				var self = plus.webview.currentWebview(); //取到当前的主页窗口
				var activeTab = '';		
				
				// 默认只加载首页webview
				var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, objStyle);
				self.append(homeWv);
				activeTab = subInfos[0].id;
				
				// 根据id查询子页面的信息
				var getSubInfoById = function(infoList, id) {
				    var result = null;
				    for(var i = 0, len = infoList.length; i < len; i++) {
				        var _info = infoList[i];
				        if(_info.id === id) {
				            result = _info;
				            break;
				        }
				    }
				    return result;
				};
				//选项卡点击事件
				mui(".mui-bar-tab").on("tap", "a", function(e) {
					var _self = this;
				    var targetTab = _self.getAttribute('data-id');
				    if(targetTab === activeTab) {
				        return;
				    }
				    var _subWv = plus.webview.getWebviewById(targetTab);
				    
				    // 若webview不存在，则创建；
				    if(!_subWv) {
				        var _subInfo = getSubInfoById(subInfos, targetTab);
				        _subWv = plus.webview.create(_subInfo.url, _subInfo.id, objStyle);
				        self.append(_subWv);
				    }
				    _subWv.show();
				    
				    // 隐藏之前的webview
				    plus.webview.getWebviewById(activeTab).hide('none');
				    activeTab = targetTab;

					/**
					 * 用图片作为图标而不用字体图标。
					 */

					// 获取图标对象

					var targetIcon = mui(this.children[0])[0];
					//初始化
					mui(".mui-bar-tab .mui-tab-item img").each(function(index, item) {
						var itemSrc = item.getAttribute("src");
						if(itemSrc.indexOf("active")) {
							item.src = itemSrc.replace("-active.png", ".png");
						}
					});
					//设置当前的图标
					targetIcon.src = targetIcon.getAttribute("src").replace(".png", "-active.png");
				});
			})
			//退出应用
			mui.oldback = mui.back;
			var clickNum = 0;
			mui.back = function(event) {
				clickNum++;
				if(clickNum > 1) {
					plus.runtime.quit();
				} else {
					mui.toast("再按一次退出应用");
				}
				setTimeout(function() {
					clickNum = 0
				}, 1000);
				return false;
			}
			var flag = false;
			//创建遮罩蒙板
			var mask = mui.createMask(function() {
			    //设置点击蒙板不会自动消失
			    //但调用close方法关闭mask时，必须返回true
			    return flag;
			}); 
			//监听自定事件
			//打开遮罩蒙板
			window.addEventListener("openMask", function(e) {
			        flag = false;
			        mask.show(); //显示遮罩
			});
			//关闭遮罩蒙板
			window.addEventListener("closeMask", function(e) {
			        flag = true;
			        mask.close();
			});
		</script>
	</body>

</html>