wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<!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" />
		<!-- 引入mui样式 -->
		<link href="css/mui.css" rel="stylesheet" />
		<!-- 引入app通用补充样式 -->
		<link rel="stylesheet" href="css/app.new.css">
		<!-- 引入字体 -->
		<link rel="stylesheet" href="fonts/font-jt.css">
		<!-- 本页独有样式 -->
		<style type="text/css">
			/* tab中img中normal样式 */
			.cr-tab-img {
				width: 20px;
				height: 20px !important;
				margin-top: 4px;
			}

			/* tab中标签中normal样式 */
			.cr-tab-label {
				font-size: 14px;
				color: rgb(255, 255, 255) !important;
			}

			.mui-tab-item {
				height: 51px !important;
			}

			/* tabItem小标签样式 */
			.cr-badge {
				position: absolute;
			}

			/* tabItem激活文字标签样式 */
			.cr-active {
				color: rgb(0, 255, 255) !important;
				font-weight: bold;
			}

			/* 底部导航栏样式修正 */
			.mui-bar-tab {
				/* border-top: 5px solid rgba(200, 200, 200, 1) !important; */
				border-top: 1px solid rgba(72, 122, 194, 1) !important;
				box-shadow: none !important;
				background-color: rgb(36, 63, 109) !important;
			}
		</style>
	</head>
	<body style="background-color: aqua;">
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="pages/sys-home.html">
				<div normal="nav_ico_home_normal.png" active="nav_ico_home_active.png">
					<img src="img/nav/nav_ico_home_active.png" class="cr-tab-img" />
				</div>
				<span class="mui-tab-label">主页</span>
			</a>
			<a class="mui-tab-item" href="pages/map.esri.html">
				<div normal="nav_ico_map2d_normal.png" active="nav_ico_map2d_active.png">
					<img src="img/nav/nav_ico_map2d_normal.png" class="cr-tab-img" />
				</div>
				<span class="mui-tab-label">一张图</span>
			</a>
			<a class="mui-tab-item" href="pages/map3d.html">
				<div normal="nav_ico_map3d_normal.png" active="nav_ico_map3d_active.png">
					<img src="img/nav/nav_ico_map3d_normal.png" class="cr-tab-img" />
				</div>
				<span class="mui-tab-label">实景地图</span>
			</a>
			<a class="mui-tab-item" href="pages/main-address.html">
				<div normal="nav_ico_address_normal.png" active="nav_ico_address_active.png">
					<img src="img/nav/nav_ico_address_normal.png" class="cr-tab-img" />
				</div>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="pages/main-user.html">
				<div normal="nav_ico_user_normal.png" active="nav_ico_user_active.png">
					<img src="img/nav/nav_ico_user_normal.png" class="cr-tab-img" />
				</div>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>

</html>
<!-- 引入mui脚本 -->
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jQuery脚本 -->
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入网络交互脚本 -->
<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入通用脚本 -->
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入存储脚本 -->
<script src="js/save.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入webview脚本 -->
<script src="js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 本页独有脚本 -->
<script type="text/javascript">
	$('body').css('background-color', colorBackground);
	mui.init();
	/* 关联子页面 */
	var subPages = [];
	subPages.push('pages/sys-home.html');
	subPages.push('pages/map.esri.html');
	// subPages.push('pages/map.esri.html?type=main');
	subPages.push('pages/map3d.html');
	subPages.push('pages/main-address.html');
	subPages.push('pages/main-user.html');
	/* 子页面样式 */
	var subPageStyle = {
		top: '45px',
		bottom: '52px',
	};
	var aniShow = {};
	//当前激活选项
	var activeTab = null;
	/* 给所有的标签添加类 */
	$('.mui-tab-label').addClass('cr-tab-label');
	/* 默认选择tab样式 */
	$('.mui-tab-item.mui-active').addClass('cr-active');
	/* 选项卡点击事件 */
	mui('.mui-bar-tab').on('tap', 'a', function(e) {
		/* 设置 */
		setTabItem(this);
		/* 切换 */
		activeTabItem(this);
	});

	/**
	 * 页面显示
	 */
	UIView_DidLoad(function() {
		/* 取消全屏 */
		plus.navigator.setFullscreen(false);
		/* 设置状态栏文字颜色 dark 黑色 light白色 只有这两种 该处设置后 后面一直有效 */
		// plus.navigator.setStatusBarStyle('light');
		/* 关闭主页 */
		var opener = plus.webview.currentWebview().opener();
		if (opener != null) {
			opener.close('none');
		}
		pageLoad();
		/* 绘制一个Home中间凸起 */
		// drawHome();
		/* 创建一个定位地图 */
		// setTimeout(function() {
		// 	createLocaionMapPage();
		// }, 5000);
	})

	/**
	 * 激活时操作
	 * @param {Object} tabItemObj 当前激活的TabItem
	 */
	function setTabItem(tabItemObj) {
		var tabImgPath = 'img/nav/';
		/* 移除所有tab的选中样式 */
		$('.mui-tab-item').removeClass('cr-active');
		/* 给当前选中的tab添加选中样式 */
		$(tabItemObj).addClass('cr-active');
		/* 修改所有项的默认样式 */
		var tabs = $('.mui-bar-tab').children('.mui-tab-item');
		for (var i = 0; i < tabs.length; i++) {
			var normalSrc = $(tabs[i]).find('div').attr('normal');
			$(tabs[i]).find('div').find('img').attr('src', tabImgPath + normalSrc);
		}
		/* 修改选中项的样式 */
		var activeSrc = $(tabItemObj).find('div').attr('active');
		$(tabItemObj).find('div').find('img').attr('src', tabImgPath + activeSrc);
	}

	/**
	 * 切换页面
	 * @param {Object} tabItemObj tabItem
	 */
	function activeTabItem(tabItemObj) {
		var targetTab = tabItemObj.getAttribute('href');
		/* 如果重复点击 则直接返回 */
		if (targetTab == activeTab) {
			return;
		}
		//若为iOS平台或非首次显示，则直接显示
		if (mui.os.ios || aniShow[targetTab]) {
			plus.webview.show(targetTab);
		} else {
			//否则，使用fade-in动画，且保存变量
			var temp = {};
			temp[targetTab] = "true";
			mui.extend(aniShow, temp);
			plus.webview.show(targetTab, "fade-in", 300);
		}
		//隐藏当前;
		plus.webview.hide(activeTab);
		//更改当前活跃的选项卡
		activeTab = targetTab;
	}

	/**
	 * 页面初始化完成
	 */
	function pageLoad() {
		activeTab = subPages[0];
		var self = plus.webview.currentWebview();
		/* 预加载子页面 并隐藏 */
		for (var i = 0; i < subPages.length; i++) {
			var temp = {};
			var subPage = plus.webview.create(subPages[i], subPages[i], subPageStyle);
			/* 隐藏 */
			subPage.hide();
			self.append(subPage);
		}
		/* 默认显示第一个子页面 */
		plus.webview.show(activeTab);
	}
	/**
	 * 创建地图定位页面，主要为了解决案件列表中案件定位及其他页面需要进行地图定位
	 * 具体定位业务逻辑在地图页面中开发
	 */
	function createLocaionMapPage() {
		/* 定位地图Id 为了解决地图加载和定位的冲突 保证地图定位的速度 则在程序创建时则创建定位地图页面 并隐藏 */
		var lMapId = 'FeatureLocationByMap';
		createAndOpenPage({
			htmlPath: './pages/map.esri.html?type=location',
			id: lMapId,
			title: '地图定位',
			autoback: true,
			isShow: false,
		});
	}
</script>