nativetab/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	
	<body>
		<script type="text/javascript">
			var subpage_style = {
					top: '0px',
					bottom: '51px'
				},
				subpages = ['html/tab-webview-subpage-about.html', 'html/tab-webview-subpage-chat.html', 'html/tab-webview-subpage-contact.html'],
				aniShow = {};

			/**
			 * 简单封装了绘制原生view控件的方法
			 * 绘制内容支持font（文本，字体图标）,图片img , 矩形区域rect
			 * 
			 */
			function drawNative(id, styles, tags) {
				var view = new plus.nativeObj.View(id, styles, tags);
				return view
			}

			mui.plusReady(function() {
				var self = plus.webview.currentWebview(),
					nviews = self.getSubNViews(),
					active_color = '#007aff',
					normal_color = '#000',
					leftPos = Math.ceil((window.innerWidth - 60) / 2);
					
				/**	
				 * drawNativeIconBg 绘制带边框的半圆，
				 * 实现原理：
				 *   id为bg的tag 创建带边框的圆
				 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
				 *   注意创建先后顺序，创建越晚的层级越高
				 */
				var drawNativeIconBg = drawNative('iconBg', {
					bottom: '5px',
					left: leftPos + 'px',
					width: '60px',
					height: '60px',
					position:'dock'
				}, [{
					tag: 'rect',
					id: 'bg',
					position: {
						top: '0px',
						left: '0px',
						width: '100%',
						height: '100%'
					},
					rectStyles: {
						color: '#fff',
						radius: '30px',
						borderColor: '#ccc',
						borderWidth: '1px'
					}
				},{
					tag: 'rect',
					id: 'bg2',
					position: {
						bottom: '0px',
						left: '0px',
						width: '100%',
						height: '45px'
					},
					rectStyles: {
						color: '#fff'
					}
				}]);

				/**
				 * 凸起图标最后创建  浮在最顶层
				 *	id为iconBg的红色背景图
				 * 	id为icon的字体图标
				 * 	
				 */
				var drawNativeIcon = drawNative('tabIcon', {
					bottom: '10px',
					left: leftPos + 5 + 'px',
					width: '50px',
					height: '50px',
					position:'dock'   //此种停靠方式表明该控件应浮在窗口最上层，以免被其他窗口遮住
				}, [{
					tag: 'rect',
					id: 'iconBg',
					position: {
						top: '0px',
						left: '0px',
						width: '50px',
						height: '100%'
					},
					rectStyles: {
						color: '#d74b28',
						size: '50px',
						radius:'50%'
					}
				},{
					tag: 'font',
					id: 'icon',
					text: '\ue600',  //此为字体图标Unicode码'\e600'转换为'\ue600'
					position: {
						top: '0px',
						left: '0px',
						width: '50px',
						height: '100%'
					},
					textStyles: {
						fontSrc: '_www/fonts/iconfont.ttf',
						align:'center',
						color: '#fff',
						size: '30px'
					}
				}]);
				// append 到父webview中
				self.append(drawNativeIconBg);
				self.append(drawNativeIcon);
				
				//自定义监听图标点击事件
				drawNativeIcon.addEventListener('click', function(e) {
					mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。','悬浮球点击事件');
				});
				
				//创建子webview窗口 并初始化
				for(var i = 0; i < 3; i++) {
					var temp = {};
					if(!plus.webview.getWebviewById(subpages[i])) {
						var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
						if(i > 0) {
							sub.hide();
						} else {
							temp[subpages[i]] = "true";
							mui.extend(aniShow, temp);
							toggleNview(self.getStyle().subNViews[0], 0);
						}
						// append到当前父webview
						self.append(sub);
					}
				}
				var activePage = plus.webview.getWebviewById(subpages[0]);
				
				//给每个view 添加监听点击切换
				for(var i = 0; i < 4; i++){
					nviews[i].addEventListener('click', clickEvent, false);
				}
				

				// 自定义 tab 点击事件
				function clickEvent(e) {
					var currId = e.target.id,
						currIndex = parseInt(currId.substr(currId.length - 1, 1) - 1),
						currView = self.getStyle().subNViews[currIndex];
						
					targetPage = plus.webview.getWebviewById(subpages[currIndex]);

					if(targetPage == activePage) {
						return;
					}
					
					if(currIndex !== 3){
						//若为iOS平台或非首次显示，则直接显示
						if(mui.os.ios || aniShow[targetPage]) {
							plus.webview.show(targetPage);
						} else {
							//否则，使用fade-in动画，且保存变量
							var temp = {};
							temp[targetPage] = "true";
							mui.extend(aniShow, temp);
							plus.webview.show(targetPage, "fade-in", 300);
						}
						//隐藏当前;
						plus.webview.hide(activePage);
						//更改当前活跃的页面
						activePage = targetPage;						
						//底部选项卡切换
						toggleNview(currView, currIndex);
					}else{
						//第四个tab 打开新窗口
						var newWV = plus.webview.create('html/new-webview.html','new');
						newWV.show('slide-in-right',200);
					}
				}
				
				//更改颜色
				function changeColor(obj, color) {
					obj.color = color;
					return obj
				}

				function toggleNview(currObj, currIndex) {
					// 重绘当前nview
					self.updateSubNViews([{
						id: currObj.id,
						tags: [{
							tag: 'font', //currObj.tag
							id: currObj.id + 1,
							position: currObj.tags[0].position,
							text: currObj.tags[0].text,
							textStyles: changeColor(currObj.tags[0].textStyles, active_color)
						}, {
							tag: 'font',
							id: currObj.id + 2,
							position: currObj.tags[1].position,
							text: currObj.tags[1].text,
							textStyles: changeColor(currObj.tags[1].textStyles, active_color)
						}]
					}])

					// 重绘兄弟nview
					for(var i = 0; i < 4; i++) {
						var viewObj = self.getStyle().subNViews[i];

						if(i !== currIndex) {
							updateSubNView(viewObj);
						}
					}
				};

				function updateSubNView(obj) {
					self.updateSubNViews([{
						id: obj.id,
						tags: [{
							tag: 'font', //obj.tag
							id: obj.id + 1,
							position: obj.tags[0].position,
							text: obj.tags[0].text,
							textStyles: changeColor(obj.tags[0].textStyles, normal_color)
						}, {
							tag: 'font',
							id: obj.id + 2,
							position: obj.tags[1].position,
							text: obj.tags[1].text,
							textStyles: changeColor(obj.tags[1].textStyles, normal_color)
						}]
					}])
				}
			});
		</script>
	</body>
</html>