编译至0.7.0版本

examples/hello-mui/examples/accordion.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -123,6 +129,6 @@
 	</div>
 </div>
 
-
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/ajax.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -129,4 +135,5 @@
 	})(mui);
 </script>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/badges.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -54,4 +60,5 @@
 	</div>
 </div>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons-with-badges.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -46,4 +52,5 @@
     </div>
 </div>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons-with-block.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -49,4 +55,5 @@
   }
 </style>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons-with-fabs.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -93,4 +99,5 @@
     </div>
 </div>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons-with-icons.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -69,5 +75,7 @@
         </button>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -88,4 +94,5 @@
 	</div>
 </div>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/cards.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -48,5 +54,7 @@
         </ul>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/checkbox.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -55,5 +61,7 @@
 		</form>
 	</div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/dialog.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -83,5 +89,7 @@
   	padding: 20px 10px ;
   }
 </style>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/forms-with-group-and-labels.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -61,5 +67,7 @@
         </form>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/forms-with-group.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -42,5 +48,7 @@
         </form>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/forms.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -53,5 +59,7 @@
     </div>
 
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/grid-default.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -84,5 +90,7 @@
         }
     });
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/grid-pagination.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -237,13 +243,18 @@
 		var slider = document.getElementById('Gallery');
 		var group = slider.querySelector('.mui-slider-group');
 		var items = mui('.mui-slider-item', group);
+		//克隆第一个节点
 		var first = items[0].cloneNode(true);
 		first.classList.add('mui-slider-item-duplicate');
+		//克隆最后一个节点
 		var last = items[items.length - 1].cloneNode(true);
 		last.classList.add('mui-slider-item-duplicate');
 
-		function toggleLoop(toggle) {
-			if (toggle) {
+		//处理是否循环逻辑，若支持循环，需支持两点：
+		//1、在.mui-slider-group节点上增加.mui-slider-loop类
+		//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
+		function toggleLoop(loop) {
+			if (loop) {
 				group.classList.add('mui-slider-loop');
 				group.insertBefore(last, group.firstChild);
 				group.appendChild(first);
@@ -254,12 +265,14 @@
 			}
 		}
 
-
+		//按下“循环”按钮的处理逻辑；
 		document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
-			var detail = e.detail;
-			toggleLoop(detail.isActive);
+			var loop = e.detail.isActive;
+			toggleLoop(loop);
 		});
 	});
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/icons.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -196,4 +202,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/info.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -45,7 +51,7 @@
 		</p>
 		<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
 		<h4>版本介绍</h4>
-		<p>当前版本为0.6.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
+		<p>当前版本为0.6.1，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
 		<h4>License</h4>
 		<p>
 			mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
@@ -82,4 +88,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/inputs.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -38,7 +44,18 @@
 		<div class="mui-input-row mui-search">
 			<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
 		</div>
+		<div class="mui-input-row mui-input-range">
+				<label>slider</label>
+				<input type="range" min="0" max="100">
+			</div>
+			<div class="mui-input-row">
+				<label>Switch</label>
+				<div class="mui-switch mui-active">
+					<div class="mui-switch-handle"></div>
+				</div>
+			</div>
 		<form class="mui-input-group">
+			
 			<div class="mui-input-row">
 				<label>Input</label>
 				<input type="text" placeholder="普通输入框">
@@ -76,4 +93,5 @@
 	});
 </script>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/iscroll.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -109,5 +115,7 @@
 
 	})(mui); 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/list-triplex-row.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -115,5 +121,7 @@
         </li>
     </ul>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/list-with-input.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -75,5 +81,7 @@
 		</ul>
 	</div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/modals.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -41,5 +47,7 @@
         </div>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/oa-contact-list.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -56,5 +62,7 @@
 <script type="text/javascript" charset="utf-8">
     mui.init({optimize:false,swipeBack: true});
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/oa-contact-main.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -73,5 +79,7 @@
     });
     mui.init({optimize:false,swipeBack: false});
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/oa-grid.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -134,5 +140,7 @@
 	</ul>
 
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/oa-missives-detail.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -100,5 +106,7 @@
         <span id="item4mobile" class="mui-control-content">Item 4</span>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/offcanvas-left-plus-main.html

@@ -15,6 +15,7 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			
 		</style>
 		<script>
 			mui.init();
@@ -189,4 +190,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/offcanvas-plus-menu.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -78,4 +84,5 @@
   
 </script>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/offcanvas-right-plus-main.html

@@ -189,4 +189,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/offcanvas-with-left.html

@@ -156,22 +156,26 @@
 	var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
 	var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
 	var offCanvas = mui('#offCanvas');
+	//按下“整体滑动”开关后的执行逻辑
 	document.getElementById('switch').addEventListener('toggle', function(event) {
-		if (event.detail.isActive) { //整体滑动时，侧滑菜单在inner-wrap内
+		if (event.detail.isActive) { 
+			//整体滑动时，侧滑菜单在inner-wrap内
 			offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
-		} else { //仅主内容滑动时，侧滑菜单在off-canvas-wrap内
+		} else { 
+			//仅主内容滑动时，侧滑菜单在off-canvas-wrap内
 			offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
 		}
 	});
+	//按下“显示侧滑菜单”按钮后的执行逻辑
 	document.getElementById('offCanvasShow').addEventListener('tap', function() {
-		//offCanvas.offCanvas('toggle')//toggle or show;
 		offCanvas.offCanvas('show');
 	});
+	//按下“关闭侧滑菜单”按钮后的执行逻辑
 	document.getElementById('offCanvasHide').addEventListener('tap', function() {
-		//offCanvas.offCanvas('toggle')//toggle or hide;
 		offCanvas.offCanvas('hide');
 	});
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/offcanvas-with-right.html

@@ -266,5 +266,7 @@
 		offCanvas.offCanvas('hide');
 	});
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/pagination.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -242,5 +248,7 @@
   	padding: 10px;
   }
 </style>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/popovers-with-actionsheet.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -60,4 +66,5 @@
 </div>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/popovers-with-cross-webviews-popover.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -96,5 +102,7 @@
 			});
 		})(mui);
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/popovers-with-cross-webviews.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -41,5 +47,7 @@
 		});
 	});
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/popovers-with-js-call.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -79,4 +85,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/popovers.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -49,4 +55,5 @@
 </div>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/preload-mixwebview-content.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -55,5 +61,7 @@
 		}
 	}); 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/preload-mixwebview-main.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -38,5 +44,7 @@
 		}
 	}); 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/preload-webview-with-openwindow.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -66,5 +72,7 @@
 		}, 2000);
 	}
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/preload-webview.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -66,5 +72,7 @@
 		}, 2000);
 	}
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/preload.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -103,4 +109,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/pull-refresh-content-custom.html

-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>demo</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">
-		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<style>
-			html, body, .mui-content {
-				background-color: #efeff4;
-			}
-		</style>
-		<script>
-			mui.init();
-		</script>
-	</head>
-	<body>
-
-<!DOCTYPE HTML>
-<html>
-	<head>
-		<meta charset="utf-8"/>
-		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-		<meta name="HandheldFriendly" content="true"/>
-		<meta name="MobileOptimized" content="320"/>
-		<title>Hello H5+</title>
-		<script type="text/javascript" charset="utf-8">
-var ws=null,wo=null;
-// 扩展API加载完毕，现在可以正常调用扩展API 
-function plusReady(){
-	// 获取自身窗口
-	ws=plus.webview.currentWebview();
-	wo=ws.opener();
-}
-// 判断扩展API是否准备，否则监听"plusready"事件
-if(window.plus){
-	plusReady();
-}else{
-	document.addEventListener("plusready",plusReady,false);
-}
-// DOM构建完成获取列表元素
-var list=null;
-document.addEventListener("DOMContentLoaded",function(){
-	list=document.getElementById("list");
-});
-// 刷新页面
-function onRefresh(){
-	setTimeout(function(){
-		if(list){
-			var item=document.createElement("li");
-			item.innerHTML="<span>New Item "+(new Date())+"</span>";
-			list.insertBefore(item,list.firstChild);
-		}
-		ws.endPullToRefresh();
-		wo.evalJS("pullReset()");
-	},2000);
-}
-		</script>
-		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
-		<style type="text/css">
-li {
-	padding: 1em;
-	border-bottom: 1px solid #eaeaea;
-}
-li:active {
-	background: #f4f4f4;
-}
-		</style>
-	</head>
-	<body>
-		<ul id="list" style="list-style:none;margin:0;padding:0;">
-			<li><span onclick="alert('ok');">Initializ List Item 1</span></li>
-			<li><span>Initializ List Item 2</span></li>
-			<li><span>Initializ List Item 3</span></li>
-			<li><span>Initializ List Item 4</span></li>
-			<li><span>Initializ List Item 5</span></li>
-			<li><span>Initializ List Item 6</span></li>
-			<li><span>Initializ List Item 7</span></li>
-			<li><span>Initializ List Item 8</span></li>
-			<li><span>Initializ List Item 9</span></li>
-			<li><span>Initializ List Item 10</span></li>
-		</ul>
-	</body>
-</html>
-</body>
-</html>
\ No newline at end of file

examples/hello-mui/examples/pulldown-with-plus-content-custom.html

-<!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">
-		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-		</style>
-		<script>
-			mui.init();
-		</script>
-	</head>
-
-	<body>
-
-<script type="text/javascript" charset="utf-8">
-	var ws = null,wo = null;
-	
-	mui.plusReady(function(){
-		// 获取自身窗口
-		ws = plus.webview.currentWebview();
-		wo = ws.opener();
-	});
-	
-	
-	// DOM构建完成获取列表元素
-	var list = null;
-	document.addEventListener("DOMContentLoaded", function() {
-		list = document.getElementById("list");
-	});
-	// 刷新页面
-	function onRefresh() {
-		setTimeout(function() {
-			if (list) {
-				var item = document.createElement("li");
-				item.innerHTML = "<span>New Item " + (new Date()) + "</span>";
-				list.insertBefore(item, list.firstChild);
-			}
-			ws.endPullToRefresh();
-			wo.evalJS("pullReset()");
-		}, 2000);
-
-		setTimeout(function() {
-			var table = document.body.querySelector('.mui-table-view');
-			var cells = document.body.querySelectorAll('.mui-table-view-cell');
-			for (var i = cells.length, len = i + 3; i < len; i++) {
-				var li = document.createElement('li');
-				li.className = 'mui-table-view-cell';
-				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
-				table.insertBefore(li, table.firstChild);
-			}
-			ws.endPullToRefresh();
-			wo.evalJS("pullReset()");
-		}, 1000);
-	}
-//	mui.init({
-//		swipeBack: false,
-//		optimize: false,
-//		pullRefresh: {
-//			container: '.mui-content-padded',
-//			up: {
-//				contentrefresh: '正在加载...',
-//				callback: pullupRefresh
-//			}
-//		}
-//	});
-	/**
-	 * 上拉加载具体业务实现
-	 */
-	function pullupRefresh(callback) {
-		setTimeout(function() {
-			callback(); //refresh completed
-			var table = document.body.querySelector('.mui-table-view');
-			var cells = document.body.querySelectorAll('.mui-table-view-cell');
-			for (var i = cells.length, len = i + 3; i < len; i++) {
-				var li = document.createElement('li');
-				li.className = 'mui-table-view-cell';
-				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
-				table.appendChild(li);
-			}
-		}, 1500);
-	}
-</script>
-
-<div class="mui-content">
-		<ul class="mui-table-view mui-table-view-chevron">
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 6
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 5
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 4
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 3
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 2
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 1
-				</a>
-			</li>
-		</ul>
-</div>
-
-</body>
-</html>
\ No newline at end of file

examples/hello-mui/examples/pulldown-with-plus-main-custom.html

-<!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">
-		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-		</style>
-		<script>
-			mui.init();
-		</script>
-	</head>
-
-	<body>
-
-<script type="text/javascript" charset="utf-8">
-	var list;
-	// 扩展API加载完毕，现在可以正常调用扩展API
-	function init() {
-		list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", {
-			top: "48px",
-			bottom: "0px",
-			bounce: "vertical"
-		});
-		plus.webview.currentWebview().append(list);
-		// 实现列表可下拉刷新
-		list.addEventListener("dragBounce", onPullStateChange, false);
-		list.setBounce({
-			position: {
-				top: "100px"
-			},
-			changeoffset: {
-				top: "50px"
-			}
-		});
-	}
-	mui.plusReady(init);
-
-	// DOMContentLoaded事件处理
-	var etext = null,eicon = null;
-	document.addEventListener("DOMContentLoaded", function() {
-		etext = document.getElementById("text");
-		eicon = document.getElementById("icon");
-	}, false);
-
-	// 下拉状态改变
-	function onPullStateChange(e) {
-		switch (e.status) {
-			case "beforeChangeOffset": //下拉可刷新状态
-				pull1();
-				break;
-			case "afterChangeOffset": //松开可刷新状态
-				pull2();
-				break;
-			case "dragEndAfterChangeOffset": //正在刷新状态
-				list.evalJS("onRefresh();");
-				pull3();
-				break;
-			default:
-				break;
-		}
-	}
-
-	function pull1() {
-		etext.textContent = "下拉可刷新";
-		eicon.style.webkitTransition = "all 0.3s ease-in";
-		eicon.style.webkitTransform = "rotate(0deg)";
-	}
-
-	function pull2() {
-		etext.textContent = "释放立即刷新";
-		eicon.style.webkitTransition = "all 0.3s ease-in";
-		eicon.style.webkitTransform = "rotate(180deg)";
-	}
-
-	function pull3() {
-		etext.textContent = "正在刷新...";
-		eicon.src = "../images/pull_fresh.png";
-		eicon.style.webkitAnimation = "spin 1s infinite linear";
-	}
-
-	function pullReset() {
-		etext.textContent = "下拉可刷新";
-		eicon.src = "../images/pull_arrow.png";
-		eicon.style.webkitTransition = "";
-		eicon.style.webkitTransform = "";
-		eicon.style.webkitAnimation = "";
-	}
-</script>
-<style type="text/css">
-	#pull {
-		width: 24px;
-		height: 100%;
-		display: inline-block;
-		margin: 0 1em;
-	}
-	#icon {
-		height: 24px;
-		vertical-align: middle;
-	}
-	@-webkit-keyframes spin {
-		0% {
-			-webkit-transform: rotate(0deg);
-		}
-		100% {
-			-webkit-transform: rotate(360deg);
-		}
-	}
-</style>
-<header class="mui-bar mui-bar-nav">
-	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-	<h1 class="mui-title">自定义下拉刷新</h1>
-</header>
-<div class="mui-content">
-	<div style="text-align:center;height:44px;line-height:44px;">
-		<div id="pull">
-			<img id="icon" src="../images/pull_arrow.png" />
-		</div><font id="text">下拉可刷新</font>
-	</div>
-</div>
-
-
-</body>
-</html>
\ No newline at end of file

examples/hello-mui/examples/pulldown.html

-<!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">
-		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-		</style>
-		<script>
-			mui.init();
-		</script>
-	</head>
-
-	<body>
-
-<header class="mui-bar mui-bar-nav">
-	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-	<h1 class="mui-title">下拉刷新</h1>
-</header>
-<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
-	<div class="mui-scroll">
-		<ul class="mui-table-view mui-table-view-chevron">
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 1
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 2
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 3
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 4
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 5
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 6
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 7
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 8
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 9
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-                    Item 10
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-
-                    Item 11
-
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-
-                    Item 12
-
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-
-                    Item 13
-
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-
-                    Item 14
-
-                </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-
-                    Item 15
-
-                </a>
-			</li>
-		</ul>
-	</div>
-</div>
-<script>
-	mui.init({
-		swipeBack: false,
-		pullRefresh: {
-			container: '#pullrefresh',
-			down: {
-				callback: pulldownRefresh
-			}
-		}
-	});
-
-	/**
-	 * 下拉刷新具体业务实现
-	 */
-	function pulldownRefresh() {
-		var self = this;
-		setTimeout(function() {
-			self.endPulldownToRefresh(); //refresh completed
-			var table = document.body.querySelector('.mui-table-view');
-			var cells = document.body.querySelectorAll('.mui-table-view-cell');
-			for (var i = cells.length, len = i + 3; i < len; i++) {
-				var li = document.createElement('li');
-				li.className = 'mui-table-view-cell';
-				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
-				table.insertBefore(li, table.firstElementChild);
-			}
-		}, 2000);
-	}
-</script>
-</body>
-</html>
\ No newline at end of file

examples/hello-mui/examples/pullrefresh-content.html

@@ -12,148 +12,157 @@
 		<script src="../js/mui.min.js"></script>
 		<script src="../js/app.js"></script>
 		<style>
-			html,body {
+			html,
+			body {
 				background-color: #efeff4;
 			}
 		</style>
 		<script>
-			mui.init();
+			var ws = null,wo = null;
+			mui.plusReady(function() {
+				// 获取自身窗口
+				ws = plus.webview.currentWebview();
+				wo = ws.opener();
+			});
+			mui.init({
+				swipeBack: false,
+				pullRefresh: {
+					container: '#pullrefresh',
+					down: {
+						callback: pulldownRefresh
+					},
+					up: {
+						contentrefresh: '正在加载...',
+						callback: pullupRefresh
+					}
+				}
+			});
+
+			 // 刷新页面
+			function pulldownRefresh() {
+				var self = this;
+				setTimeout(function() {
+					var table = document.body.querySelector('.mui-table-view');
+					var cells = document.body.querySelectorAll('.mui-table-view-cell');
+					for (var i = cells.length, len = i + 3; i < len; i++) {
+						var li = document.createElement('li');
+						li.className = 'mui-table-view-cell';
+						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
+						table.insertBefore(li, table.firstChild);
+					}
+					if (mui.os.plus && mui.os.android) {
+						ws.endPullToRefresh();
+						wo.evalJS("pullReset()");
+					} else {
+						self.endPulldownToRefresh(); //refresh completed
+					}
+
+				}, 1000);
+			}
+			var count = 0;
+			/**
+			 * 上拉加载具体业务实现
+			 */
+			function pullupRefresh() {
+				var self = this;
+				setTimeout(function() {
+					self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
+					var table = document.body.querySelector('.mui-table-view');
+					var cells = document.body.querySelectorAll('.mui-table-view-cell');
+					for (var i = cells.length, len = i + 3; i < len; i++) {
+						var li = document.createElement('li');
+						li.className = 'mui-table-view-cell';
+						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
+						table.appendChild(li);
+					}
+				}, 1000);
+			}
 		</script>
 	</head>
 
 	<body>
-
-<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
-	<div class="mui-scroll">
-		<ul class="mui-table-view mui-table-view-chevron">
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
+			<div class="mui-scroll">
+				<ul class="mui-table-view mui-table-view-chevron">
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 15
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 14
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 13
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 12
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 11
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 10
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 9
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 8
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 7
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 6
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 5
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 4
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 3
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 2
                 </a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">
                     Item 1
                 </a>
-			</li>
-		</ul>
-	</div>
-</div>
-<script>
-	mui.init({
-		swipeBack: false,
-		pullRefresh: {
-			container: '#pullrefresh',
-			down: {
-				callback: pulldownRefresh
-			},
-			up: {
-				contentrefresh: '正在加载...',
-				callback: pullupRefresh
-			}
-		}
-	});
-	/**
-	 * 下拉刷新具体业务实现
-	 */
-	function pulldownRefresh() {
-		var self = this;
-		setTimeout(function() {
-			var table = document.body.querySelector('.mui-table-view');
-			var cells = document.body.querySelectorAll('.mui-table-view-cell');
-			for (var i = cells.length, len = i + 3; i < len; i++) {
-				var li = document.createElement('li');
-				li.className = 'mui-table-view-cell';
-				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
-				//下拉刷新，新纪录插到最前面；
-				table.insertBefore(li, table.firstChild);
-			}
-			self.endPulldownToRefresh(); //refresh completed
-		}, 1500);
-	}
-	var count = 0;
-	/**
-	 * 上拉加载具体业务实现
-	 */
-	function pullupRefresh() {
-		var self = this;
-		setTimeout(function() {
-			self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
-			var table = document.body.querySelector('.mui-table-view');
-			var cells = document.body.querySelectorAll('.mui-table-view-cell');
-			for (var i = cells.length, len = i + 3; i < len; i++) {
-				var li = document.createElement('li');
-				li.className = 'mui-table-view-cell';
-				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
-				table.appendChild(li);
-			}
-		}, 1500);
-	}
-</script>
-</body>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+	</body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/pullrefresh-down-content.html

-<!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">
-		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-		</style>
-		<script>
-			mui.init();
-		</script>
-	</head>
-
-	<body>
-
-<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
-	<div class="mui-scroll">
-		<ul id='list' class="mui-table-view mui-table-view-chevron">
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 6
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 5
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 4
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 3
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 2
-				</a>
-			</li>
-			<li class="mui-table-view-cell">
-				<a class="mui-navigate-right">
-					Item 1
-				</a>
-			</li>
-		</ul>
-	</div>
-</div>
-<script>
-	mui.init({
-		pullRefresh: {
-			container: '#pullrefresh',
-			down: {
-				callback: pulldownRefresh
-			}
-		}
-	});
-
-	function pulldownRefresh() {
-		var self = this;
-		setTimeout(function() {
-			var table = document.body.querySelector('.mui-table-view');
-			var cells = document.body.querySelectorAll('.mui-table-view-cell');
-			for (var i = cells.length, len = i + 3; i < len; i++) {
-				var li = document.createElement('li');
-				li.className = 'mui-table-view-cell';
-				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
-				table.insertBefore(li, table.firstChild);
-			}
-			//refresh completed 这行代码必须调用
-			self.endPulldownToRefresh();
-		}, 1000);
-	}
-</script>
-</body>
-</html>
\ No newline at end of file

examples/hello-mui/examples/pullrefresh-down-main.html

-<!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">
-		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-		</style>
-		<script>
-			mui.init();
-		</script>
-	</head>
-
-	<body>
-
-<header class="mui-bar mui-bar-nav">
-	<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
-	<h1 class="mui-title">下拉刷新</h1>
-</header>
-
-<script>
-	mui.init({
-		subpages : [{
-			id : 'pullrefresh-down-content',
-			url : 'pullrefresh-down-content.html',
-			styles : {
-				top : '48px',
-				bottom: "0px"
-			}
-		}]
-	}); 
-</script>
-</body>
-</html>
\ No newline at end of file

examples/hello-mui/examples/pullrefresh-main.html

@@ -12,9 +12,31 @@
 		<script src="../js/mui.min.js"></script>
 		<script src="../js/app.js"></script>
 		<style>
-			html,body {
+			html,
+			body {
 				background-color: #efeff4;
 			}
+			#pull{
+				text-align: left;
+			}
+			/*#pull {
+				width: 24px;
+				height: 100%;
+				display: inline-block;
+				margin: 0 1em;
+			}
+			#icon {
+				height: 24px;
+				vertical-align: middle;
+			}*/
+			@-webkit-keyframes spin {
+				0% {
+					-webkit-transform: rotate(0deg);
+				}
+				100% {
+					-webkit-transform: rotate(360deg);
+				}
+			}
 		</style>
 		<script>
 			mui.init();
@@ -22,23 +44,98 @@
 	</head>
 
 	<body>
+		<script type="text/javascript" charset="utf-8">
+			var list;
+			 // 扩展API加载完毕，现在可以正常调用扩展API
+			function init() {
+				list = plus.webview.create("pullrefresh-content.html", "pullrefresh-content.html", {
+					top: "48px",
+					bottom: "0px",
+					bounce: "vertical"
+				});
+				plus.webview.currentWebview().append(list);
+				if (mui.os.plus && mui.os.android) {
+					// 实现列表可下拉刷新
+					list.addEventListener("dragBounce", onPullStateChange, false);
+					list.setBounce({
+						position: {
+							top: "100px"
+						},
+						changeoffset: {
+							top: "50px"
+						}
+					});
+				}
+
+			}
+			mui.plusReady(init);
+
+			 // DOMContentLoaded事件处理
+			var etext = null,
+				eicon = null;
+			document.addEventListener("DOMContentLoaded", function() {
+				etext = document.getElementById("text");
+				eicon = document.getElementById("icon");
+			}, false);
+
+			 // 下拉状态改变
+			function onPullStateChange(e) {
+				switch (e.status) {
+					case "beforeChangeOffset": //下拉可刷新状态
+						pull1();
+						break;
+					case "afterChangeOffset": //松开可刷新状态
+						pull2();
+						break;
+					case "dragEndAfterChangeOffset": //正在刷新状态
+						list.evalJS("pulldownRefresh();");
+						pull3();
+						break;
+					default:
+						break;
+				}
+			}
+
+			function pull1() {
+				etext.innerText = "下拉可以刷新";
+				eicon.className = 'mui-pull-loading mui-icon mui-icon-pulldown';
+				eicon.style.webkitTransition = "all 0.3s ease-in";
+				eicon.style.webkitTransform = "rotate(0deg)";
+			}
+
+			function pull2() {
+				etext.innerText = "释放立即刷新";
+				eicon.className = 'mui-pull-loading mui-icon mui-icon-pulldown';
+				eicon.style.webkitTransition = "all 0.3s ease-in";
+				eicon.style.webkitTransform = "rotate(180deg)";
+			}
+
+			function pull3() {
+				etext.innerText = "正在刷新...";
+				eicon.className = 'mui-pull-loading mui-icon mui-icon-spinner-cycle';
+				eicon.style.webkitAnimation = "spin 1s infinite linear";
+			}
+
+			function pullReset() {
+				etext.innerText = "下拉可刷新";
+				eicon.style.webkitTransition = "";
+				eicon.style.webkitTransform = "";
+				eicon.style.webkitAnimation = "";
+			}
+		</script>
+
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 class="mui-title">下拉刷新&上拉加载</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-pull-top-pocket">
+				<div class="mui-pull">
+					<div id="icon" class="mui-pull-loading mui-icon mui-icon-pulldown"></div>
+					<div id="text" class="mui-pull-caption">下拉可以刷新</div>
+				</div>
+			</div>
+		</div>
+	</body>
 
-<header class="mui-bar mui-bar-nav">
-	<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
-	<h1 class="mui-title">下拉刷新、上拉加载</h1>
-</header>
-
-<script>
-	mui.init({
-		subpages : [{
-			id : 'pullrefresh-content',
-			url : 'pullrefresh-content.html',
-			styles : {
-				top : '48px',
-				bottom: "0px"
-			}
-		}]
-	}); 
-</script>
-</body>
 </html>
\ No newline at end of file

examples/hello-mui/examples/pullup.html

-<!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">
-		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-		</style>
-		<script>
-			mui.init();
-		</script>
-	</head>
-
-	<body>
-
-<header class="mui-bar mui-bar-nav">
-	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-	<h1 class="mui-title">上拉加载</h1>
-</header>
-<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
-	<div class="mui-scroll">
-		<ul class="mui-table-view mui-table-view-chevron">
-
-		</ul>
-	</div>
-</div>
-<script>
-	mui.init({
-		swipeBack: false,
-		pullRefresh: {
-			container: '#pullrefresh',
-			up: {
-				contentdown: '上拉显示更多',
-				contentrefresh: '正在加载...',
-				callback: pullupRefresh
-			}
-		}
-	});
-	var count = 0;
-	/**
-	 * 上拉加载具体业务实现
-	 */
-	function pullupRefresh() {
-			var self = this;
-			setTimeout(function() {
-				self.endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
-				var table = document.body.querySelector('.mui-table-view');
-				var cells = document.body.querySelectorAll('.mui-table-view-cell');
-				for (var i = cells.length, len = i + 15; i < len; i++) {
-					var li = document.createElement('li');
-					li.className = 'mui-table-view-cell';
-					li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
-					table.appendChild(li);
-				}
-			}, 600);
-		}
-		//页面初始化时，自动执行一次上拉加载
-		(function($) {
-			if ($.os.plus && $.os.android) {
-				$.ready(function() {
-					$.plusReady(function() {
-						$('#pullrefresh').pullRefresh().pullupLoading();
-					});
-				})
-
-			} else {
-				$.ready(function() {
-					$('#pullrefresh').pullRefresh().pullupLoading();
-				});
-			}
-		})(mui);
-</script>
-</body>
-</html>
\ No newline at end of file

examples/hello-mui/examples/radio.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -57,5 +63,7 @@
 	</div>
 
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/range.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -98,5 +104,7 @@
 
 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/scroll-native.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -250,6 +256,6 @@
 	</ul>
 </div>
 
-
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/scroll.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -75,4 +81,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/slider-default.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -98,6 +104,6 @@
 	});
 </script>
 
-
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/slider-table-default.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -64,4 +70,5 @@
 </style>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/slider-table-pagination.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -81,4 +87,5 @@
 </script>
 
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/slider-with-title.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -22,82 +28,82 @@
 	</head>
 
 	<body>
-
-<header class="mui-bar mui-bar-nav">
-	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-	<h1 class="mui-title">图片轮播</h1>
-</header>
-<div class="mui-content">
-	<ul class="mui-table-view mui-table-view-chevron">
-		<li id="switch" class="mui-table-view-cell">
-			定时轮播
-			<div class="mui-switch">
-				<div class="mui-switch-handle"></div>
-			</div>
-		</li>
-	</ul>
-	<div id="slider" class="mui-slider">
-		<div class="mui-slider-group mui-slider-loop">
-			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
-			<div class="mui-slider-item mui-slider-item-duplicate">
-				<a href="#">
-					<img src="../images/yuantiao.jpg">
-					<p class="mui-slider-title">静静看这世界</p>
-				</a>
-			</div>
-			<div class="mui-slider-item">
-				<a href="#">
-					<img src="../images/shuijiao.jpg">
-					<p class="mui-slider-title">幸福就是可以一起睡觉</p>
-				</a>
-			</div>
-			<div class="mui-slider-item">
-				<a href="#">
-					<img src="../images/muwu.jpg">
-					<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
-				</a>
-			</div>
-			<div class="mui-slider-item">
-				<a href="#">
-					<img src="../images/cbd.jpg">
-					<p class="mui-slider-title">Color of SIP CBD</p>
-				</a>
-			</div>
-			<div class="mui-slider-item">
-				<a href="#">
-					<img src="../images/yuantiao.jpg">
-					<p class="mui-slider-title">静静看这世界</p>
-				</a>
-			</div>
-			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
-			<div class="mui-slider-item mui-slider-item-duplicate">
-				<a href="#">
-					<img src="../images/shuijiao.jpg">
-					<p class="mui-slider-title">幸福就是可以一起睡觉</p>
-				</a>
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 class="mui-title">图片轮播</h1>
+		</header>
+		<div class="mui-content">
+			<ul class="mui-table-view mui-table-view-chevron">
+				<li id="switch" class="mui-table-view-cell">
+					定时轮播
+					<div class="mui-switch">
+						<div class="mui-switch-handle"></div>
+					</div>
+				</li>
+			</ul>
+			<div id="slider" class="mui-slider">
+				<div class="mui-slider-group mui-slider-loop">
+					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
+					<div class="mui-slider-item mui-slider-item-duplicate">
+						<a href="#">
+							<img src="../images/yuantiao.jpg">
+							<p class="mui-slider-title">静静看这世界</p>
+						</a>
+					</div>
+					<div class="mui-slider-item">
+						<a href="#">
+							<img src="../images/shuijiao.jpg">
+							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
+						</a>
+					</div>
+					<div class="mui-slider-item">
+						<a href="#">
+							<img src="../images/muwu.jpg">
+							<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
+						</a>
+					</div>
+					<div class="mui-slider-item">
+						<a href="#">
+							<img src="../images/cbd.jpg">
+							<p class="mui-slider-title">Color of SIP CBD</p>
+						</a>
+					</div>
+					<div class="mui-slider-item">
+						<a href="#">
+							<img src="../images/yuantiao.jpg">
+							<p class="mui-slider-title">静静看这世界</p>
+						</a>
+					</div>
+					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
+					<div class="mui-slider-item mui-slider-item-duplicate">
+						<a href="#">
+							<img src="../images/shuijiao.jpg">
+							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
+						</a>
+					</div>
+				</div>
+				<div class="mui-slider-indicator mui-text-right">
+					<div class="mui-indicator mui-active"></div>
+					<div class="mui-indicator"></div>
+					<div class="mui-indicator"></div>
+					<div class="mui-indicator"></div>
+				</div>
 			</div>
 		</div>
-		<div class="mui-slider-indicator mui-text-right">
-			<div class="mui-indicator mui-active"></div>
-			<div class="mui-indicator"></div>
-			<div class="mui-indicator"></div>
-			<div class="mui-indicator"></div>
-		</div>
-	</div>
-</div>
-<script>
-	var slider = mui("#slider");
-	document.getElementById("switch").addEventListener('toggle', function(e) {
-		if (e.detail.isActive) {
-			slider.slider({
-				interval: 5000
-			});
-		} else {
-			slider.slider({
-				interval: 0
+		<script>
+			var slider = mui("#slider");
+			document.getElementById("switch").addEventListener('toggle', function(e) {
+				if (e.detail.isActive) {
+					slider.slider({
+						interval: 5000
+					});
+				} else {
+					slider.slider({
+						interval: 0
+					});
+				}
 			});
-		}
-	});
-</script>
-</body>
+		</script>
+	</body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/speech.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -71,4 +77,5 @@
 	})(mui); 
 </script>
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/switches.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -25,7 +31,7 @@
 
 <header class="mui-bar mui-bar-nav">
 	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-	<h1 class="mui-title">开关（Toggles）</h1>
+	<h1 class="mui-title">开关（switch）</h1>
 </header>
 <div class="mui-content">
 	<div class="mui-content-padded">
@@ -97,5 +103,7 @@
 		});
 	}); 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tab-webview-main.html

@@ -88,5 +88,7 @@
 		activeTab = targetTab;
 	});
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tab-webview-subpage-chat.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -36,5 +42,7 @@
 		mui.currentWebview.opener().evalJS("mui.back()");
 	}
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tab-webview-subpage-contact.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -36,5 +42,7 @@
 		mui.currentWebview.opener().evalJS("mui.back()");
 	}
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tab-webview-subpage-map.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -36,5 +42,7 @@
 		mui.currentWebview.opener().evalJS("mui.back()");
 	}
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tab-webview-subpage-phone.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -30,5 +36,7 @@
   	margin: 50% auto;
   }
 </style>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tab-with-segmented-control.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -139,5 +145,7 @@
 		});
 	})(mui); 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tab-with-viewpagerindicator.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -162,5 +168,7 @@
 		});
 	})(mui); 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tabbar-labels-only.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -41,5 +47,7 @@
         查看地图
     </a>
 </nav>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tabbar-with-submenus.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -52,5 +58,7 @@
         <li class="mui-table-view-cell"><a href="#">行业新闻</a></li>
     </ul>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tabbar.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -65,5 +71,7 @@
 		<h3>查看地图</h3>
 	</div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableview-image-left.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -75,5 +81,7 @@
         </ul>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableview-image-right.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -75,5 +81,7 @@
         </ul>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableview-with-images-and-chevrons.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -74,5 +80,7 @@
         </ul>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableviews-with-badges-and-chevrons.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -57,5 +63,7 @@
     </div>
 
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableviews-with-badges.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -41,5 +47,7 @@
         </ul>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableviews-with-chevrons.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -53,5 +59,7 @@
         </ul>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableviews-with-collapses.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -67,5 +73,7 @@
 		</ul>
 	</div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableviews-with-switches.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -57,5 +63,7 @@
 
     </ul>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/tableviews.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -47,5 +53,7 @@
         </ul>
     </div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/template.html

@@ -10,18 +10,59 @@
 
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<script src="../js/mui.min.js"></script>
+		<script src="../js/app.js"></script>
 		<style>
 			html,
 			body {
 				background-color: #efeff4;
 			}
+			.mui-fadein {
+				/*-webkit-animation: fadein 0.1s;
+				animation: fadein 0.1s;*/
+				opacity: 1;
+			}
+			.mui-fadeout {
+				opacity: 0;
+			}
+			@keyframes fadein {
+				from {
+					opacity: 0;
+				}
+				to {
+					opacity: 1;
+				}
+			}
+			@-webkit-keyframes fadein {
+				from {
+					opacity: 0;
+				}
+				to {
+					opacity: 1;
+				}
+			}
+			@keyframes fadeout {
+				from {
+					opacity: 1;
+				}
+				to {
+					opacity: 0;
+				}
+			}
+			@-webkit-keyframes fadeout {
+				from {
+					opacity: 1;
+				}
+				to {
+					opacity: 0;
+				}
+			}
 		</style>
 	</head>
 
 	<body>
 		<header class="mui-bar mui-bar-nav">
-			<a id="back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
-			<h1 class="mui-title"></h1>
+			<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 id="title" class="mui-title"></h1>
 		</header>
 		<div class="mui-content mui-scroll-wrapper">
 			<div class="mui-scroll">
@@ -30,12 +71,19 @@
 		</div>
 	</body>
 	<script>
-		mui.init({
-			swipeBack: false
-		});
-		document.getElementById("back").addEventListener('tap', function() {
-			plus.webview.currentWebview().hide('auto');
-		});
+//		var title = document.getElementById("title");
+//		var subWebview = null;
+//		document.getElementById("back").addEventListener('touchend', function() {
+//			plus.webview.currentWebview().hide('auto');
+//			setTimeout(function () {
+//				title.className = 'mui-title mui-fadeout';
+//				if(subWebview==null){
+//					subWebview = plus.webview.getWebviewById("template_sub");
+//				}
+//				subWebview.hide("none");
+//			},200);
+//			
+//		});
 	</script>
 
 </html>
\ No newline at end of file

examples/hello-mui/examples/titlebar-with-buttons.html

@@ -15,6 +15,9 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -40,5 +43,7 @@
 		mui.alert('你刚点了按钮');
 	}); 
 </script>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/titlebar-with-icons.html

@@ -15,6 +15,9 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -28,5 +31,7 @@
     <a class="mui-icon mui-icon-bars mui-pull-right"></a>
     <h1 class="mui-title">导航条包含图标</h1>
 </header>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/titlebar-with-search.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -28,5 +34,7 @@
     <input type="search" class="mui-pull-right" placeholder="search">
     <h1 class="mui-title">带搜索框的导航栏</h1>
 </header>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/titlebar-with-text-and-icons.html

@@ -15,6 +15,9 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -40,5 +43,7 @@
     </button>
     <h1 class="mui-title">导航条同时包含文字和图标</h1>
 </header>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/titlebar.html

@@ -15,6 +15,9 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -27,5 +30,7 @@
     <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
     <h1 class="mui-title">导航栏</h1>
 </header>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/typography.html

@@ -15,6 +15,12 @@
 			html,body {
 				background-color: #efeff4;
 			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
 		</style>
 		<script>
 			mui.init();
@@ -45,5 +51,7 @@
 		</p>
 	</div>
 </div>
+
 </body>
+
 </html>
\ No newline at end of file

examples/hello-mui/index.html

@@ -31,8 +31,20 @@
 					}
 				}]
 			});
+			var subWebview=null,template=null;
 			document.getElementById('info').addEventListener('tap', function() {
-				mui.openWindow({url:'examples/info.html', id:'info'});
+				if(subWebview==null){
+					subWebview = plus.webview.getWebviewById("template_sub");
+					template = plus.webview.getWebviewById("demoTemplate");
+				}
+
+//				subWebview.hide();
+				subWebview.loadURL('examples/info.html');
+				var title = "关于";
+				template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
+				template.show('slide-in-right', 150);
+				
+				
 			});
 			
 			mui.plusReady(function() {

examples/hello-mui/js/app.js

@@ -4,6 +4,35 @@
 		optimize: true,
 		swipeBack: true
 	});
+	var back = $.back;
+	var templateWebview = null;
+	var subWebview = null;
+	var getTemplateWebview = function() {
+		if (templateWebview == null) {
+			templateWebview = plus.webview.getWebviewById("demoTemplate");
+		}
+		return templateWebview;
+	}
+	var getSubWebview = function() {
+		if (subWebview == null) {
+			subWebview = plus.webview.getWebviewById("template_sub");
+		}
+		return subWebview;
+	}
+	$.back = function() {
+		var current = plus.webview.currentWebview();
+		if (current.id === 'demoTemplate') { //模板主页面
+			getTemplateWebview().hide('auto');
+			setTimeout(function() {
+				document.getElementById("title").className = 'mui-title mui-fadeout';
+				getSubWebview().hide("none");
+			}, 200);
+		} else if (current.id === 'template_sub') {
+			getTemplateWebview().evalJS('mui.back();');
+		} else {
+			back();
+		}
+	}
 })(mui);
 
 /**

examples/hello-mui/js/mui.tpl.js

 /*!
  * =====================================================
- * Mui v0.6.0 (https://github.com/dcloudio/mui)
+ * Mui v0.7.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 /*!