wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
							<!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,viewport-fit=cover" />
		<!-- 引入mui样式 -->
		<link href="css/mui.css" rel="stylesheet" />
		<!-- 本页独有样式 -->
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
			}

			/* tab中img中normal样式 */
			.cr-tab-img {
				width: 20px;
				height: 20px !important;
				margin-top: 4px;
			}

			/* tab中标签中normal样式 */
			.cr-tab-label {
				font-size: 14px;
			}

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

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

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

			/* 底部导航栏样式修正 */
			.mui-bar {
				border-top: 1px solid rgba(200, 200, 200, 1) !important;
				box-shadow: none !important;
				background-color: rgb(255, 255, 255) !important;
			}
		</style>
	</head>
	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="pages/main-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/main-message.html">
				<div normal="nav_ico_message_normal.png" active="nav_ico_message_active.png">
					<img src="img/nav/nav_ico_message_normal.png" class="cr-tab-img" />
				</div>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="pages/map.html">
				<div normal="nav_icon_map_normal.png" active="nav_icon_map_active.png">
					<img src="img/nav/nav_icon_map_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">
	mui.init();
	/* 关联子页面 */
	var subPages = [];
	subPages.push('pages/main-home.html');
	subPages.push('pages/main-message.html');
	subPages.push('pages/map.html');
	subPages.push('pages/map3d.html');
	subPages.push('pages/main-address.html');
	subPages.push('pages/main-user.html');
	/* 子页面样式 */
	var subPageStyle = {
		top: '0px',
		bottom: '52px',
		statusbar: {
			background: colorBackground,
		}
	};
	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();
		opener.close('none');
		pageLoad();
		/* 绘制一个Home中间凸起 */
		drawHome();
	})

	/* 中间绘制的视图 相关变量 */
	var view = undefined;
	var drawColor = 'rgba(255,255,255,1)'; //绘制颜色
	var roundPosition = undefined;
	var rectPosition = undefined;
	/**
	 * 绘制一个Home中间凸起
	 */
	function drawHome() {
		/* 绘制区域的高度 宽度 其中5是tab的数量 且必须是奇数*/
		var drawWidth = window.innerWidth / 5;
		var rectHeight = 51;
		var roundWidth = 80; //绘制圆的宽度
		var imgWidth = 60; //绘制图片的宽度
		/* view的位置 */
		var viewPosition = {
			bottom: '0px',
			height: roundWidth + 'px',
			width: drawWidth + 'px',
			left: drawWidth * 2 + 'px',
		};
		/* 圆形区域的位置 */
		roundPosition = {
			top: '1px',
			left: (drawWidth / 2 - roundWidth / 2) + 'px',
			width: roundWidth + 'px',
			height: (roundWidth - 2) + 'px',
		}
		/* 覆盖圆形区域的矩形位置 */
		rectPosition = {
			bottom: '0px',
			left: '0px',
			width: drawWidth + 'px',
			height: rectHeight + 'px',
		}
		var viewDraws = [];
		/* 创建view */
		view = new plus.nativeObj.View('test', viewPosition, viewDraws);
		/* 显示view */
		view.show();
		view.interceptTouchEvent(false);
		/* 添加此代码是为了保证Home被其他子窗口顺利遮挡 否则会一直悬着 */
		plus.webview.currentWebview().append(view);
		/* 绘制内容 */
		viewDraw('home_2d.png');
	}

	/**
	 * 函数相关
	 */

	/**
	 * @param {string} imgName 在view上绘制内容 其中imgName是中心绘制的图片名称
	 */
	function viewDraw(imgName) {
		view.reset();
		/* 绘制一个圆形 */
		view.drawRect({
			color: drawColor,
			radius: '50%',
			borderColor: 'rgba(200,200,200,1)',
			borderWidth: '1px',
		}, roundPosition);
		/* 绘制一个矩形 盖住圆的边界线 */
		view.drawRect({
			color: drawColor,
		}, rectPosition);
		/* 绘制一个图片 */
		var homeImg = new plus.nativeObj.Bitmap('homeImg');
		homeImg.load('img/home/' + imgName, function() {
			console.log('图片载入成功');
			// 绘制图片
			view.drawBitmap(homeImg, {
				top: '0px',
				left: '0px',
				width: '100%',
				height: '100%'
			}, roundPosition);
		}, function(e) {
			console.log('bmp1.png load failed! ' + JSON.stringify(e));
		})
	}

	/**
	 * 激活时操作
	 * @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) {
			if(targetTab == 'pages/map.html' || targetTab == 'pages/map3d.html'){
				/* 重复点击才切换 2d或3d地图 */
				if (targetTab == 'pages/map.html') {
					//为2d地图 切换后为3d
					tabItemObj.setAttribute('href', 'pages/map3d.html');
					targetTab = 'pages/map3d.html';
					viewDraw('home_3d.png');
				} else if (targetTab == 'pages/map3d.html') {
					//为2d地图 切换后为3d
					tabItemObj.setAttribute('href', 'pages/map.html');
					targetTab = 'pages/map.html';
					viewDraw('home_2d.png');
				}
			}else{
				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);
	}
</script>