diff --git a/nativetab/README.md b/nativetab/README.md
index 5ec3359..4c7be0c 100644
--- a/nativetab/README.md
+++ b/nativetab/README.md
@@ -1,15 +1,12 @@
-## nativeObj 模式底部选项卡 + webview 子窗口 实现示例
+## tab选项卡示例教程-nativeObj原生模式tab（含底部凸起大图标）
 ## 概述
 
 这是一个利用原生view控件绘制底部选项卡的示例，有以下几个特点：
-
-1.操作简单：选项卡常用于App首页，为加快渲染，首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；
-
-2.绘制内容支持字体，图片，矩形区域
-
-3.开发者自定义选项卡点击事件
-
-4.同样支持页内手动绘制 view 控件，也就是说在非首页也可以使用此方法，参考示例：底部选项卡中央凸起悬浮大图标的绘制
+1.首页显示第一个tab项内容，其余tab项内容为首页的子窗口，相比创建四个子窗口，显示速度更快，占用内存更少，消耗性能更小。
+2.操作简单：选项卡常用于App首页，为加快渲染，首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；
+3.绘制内容支持字体，图片，矩形区域
+4.开发者自定义选项卡点击事件
+5.同样支持页内手动绘制 view 控件，也就是说在非首页也可以使用此方法，参考示例：底部选项卡中央凸起悬浮大图标的绘制
 
 #### 说明：中央凸起悬浮大图标，因涉及屏幕分辨率动态计算和为给出开发者页内手动绘制的示例的原因，放在首页plusReady事件中实现绘制的。该悬浮大图标支持点击事件，开发者可定制实现对应的点击逻辑。
 
diff --git a/nativetab/html/tab-webview-subpage-about.html b/nativetab/html/tab-webview-subpage-about.html
deleted file mode 100644
index 137c9b4..0000000
--- a/nativetab/html/tab-webview-subpage-about.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-	<head>
-		<meta charset="utf-8">
-		<title>Hello MUI</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
-		<meta name="apple-mobile-web-app-capable" content="yes">
-		<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
-		<link rel="stylesheet" href="../css/mui.min.css">
-		<style>
-			html,
-			body {
-				background-color: #efeff4;
-			}
-			
-			.title {
-				margin: 20px 15px 10px;
-				color: #6d6d72;
-				font-size: 15px;
-			}
-		</style>
-	</head>
-
-	<body>
-		<div class="mui-content">
-			<div class="title">
-				<p>这是使用nativeObj 原生控件绘制的底部选项卡示例，当前为第一个子页面；</p>
-				<p>选项卡常用于App首页，为加快渲染，原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；</p>
-				<p>选项卡图标使用字体绘制，点击可切换对应选项卡的高亮状态，开发者可自定义相应的点击事件；</p>
-				<p>本示例中，点击第二个选项卡打开一个支持下拉刷新的webview；点击第四个选项卡，打开一个新窗口。</p>
-				
-				<p>中间悬浮大球图标，因涉及屏幕分辨率动态计算，目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件，开发者可定制实现对应的点击逻辑。</P>
-					
-				<p>为提高性能，本示例选项卡图标全部使用字体文件绘制（推荐），实际使用中也可以使用图片绘制。</p>
-			</div>
-		</div>
-	</body>
-	<script src="../js/mui.min.js"></script>
-	<script>
-		mui.init({
-			swipeBack: true //启用右滑关闭功能
-		});
-	</script>
-
-</html>
\ No newline at end of file
diff --git a/nativetab/html/tab-webview-subpage-chat.html b/nativetab/html/tab-webview-subpage-chat.html
index b3ffe1b..25ec061 100644
--- a/nativetab/html/tab-webview-subpage-chat.html
+++ b/nativetab/html/tab-webview-subpage-chat.html
@@ -27,7 +27,7 @@
 		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
 			<div class="mui-scroll">
 				<div class="title">
-					这是subNView模式选项卡中的第2个子页面，该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
+					这是subNView模式选项卡中的第1个子页面，该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
 				</div>
 				<ul class="mui-table-view mui-table-view-chevron">
 					<li class="mui-table-view-cell">
diff --git a/nativetab/html/tab-webview-subpage-contact.html b/nativetab/html/tab-webview-subpage-contact.html
index 9625ff0..23cb4ae 100644
--- a/nativetab/html/tab-webview-subpage-contact.html
+++ b/nativetab/html/tab-webview-subpage-contact.html
@@ -49,7 +49,7 @@
 	<body>
 		<div class="mui-content">
 			<div class="title">
-				这是subNView模式选项卡中的第3个子页面，该页面展示一个通讯录示例
+				这是subNView模式选项卡中的第2个子页面，该页面展示一个通讯录示例
 			</div>
 
 			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
diff --git a/nativetab/index.html b/nativetab/index.html
index 1c594e4..4c42d18 100644
--- a/nativetab/index.html
+++ b/nativetab/index.html
@@ -1,39 +1,53 @@
 <!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" />
+		<style>
+			html,
+			body {
+				background-color: #efeff4;
+			}
+			
+			.title {
+				margin: 20px 15px 10px;
+				color: #6d6d72;
+				font-size: 15px;
+			}
+		</style>
 	</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
-			}
+		<div class="mui-content">
+			<div class="title">
+				<p>这是使用nativeObj 原生控件绘制的底部选项卡示例，当前为父页面，显示第一个tab项内容；</p>
+				<p>这里采用将第一个tab项内容放在父页面显示，因为是入口页面，会在启动中进行渲染，使首页显示速度更快</p>
+				<p>选项卡常用于App首页，为加快渲染，原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；</p>
+				<p>选项卡图标使用字体绘制，点击可切换对应选项卡的高亮状态，开发者可自定义相应的点击事件；</p>
+				<p>本示例中，点击第二个选项卡打开一个支持下拉刷新的webview；点击第四个选项卡，打开一个新窗口。</p>
+
+				<p>中间悬浮大球图标，因涉及屏幕分辨率动态计算，目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件，开发者可定制实现对应的点击逻辑。</P>
 
+				<p>为提高性能，本示例选项卡图标全部使用字体文件绘制（推荐），实际使用中也可以使用图片绘制。</p>
+			</div>
+		</div>
+
+		<script src="js/util.js"></script>
+		<script type="text/javascript">
+			var aniShow = {};
+			mui.init({
+				swipeBack: true //启用右滑关闭功能
+			});
 			mui.plusReady(function() {
 				var self = plus.webview.currentWebview(),
 					nviews = self.getSubNViews(),
-					active_color = '#007aff',
-					normal_color = '#000',
-					leftPos = Math.ceil((window.innerWidth - 60) / 2);
-					
+					subpages = util.options.subpages,
+					leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
+
 				/**	
 				 * drawNativeIconBg 绘制带边框的半圆，
 				 * 实现原理：
@@ -41,32 +55,32 @@
 				 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
 				 *   注意创建先后顺序，创建越晚的层级越高
 				 */
-				var drawNativeIconBg = drawNative('iconBg', {
+				var drawNativeIconBg = util.drawNative('iconBg', {
 					bottom: '5px',
 					left: leftPos + 'px',
 					width: '60px',
 					height: '60px',
-					position:'dock'
+					position: 'dock'
 				}, [{
 					tag: 'rect',
 					id: 'bg',
 					position: {
-						top: '0px',
+						top: '1px',
 						left: '0px',
 						width: '100%',
 						height: '100%'
 					},
 					rectStyles: {
 						color: '#fff',
-						radius: '30px',
+						radius: '50%',
 						borderColor: '#ccc',
 						borderWidth: '1px'
 					}
-				},{
+				}, {
 					tag: 'rect',
 					id: 'bg2',
 					position: {
-						bottom: '0px',
+						bottom: '-0.5px',
 						left: '0px',
 						width: '100%',
 						height: '45px'
@@ -82,30 +96,30 @@
 				 * 	id为icon的字体图标
 				 * 	
 				 */
-				var drawNativeIcon = drawNative('tabIcon', {
+				var drawNativeIcon = util.drawNative('tabIcon', {
 					bottom: '10px',
 					left: leftPos + 5 + 'px',
 					width: '50px',
-					height: '50px',
-					position:'dock'   //此种停靠方式表明该控件应浮在窗口最上层，以免被其他窗口遮住
+					height: '51px',
+					position: 'dock' //此种停靠方式表明该控件应浮在窗口最上层，以免被其他窗口遮住
+
 				}, [{
 					tag: 'rect',
 					id: 'iconBg',
 					position: {
-						top: '0px',
+						top: '1px',
 						left: '0px',
 						width: '50px',
-						height: '100%'
+						height: '50px'
 					},
 					rectStyles: {
 						color: '#d74b28',
-						size: '50px',
-						radius:'50%'
+						radius: '50%'
 					}
-				},{
+				}, {
 					tag: 'font',
 					id: 'icon',
-					text: '\ue600',  //此为字体图标Unicode码'\e600'转换为'\ue600'
+					text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
 					position: {
 						top: '0px',
 						left: '0px',
@@ -114,7 +128,7 @@
 					},
 					textStyles: {
 						fontSrc: '_www/fonts/iconfont.ttf',
-						align:'center',
+						align: 'center',
 						color: '#fff',
 						size: '30px'
 					}
@@ -122,126 +136,69 @@
 				// append 到父webview中
 				self.append(drawNativeIconBg);
 				self.append(drawNativeIcon);
-				
+
 				//自定义监听图标点击事件
+				var active_color = '#fff';
 				drawNativeIcon.addEventListener('click', function(e) {
-					mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。','悬浮球点击事件');
+					mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
+					// 重绘字体颜色
+					if(active_color == '#fff') {
+						drawNativeIcon.drawText('\ue600', {}, {
+							fontSrc: '_www/fonts/iconfont.ttf',
+							align: 'center',
+							color: '#000',
+							size: '30px'
+						}, 'icon');
+						active_color = '#000';
+					} else {
+						drawNativeIcon.drawText('\ue600', {}, {
+							fontSrc: '_www/fonts/iconfont.ttf',
+							align: 'center',
+							color: '#fff',
+							size: '30px'
+						}, 'icon');
+						active_color = '#fff';
+					}
+
 				});
-				
+
 				//创建子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]);
-				
+				util.initSubpage();
+				var activePage = plus.webview.currentWebview();
+
 				//给每个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);
+				for(var i = 0; i < 4; i++) {
+					nviews[i].addEventListener('click', function(e) {
+						var currId = e.target.id,
+							currIndex = parseInt(currId.substr(currId.length - 1, 1) - 1),
+							currView = self.getStyle().subNViews[currIndex];
+
+						// 匹配对应tab窗口	
+						if(currIndex > 0) {
+							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
 						} else {
-							//否则，使用fade-in动画，且保存变量
-							var temp = {};
-							temp[targetPage] = "true";
-							mui.extend(aniShow, temp);
-							plus.webview.show(targetPage, "fade-in", 300);
+							targetPage = plus.webview.currentWebview();
 						}
-						//隐藏当前;
-						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);
+						if(targetPage == activePage) {
+							return;
 						}
-					}
-				};
-
-				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)
-						}]
-					}])
+
+						if(currIndex !== 3) {
+							//底部选项卡切换
+							util.toggleNview(currView, currIndex);
+							// 子页面切换
+							util.changeSubpage(targetPage, activePage);
+							//更改当前活跃的页面
+							activePage = targetPage;
+						} else {
+							//第四个tab 打开新窗口
+							plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);
+						}
+					}, false);
 				}
 			});
 		</script>
 	</body>
+
 </html>
\ No newline at end of file
diff --git a/nativetab/js/util.js b/nativetab/js/util.js
new file mode 100644
index 0000000..78c35f5
--- /dev/null
+++ b/nativetab/js/util.js
@@ -0,0 +1,107 @@
+var util = {
+	options: {
+		active_color:'#007aff',
+		normal_color:'#000',
+		subpages:['html/tab-webview-subpage-chat.html', 'html/tab-webview-subpage-contact.html']
+	},
+	/**
+	 *  简单封装了绘制原生view控件的方法
+	 *  绘制内容支持font（文本，字体图标）,图片img , 矩形区域rect
+	 */
+	drawNative: function(id, styles, tags) {
+		var view = new plus.nativeObj.View(id, styles, tags);
+		return view;
+	},
+	/**
+	 * 初始化首个tab窗口 和 创建子webview窗口 
+	 */
+	initSubpage: function() {
+		var subpage_style = {
+				top: '0px',
+				bottom: '51px'
+			},
+			subpages = util.options.subpages,
+			self = plus.webview.currentWebview(),
+			temp = {};
+			// 初始化第一个tab项为首次显示
+			temp[self.id] = "true";
+			mui.extend(aniShow, temp);
+			// 初始化绘制首个tab按钮
+			util.toggleNview(self.getStyle().subNViews[0], 0);
+			
+		for(var i = 0, len = subpages.length; i < len; i++) {
+			
+			if(!plus.webview.getWebviewById(subpages[i])) {
+				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
+				//初始化隐藏
+				sub.hide();
+				// append到当前父webview
+				self.append(sub);
+			}
+		}
+	},
+	/**	
+	 * 点击切换tab窗口 
+	 */
+	changeSubpage: function(targetPage, activePage) {
+		//若为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);
+		}
+		//隐藏当前 除了第一个父窗口
+		if(activePage !== plus.webview.getLaunchWebview()){
+			plus.webview.hide(activePage);			
+		}
+	},
+	/**
+	 * 点击重绘底部tab （view控件）
+	 */
+	toggleNview: function(currObj, currIndex) {
+		var self = plus.webview.currentWebview();
+		// 重绘当前nview
+		util.updateSubNView(self.getStyle().subNViews[currIndex],util.options.active_color);
+		// 重绘兄弟nview
+		for(var i = 0; i < 4; i++) {
+			var viewObj = self.getStyle().subNViews[i];
+
+			if(i !== currIndex) {
+				util.updateSubNView(viewObj,util.options.normal_color);
+			}
+		}
+	},
+	/*
+	 * 改变颜色
+	 */
+	changeColor: function(obj, color) {
+		obj.color = color;
+		return obj
+	},
+	/*
+	 * 利用 webview 提供的 updateSubNViews 方法更新 view 控件
+	 */
+	updateSubNView: function(obj,color) {
+		var self = plus.webview.currentWebview();
+		self.updateSubNViews([{
+			id: obj.id,
+			tags: [{
+				tag: 'font', //此处直接赋值因为已知需要更新的tag 类型，不是固定值，请注意
+				id: obj.id + 1,
+				position: obj.tags[0].position,
+				text: obj.tags[0].text,
+				textStyles: util.changeColor(obj.tags[0].textStyles, color)
+			}, {
+				tag: 'font',
+				id: obj.id + 2,
+				position: obj.tags[1].position,
+				text: obj.tags[1].text,
+				textStyles: util.changeColor(obj.tags[1].textStyles, color)
+			}]
+		}]);
+	}
+};
\ No newline at end of file
diff --git a/nativetab/manifest.json b/nativetab/manifest.json
index 8a83f45..ecbf4e8 100644
--- a/nativetab/manifest.json
+++ b/nativetab/manifest.json
@@ -4,7 +4,7 @@
 		"iPhone",
 		"iPad"
 	],
-	"id": "H52221B8C",/*应用的标识，创建应用时自动生成，勿手动修改*/
+	"id": "mui_template_nativetab",/*应用的标识，创建应用时自动生成，勿手动修改*/
 	"name": "nativeObj模式底部选项卡",/*应用名称，程序桌面图标名称*/
 	"version": {
 		"name": "1.0",/*应用版本名称*/
@@ -428,10 +428,11 @@
 					"css/mui.min.css",
 					"html/tab-webview-subpage-about.html",
 					"fonts/mui.ttf",
-					"fonts/iconfont.ttf"
+					"fonts/iconfont.ttf",
+					"html/tab-webview-subpage-chat.html",
+					"js/util.js"
 				],
 				"refer": [
-					"html/tab-webview-subpage-chat.html",
 					"html/tab-webview-subpage-contact.html",
 					"html/new-webview.html"
 				],
@@ -462,7 +463,8 @@
 			"html/tab-webview-subpage-about.html": {
 				"resources": [
 					"css/mui.min.css",
-					"js/mui.min.js"
+					"js/mui.min.js",
+					"js/util.js"
 				],
 				"refer": [],
 				"priority": 0
diff --git a/nativetab/unpackage/.confirmed_dependencies b/nativetab/unpackage/.confirmed_dependencies
index 2c5e5a0..e141fe1 100644
--- a/nativetab/unpackage/.confirmed_dependencies
+++ b/nativetab/unpackage/.confirmed_dependencies
@@ -5,7 +5,9 @@
       "css/mui.min.css",
       "html/tab-webview-subpage-about.html",
       "fonts/mui.ttf",
-      "fonts/iconfont.ttf"
+      "fonts/iconfont.ttf",
+      "js/util.js",
+      "html/tab-webview-subpage-chat.html"
     ],
     "refer": [
       "html/tab-webview-subpage-setting.html",
@@ -39,7 +41,8 @@
   "html/tab-webview-subpage-about.html": {
     "resources": [
       "css/mui.min.css",
-      "js/mui.min.js"
+      "js/mui.min.js",
+      "js/util.js"
     ],
     "refer": []
   },
