Merge remote-tracking branch 'dcloudio/master'

Gruntfile.js

@@ -62,6 +62,7 @@ module.exports = function(grunt) {
 					'js/mui.gestures.tap.js',
 					'js/mui.gestures.longtap.js',
 					'js/mui.gestures.hold.js',
+					'js/mui.gestures.pinch.js',
 					'js/mui.init.js',
 					'js/mui.init.5+.js',
 					'js/mui.back.js',

examples/hello-mui/css/feedback-page.css

+.feedback body {
+	background-color: #EFEFF4;
+}
+.feedback input,
+.feedback textarea {
+	border: none !important;
+}
+.feedback textarea {
+	height: 100px;
+	margin-bottom: 0 !important;
+	padding-bottom: 0 !important;
+}
+.feedback .row {
+	width: 100%;
+	background-color: #fff;
+}
+.feedback p {
+	padding: 10px 15px 0;
+}
+.feedback button { 
+	width: 90%;
+	height: 46px;
+	left: 50%;
+	-webkit-transform: translate(-50%);
+}
+.feedback .hidden {
+	display: none;
+}
+.feedback .image-list {
+	width: 100%;
+	height: 85px;
+	background-size: cover;
+	padding: 10px 10px;
+	overflow: hidden;
+}
+.feedback .image-item {
+	width: 65px;
+	height: 65px;
+	background-image: url(../images/iconfont-tianjia.png);
+	background-size: 100% 100%;
+	display: inline-block;
+	position: relative;
+	border-radius: 5px;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	border: solid 1px #e8e8e8;
+}
+.feedback .image-item input[type="file"] {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+	z-index: 0;
+}
+.feedback .image-item.space {
+	border: none;
+}
+.feedback .image-item .image-close {
+	position: absolute;
+	display: inline-block;
+	right: -6px;
+	top: -6px;
+	width: 20px;
+	height: 20px;
+	text-align: center;
+	line-height: 20px;
+	border-radius: 12px;
+	background-color: #FF5053;
+	color: #f3f3f3;
+	border: solid 1px #FF5053;
+	font-size: 9px;
+	font-weight: 200;
+	z-index: 1;
+}
+.feedback .image-item.space .image-close {
+	display: none;
+}
\ No newline at end of file

examples/hello-mui/css/mui.dtpicker.css

+.mui-dtpicker {
+	position: fixed;
+	left: 0px;
+	width: 100%;
+	z-index: 999999;
+	background-color: #eee;
+	border-top: solid 1px #ccc;
+	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
+	-webkit-transition: .3s;
+	bottom: 0px;
+	-webkit-transform: translateY(300px);
+}
+.mui-dtpicker.mui-active {
+	-webkit-transform: translateY(0px);
+}
+/*用于将 html body 禁止滚动条*/
+
+.mui-dtpicker-active-for-page {
+	overflow: hidden !important;
+}
+.mui-android-5-1 .mui-dtpicker {
+	bottom: -300px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-android-5-1 .mui-dtpicker.mui-active {
+	bottom: 0px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-dtpicker-header {
+	padding: 6px;
+	font-size: 14px;
+	color: #888;
+}
+.mui-dtpicker-header button {
+	font-size: 12px;
+	padding: 5px 10px;
+}
+.mui-dtpicker-header button:last-child {
+	float: right;
+}
+.mui-dtpicker-body {
+	position: relative;
+	width: 100%;
+	height: 200px;
+	border-top: solid 1px #eee;
+	background-color: #fff;
+}
+.mui-ios .mui-dtpicker-body {
+	-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-dtpicker-title h5 {
+	display: inline-block;
+	width: 20%;
+	margin: 0px;
+	padding: 8px;
+	text-align: center;
+	border-top: solid 1px #ddd;
+	background-color: #fafafa;
+}
+.mui-dtpicker .mui-listpicker {
+	width: 20%;
+	height: 100%;
+	margin: 0px;
+	float: left;
+	border: none;
+}
+/*年月日时分*/
+
+[data-type="datetime"] .mui-listpicker,
+[data-type="time"] .mui-dtpicker-title h5 {
+	width: 20%;
+}
+[data-type="datetime"] [data-id="picker-h"],
+[data-type="datetime"] [data-id="title-h"] {
+	border-left: dotted 1px #ddd;
+}
+/*年月日*/
+
+[data-type="date"] .mui-listpicker,
+[data-type="date"] .mui-dtpicker-title h5 {
+	width: 33.3%;
+}
+[data-type="date"] [data-id="picker-h"],
+[data-type="date"] [data-id="picker-i"],
+[data-type="date"] [data-id="title-h"],
+[data-type="date"] [data-id="title-i"] {
+	display: none;
+}
+/*年月日时*/
+
+[data-type="hour"] .mui-listpicker,
+[data-type="hour"] .mui-dtpicker-title h5 {
+	width: 25%;
+}
+[data-type="hour"] [data-id="picker-i"],
+[data-type="hour"] [data-id="title-i"] {
+	display: none;
+}
+[data-type="hour"] [data-id="picker-h"],
+[data-type="hour"] [data-id="title-h"] {
+	border-left: dotted 1px #ddd;
+}
+/*时分*/
+
+[data-type="time"] .mui-listpicker,
+[data-type="time"] .mui-dtpicker-title h5 {
+	width: 50%;
+}
+[data-type="time"] [data-id="picker-y"],
+[data-type="time"] [data-id="picker-m"],
+[data-type="time"] [data-id="picker-d"],
+[data-type="time"] [data-id="title-y"],
+[data-type="time"] [data-id="title-m"],
+[data-type="time"] [data-id="title-d"] {
+	display: none;
+}
+/*年月*/
+
+[data-type="month"] .mui-listpicker,
+[data-type="month"] .mui-dtpicker-title h5 {
+	width: 50%;
+}
+[data-type="month"] [data-id="picker-d"],
+[data-type="month"] [data-id="picker-h"],
+[data-type="month"] [data-id="picker-i"],
+[data-type="month"] [data-id="title-d"],
+[data-type="month"] [data-id="title-h"],
+[data-type="month"] [data-id="title-i"] {
+	display: none;
+}
\ No newline at end of file

examples/hello-mui/css/mui.imageviewer.css

+.mui-imageviewer {
+	position: absolute;
+	position: fixed;
+	background-color: rgba(0, 0, 0, 0.9);
+	width: 100%;
+	height: 100%;
+	z-index: 99;
+	left: 0px;
+	top: 0px;
+	display: none;
+	opacity: 0;
+	-webkit-transition: all 0.6s ease-in-out;
+	transition: all 0.6s ease-in-out;
+	-webkit-transform-style: preserve-3d;
+	-webkit-backface-visibility: hidden;
+	overflow: hidden;
+	margin: 0px;
+	padding: 0px;
+	box-sizing: border-box;
+}
+.mui-imageviewer-mask {
+	position: absolute;
+	z-index: 11;
+	width: 100%;
+	height: 100%;
+	left: 0px;
+	top: 0px;
+	display: none;
+}
+.mui-imageviewer .mui-imageviewer-header {
+	position: absolute;
+	height: 45px;
+	width: 100%;
+	left: 0px;
+	top: 0px;
+	z-index: 10;
+	background-color: rgba(0, 0, 0, 0.5);
+	margin: 0px;
+	padding: 0px;
+	box-sizing: border-box;
+}
+.mui-imageviewer .mui-imageviewer-state {
+	display: block;
+	width: 100%;
+	height: 100%;
+	line-height: 100%;
+	color: #eee;
+	text-align: center;
+	font-size: 16px;
+	padding: 15px;
+}
+.mui-imageviewer .mui-imageviewer-header .mui-imageviewer-close {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	font-size: 32px;
+	color: #aaa;
+}
+.mui-imageviewer .mui-imageviewer-header .mui-imageviewer-close:active {
+	color: #FF5053;
+}
+.mui-imageviewer .mui-imageviewer-item {
+	width: 100%;
+	height: 100%;
+	left: 0px;
+	top: 0px;
+	position: absolute;
+	z-index: 0;
+	margin: 0px;
+	padding: 0px;
+	box-sizing: border-box;
+	-webkit-transition: -webkit-transform 500ms ease-in-out;
+	transition: transform 500ms ease-in-out;
+	display: table;
+	overflow: hidden;
+}
+.mui-imageviewer .mui-imageviewer-item-center {
+	-webkit-transform: translateX(0);
+	transform: translateX(0);
+}
+.mui-imageviewer .mui-imageviewer-item-left {
+	-webkit-transform: translateX(-100%);
+	transform: translateX(-100%);
+}
+.mui-imageviewer .mui-imageviewer-item-right {
+	-webkit-transform: translateX(100%);
+	transform: translateX(100%);
+}
+.mui-imageviewer .mui-imageviewer-item span {
+	display: table-cell;
+	text-align: center;
+	vertical-align: middle;
+	line-height: 100%;
+	font-size: 100%;
+	margin: 0px;
+	padding: 0px;
+	box-sizing: border-box;
+	overflow: auto;
+}
+.mui-imageviewer .mui-imageviewer-item img {
+	backface-visibility: hidden;
+	transform-origin: 50% 50% 0px;
+	max-width: 100%;
+}
+.mui-imageviewer-left,
+.mui-imageviewer-right {
+	position: absolute;
+	z-index: 2;
+	color: #aaa;
+	top: 50%;
+	margin-top: -18px;
+	font-size: 36px;
+}
+.mui-imageviewer-left {
+	left: 5px;
+}
+.mui-imageviewer-right {
+	right: 5px;
+}
+.mui-imageviewer-left:active,
+.mui-imageviewer-right:active {
+	color: #fff;
+}
\ No newline at end of file

examples/hello-mui/css/mui.indexedlist.css

+.mui-indexed-list {
+	position: relative;
+	border-top: solid 1px #e3e3e3;
+	border-bottom: solid 1px #e3e3e3;
+	overflow: hidden;
+	background-color: #fafafa;
+	height: 300px;
+	cursor: default;
+}
+.mui-indexed-list-inner {
+	margin: 0px;
+	padding: 0px;
+	overflow-y: auto;
+	border: none;
+}
+.mui-indexed-list-inner::-webkit-scrollbar {
+	width: 0px;
+	height: 0px;
+	visibility: hidden;
+}
+.mui-indexed-list-empty-alert,
+.mui-indexed-list-inner.empty ul {
+	display: none;
+}
+.mui-indexed-list-inner.empty .mui-indexed-list-empty-alert {
+	display: block;
+}
+.mui-indexed-list-empty-alert {
+	padding: 30px 15px;
+	text-align: center;
+	color: #ccc;
+	padding-right: 45px;
+}
+.mui-ios .mui-indexed-list-inner {
+	width: calc(100% + 10px);
+}
+.mui-indexed-list-group,
+.mui-indexed-list-item {
+	padding-right: 45px;
+}
+.mui-ios .mui-indexed-list-group,
+.mui-ios .mui-indexed-list-item,
+.mui-ios .mui-indexed-list-empty-alert {
+	padding-right: 55px;
+}
+.mui-indexed-list-group {
+	background-color: #f7f7f7;
+}
+.mui-indexed-list-group {
+	padding-top: 3px;
+	padding-bottom: 3px;
+}
+.mui-indexed-list-search {
+	border-bottom: solid 1px #e3e3e3;
+	z-index: 15;
+}
+.mui-indexed-list-search.mui-search:before {
+	margin-top: -10px;
+}
+.mui-indexed-list-search input {
+	border-radius: 0px;
+	margin: 0px;
+	background-color: #fafafa;
+}
+.mui-indexed-list-bar {
+	width: 23px;
+	background-color: lightgrey;
+	position: absolute;
+	height: 100%;
+	z-index: 10;
+	right: 0px;
+	-webkit-transition: .2s;
+}
+.mui-indexed-list-bar a {
+	display: block;
+	text-align: center;
+	font-size: 11px;
+	padding: 0px;
+	margin: 0px;
+	line-height: 15px;
+	color: #aaa;
+}
+.mui-indexed-list-bar.active {
+	background-color: rgb(200,200,200);
+}
+.mui-indexed-list-bar.active a {
+	color: #333;
+}
+.mui-indexed-list-bar.active a.active {
+	color: #007aff;
+}
+.mui-indexed-list-alert {
+	position: absolute;
+	z-index: 20;
+	background-color: rgba(0, 0, 0, 0.5);
+	width: 80px;
+	height: 80px;
+	left: 50%;
+	top: 50%;
+	margin-left: -40px;
+	margin-top: -40px;
+	border-radius: 40px;
+	text-align: center;
+	line-height: 80px;
+	font-size: 35px;
+	color: #fff;
+	display: none;
+	-webkit-transition: .2s;
+}
+.mui-indexed-list-alert.active {
+	display: block;
+}
\ No newline at end of file

examples/hello-mui/css/mui.listpicker.css

@@ -10,7 +10,7 @@
 	border: solid 1px #ccc;
 	padding: 0px;
 	margin: 3px;
-	height: 200px;
+	height: 185px;
 	background-color: #fff;
 	overflow: hidden;
 	border-radius: 3px;
@@ -18,18 +18,22 @@
 .mui-listpicker .mui-listpicker-inner {
 	width: 100%;
 	height: 100%;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
 	position: absolute;
 	left: 0px;
 	top: 0px;
 	z-index: 1;
 	border-radius: 3px;
+	-webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+	-webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
 }
-.mui-listpicker .mui-listpicker-inner-ios {
+.mui-ios .mui-listpicker .mui-listpicker-inner {
 	width: calc(100% + 8px);
 	padding-right: 8px;
 }
+.mui-android .mui-listpicker .mui-listpicker-inner {
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
 .mui-listpicker .mui-listpicker-inner::-webkit-scrollbar {
 	width: 0px;
 	height: 0px;
@@ -42,10 +46,31 @@
 	position: relative;
 }
 .mui-listpicker ul li {
+	box-sizing: border-box;
 	position: relative;
-	padding: 8px;
+	height: 36px;
+	line-height: 36px;
 	text-align: center;
 	color: #555;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mui-listpicker.three-dimensional {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-listpicker.three-dimensional .mui-listpicker-inner {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-listpicker.three-dimensional ul {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-listpicker.three-dimensional ul li {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
 }
 .mui-listpicker ul li:last-child {
 	border-bottom: none;
@@ -65,6 +90,6 @@
 	top: 50%;
 	z-index: 0;
 }
-.mui-listpicker .mui-listpicker-highlight {
+.mui-listpicker .mui-listpicker-item-selected {
 	color: green;
 }
\ No newline at end of file

examples/hello-mui/css/mui.poppicker.css

+.mui-poppicker {
+	position: fixed;
+	left: 0px;
+	width: 100%;
+	z-index: 999;
+	background-color: #eee;
+	border-top: solid 1px #ccc;
+	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
+	-webkit-transition: .3s;
+	bottom: 0px;
+	-webkit-transform: translateY(300px);
+}
+.mui-poppicker.mui-active {
+	-webkit-transform: translateY(0px);
+}
+/*用于将 html body 禁止滚动条*/
+
+.mui-poppicker-active-for-page {
+	overflow: hidden !important;
+}
+.mui-android-5-1 .mui-poppicker {
+	bottom: -300px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-android-5-1 .mui-poppicker.mui-active {
+	bottom: 0px;
+	-webkit-transition-property: bottom;
+	-webkit-transform: none;
+}
+.mui-poppicker-header {
+	padding: 6px;
+	font-size: 14px;
+	color: #888;
+}
+.mui-poppicker-header .mui-btn {
+	font-size: 12px;
+	padding: 5px 10px;
+}
+.mui-poppicker-btn-cancel {
+	float: left;
+}
+.mui-poppicker-btn-ok {
+	float: right;
+}
+.mui-poppicker-clear {
+	clear: both;
+	height: 0px;
+	line-height: 0px;
+	font-size: 0px;
+	overflow: hidden;
+}
+.mui-poppicker-body {
+	position: relative;
+	width: 100%;
+	height: 200px;
+	border-top: solid 1px #ddd;
+}
+.mui-ios .mui-poppicker-body {
+	-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-poppicker-body .mui-listpicker {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	border: none;
+	float: left;
+}
\ No newline at end of file

examples/hello-mui/examples/ad.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" />
+		<script type="text/javascript" charset="utf-8">
+			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">advertisement（广告模板）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<p>本页为广告模板示例，集成了百度联盟的网站广告，目前支持广告固定在底部显示。</p>
+				
+			</div>
+		</div>
+	</body>
+	<script type="text/javascript">
+		mui.plusReady(function () {
+			if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
+				mui.toast("当前网络不给力，无法加载广告");
+			}else{
+				//屏幕真实宽度
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+				//根据投放广告的比例，计算广告高度
+				var adHeight = parseInt(width)*3/20;
+				//广告投放域名地址
+				var ltu = encodeURIComponent('http://www.dcloud.io/ad/');
+				//投放广告的服务端页面标题
+				var title = encodeURIComponent('DCloud HBuilder-做最好的HTML5开发工具||MUI-最接近原生体验的高性能前端框架');
+				
+				var url = 'http://pos.baidu.com/acom?adn=1&at=97&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=18&ch=0&col=en-US&conOP=0&cpa=1&dai=1&dis=0&ltr=&lunum=6&n=99099160_cpr&pis=10000x10000&ps=0x0&qn=31f2f2a7de233256&rad=&rsi5=4&rss0=&rss1=&rss2=&rss3=&rss4=&rss5=&rss6=&rss7=&scale=20.3&skin=mobile_skin_white_blue&td_id=2206321&tn=template_inlay_all_mobile&tpr=1436841400149&ts=1&xuanting=0&tt=1436841400136.14.87.89&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&wt=1&distp=1001';
+				url += '&conW='+width+'&conH='+adHeight+'&ltu='+ltu;
+				url += '&di=u2206321';//广告id
+				url += '&pcs='+width+'x'+height;
+				url += '&psr='+width+'x'+height;
+				url += '&pss='+width+'x0';
+				url += '&rsi0='+width+'&rsi1='+adHeight;
+				url += '&ti='+title;
+				
+				
+				var adBottom = mui.os.ios?('-'+adHeight+'px'):'0';
+				
+				var ad = plus.webview.create(url,'ad',{height:adHeight+'px',bottom:adBottom});
+				//目前Android平台不支持子webview的setStyle动画，因此分平台处理；
+				if(mui.os.ios){
+					//为了支持iOS平台左侧边缘滑动关闭页面，需要append进去；
+					plus.webview.currentWebview().append(ad);
+					ad.addEventListener('loaded',function () {
+						ad.setStyle({
+							bottom:'0',
+							transition: {
+								duration: 150
+							}
+						});
+					});
+				}else{
+					ad.addEventListener('loaded',function () {
+						ad.show('slide-in-bottom');
+					});
+				}
+				
+				ad.appendJsFile('_www/js/ad.js');
+				
+				//设置主页面的底部留白，否则会被遮住；
+				document.querySelector('.mui-content').style.paddingBottom = adHeight + 'px';
+			}
+			
+			
+			
+		});		
+
+	</script>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/ajax.html

@@ -71,6 +71,16 @@
 				$.init({
 					swipeBack:true //启用右滑关闭功能
 				});
+				
+				var network = true;
+				if(mui.os.plus){
+					mui.plusReady(function () {
+						if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
+							network = false;
+						}
+					});
+				}
+				
 				var methodEl = document.getElementById("method");
 				var dataTypeEl = document.getElementById("dataType");
 				var respnoseEl = document.getElementById("response");
@@ -121,7 +131,11 @@
 				};
 				//发送请求按钮的点击事件
 				document.getElementById("confirm").addEventListener('tap', function() {
+					if(network){
 						ajax();
+					}else{
+						mui.toast("当前网络不给力，请稍后再试");
+					}
 				});
 				//点击描述中链接时，打开对应网页介绍；
 				$('body').on('tap', 'a', function(e) {

examples/hello-mui/examples/checkbox.html

@@ -23,11 +23,11 @@
 			<div class="mui-card">
 				<form class="mui-input-group">
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>checked:false</label>
+						<label>checked：false</label>
 						<input name="checkbox" value="Item 1" type="checkbox" >
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>checked:true</label>
+						<label>checked：true</label>
 						<input name="checkbox" value="Item 2" type="checkbox" checked>
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left mui-disabled">
@@ -40,11 +40,11 @@
 			<div class="mui-card">
 				<form class="mui-input-group">
 					<div class="mui-input-row mui-checkbox">
-						<label>checked:false</label>
+						<label>checked：false</label>
 						<input name="checkbox1" value="Item 3" type="checkbox" >
 					</div>
 					<div class="mui-input-row mui-checkbox">
-						<label>checked:true</label>
+						<label>checked：true</label>
 						<input name="checkbox1" value="Item 4" type="checkbox" checked>
 					</div>
 					<div class="mui-input-row mui-checkbox mui-disabled">

examples/hello-mui/examples/clouddb_wilddog.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>
+		<script src="https://cdn.wilddog.com/js/client/current/wilddog.js"></script>
+		<link href="../css/mui.min.css" rel="stylesheet" />
+		<script type="text/javascript" charset="utf-8">
+			mui.init();
+		</script>
+		<style type="text/css">
+			.title{
+				background-color: rgba(0,0,0,.25);
+				font-weight: 400;
+			}
+			
+			#list td{
+				padding:5px 5px;
+			}
+			
+			#list tr:active{
+				background-color: rgba(0,0,0,.25);
+			}
+
+			
+			#popover{
+				min-width: 282px;
+				height: 300px ;
+				top:50% !important;
+				margin-top: -150px;
+				left: 50% !important;
+				margin-left: -141px;
+			}
+			
+			@media (min-width: 400px){
+				#popover{
+					width: 80%;
+					margin-left: -40%;
+				}
+			}
+			
+			.mui-popover .mui-popover-arrow{
+				display: none !important;
+			}
+			
+			.operate{
+				text-align: center;
+				margin-top: 20px
+			}
+		</style>
+	</head>
+
+	<body>
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<a class="mui-icon mui-icon-plusempty mui-pull-right" id="open"></a>
+			<h1 class="mui-title">cloud DB（云端数据库）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能； 在手机上新增数据后，你可以通过测试账号（账号：demo@dcloud.io/密码：12345678）登录野狗官网， 查看数据库的实时数据。
+				</p>
+				
+			</div>
+			<div style="background-color: #fff;padding-bottom: 15px;">
+				<div class="mui-content-padded" >
+					<h4 style="text-align: center;margin-bottom: 15px;padding-top: 15px;">云端数据库</h4>
+					<table id="list" border="1" width="100%" style="padding: 5px 10px;text-align: center;" >
+						
+					</table>
+				</div>
+			</div>
+			
+		</div>
+		
+		
+		<div id="popover" class="mui-popover">
+			<div class="mui-popover-arrow"></div>
+			<div class="mui-content-padded">
+				<h4 id="title" style="text-align: center;margin-top: 20px;">新增数据</h4>
+				<form class="mui-input-group" style="margin-top: 30px;">
+					<div class="mui-input-row">
+						<label>字段1：</label>
+						<input type="text" class="mui-input-clear" id="col1" placeholder="请输入">
+					</div>
+					<div class="mui-input-row">
+						<label>字段2：</label>
+						<input type="text" class="mui-input-clear" id="col2" placeholder="请输入">
+					</div>
+					<div class="mui-input-row">
+						<label>字段3：</label>
+						<input type="text" class="mui-input-clear" id="col3" placeholder="请输入">
+					</div>
+				</form>
+				<div id="add_div" class="operate mui-hidden">
+					<button type="button" class="mui-btn mui-btn-blue" id="add">确定</button>
+				</div>
+				<div id="edit_div" class="operate mui-hidden">
+					<button type="button" class="mui-btn mui-btn-blue" id="update" style="margin-right: 30px;">修改</button>
+					<button type="button" class="mui-btn mui-btn-red" id="del">删除</button>
+				</div>
+			</div>
+		</div>
+		
+		<script type="text/javascript">
+		
+			function trim(str){ //删除左右两端的空格
+		　　     return str.replace(/(^\s*)|(\s*$)/g, "");
+		　　 }
+		
+		
+			var network = false;
+			var ref = null;
+			mui.plusReady(function () {
+				if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
+					mui.toast("当前网络不给力，无法连接云端数据库~");
+				}else{
+					network = true;
+					ref = new Wilddog("https://muidemo.wilddogio.com/demo");
+					getList();
+				}
+			});
+
+			var list = document.getElementById("list");
+			var col1 = document.getElementById("col1");
+			var col2 = document.getElementById("col2");
+			var col3 = document.getElementById("col3");
+			
+			var add_div = document.getElementById("add_div");
+			var edit_div = document.getElementById("edit_div");
+
+			var title = document.getElementById("title");
+
+			document.getElementById("open").addEventListener('tap',function () {
+				if(!network){
+					mui.toast("当前网络不给力，请稍后再试");
+				}else{
+					//清空数据
+					col1.value = "";
+					col2.value = "";
+					col3.value = "";
+					title.innerHTML = "新增数据";
+					add_div.classList.remove("mui-hidden");
+					if(!edit_div.classList.contains("mui-hidden")){
+						edit_div.classList.add("mui-hidden");
+					}
+					mui("#popover").popover("toggle");
+				}
+			});
+			
+			
+			document.getElementById("add").addEventListener('tap', function() {
+				if(!ref){
+					mui.toast("当前网络不给力，请稍后再试");
+				}else{
+					var check = true;
+					mui(".mui-input-group input").each(function () {
+						if(!this.value||trim(this.value)==""){
+							var label = this.previousElementSibling;
+							mui.alert(label.innerText+"不允许为空");
+							check = false;
+							return false;
+						}
+					});
+					if(check){
+						var newRef = ref.push({
+							"col1": col1.value,
+							"col2": col2.value,
+							"col3": col3.value,
+						});
+						add_div.classList.add("mui-hidden");
+						//关闭modal
+						mui("#popover").popover("toggle");
+						mui.toast("添加成功~");
+						//刷新界面
+						getList();
+					}
+				}
+				
+			});
+			document.getElementById("update").addEventListener("tap", function() {
+				var check = true;
+				mui(".mui-input-group input").each(function () {
+					if(!this.value||trim(this.value)==""){
+						var label = this.previousElementSibling;
+						mui.alert(label.innerText+"不允许为空");
+						check = false;
+						return false;
+					}
+				});
+				if(check){
+					var newRef = ref.child(document.getElementById("col1").getAttribute("demoid"));
+					newRef.update({
+						"col1": col1.value,
+						"col2": col2.value,
+						"col3": col3.value,
+					});
+					//关闭modal
+					mui("#popover").popover("toggle");
+					edit_div.classList.add("mui-hidden");
+					mui.toast("修改成功~");
+					//刷新界面
+					getList();
+				}
+			})
+			document.getElementById("del").addEventListener("tap", function() {
+				var newRef = ref.child(document.getElementById("col1").getAttribute("demoid"));
+				newRef.remove();
+				//关闭modal
+				mui("#popover").popover("toggle");
+				if(!edit_div.classList.contains("mui-hidden")){
+					edit_div.classList.add("mui-hidden");
+				}
+				mui.toast("删除成功~");
+				//刷新界面
+				getList();
+			})
+			//列表事件绑定，点击编辑数据
+			 mui("#list").on("tap", "tr", function() {
+			 	var id = this.getAttribute("id");
+			 	if(id){
+			 		document.getElementById("col1").value = this.querySelector(".col1").innerHTML;
+					document.getElementById("col2").value = this.querySelector(".col2").innerHTML;
+					document.getElementById("col3").value = this.querySelector(".col3").innerHTML;
+					document.getElementById("col1").setAttribute("demoid", id);
+					title.innerHTML = "编辑数据";
+					if(!add_div.classList.contains("mui-hidden")){
+						add_div.classList.add("mui-hidden");
+					}
+					edit_div.classList.remove("mui-hidden");
+					mui("#popover").popover("toggle");
+			 	}
+				
+			})
+				/**
+				 * 获取最新记录
+				 */
+
+			function getList() {
+				ref.once("value", function(snapshot) {
+					list.innerHTML = "<tr class='title'><td>字段1</td><td>字段2</td><td>字段3</td></tr>";
+					var result = snapshot.val();
+					mui.each(result, function(key, elem) {
+						var li = document.createElement("tr");
+						li.setAttribute("id", key);
+						var col1 = document.createElement("td");
+						col1.className = "col1"
+						col1.innerHTML = elem.col1;
+						li.appendChild(col1);
+						var col2 = document.createElement("td");
+						col2.className = "col2"
+						col2.innerHTML = elem.col2;
+						li.appendChild(col2);
+						var col3 = document.createElement("td");
+						col3.className = "col3"
+						col3.innerHTML = elem.col3;
+						li.appendChild(col3);
+						list.appendChild(li);
+					})
+				});
+			}
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/date.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">
+
+		<!--标准mui.css-->
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
+		<style>
+			#info {
+				padding: 20px 10px;
+			}
+			
+			.mui-btn {
+				font-size: 16px;
+				padding: 8px;
+				margin: 3px;
+			}
+		</style>
+
+	</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">native模式</h1>
+		</header>
+		<div class="mui-content">
+			
+ 			<div class="mui-content-padded">
+				<h5 class="mui-content-padded">日期示例</h5>
+				<button id='pickDateBtn' type="button" class="mui-btn mui-btn-block">选择日期</button>
+				<h5 class="mui-content-padded">时间示例</h5>
+				<button id='pickTimeBtn' type="button" class="mui-btn mui-btn-block">选择时间</button>
+				<div id="info">
+
+				</div>
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			 //mui初始化
+			mui.init({
+				swipeBack: true //启用右滑关闭功能
+			});
+			var info = document.getElementById("info");
+			
+			document.getElementById("pickDateBtn").addEventListener('tap', function() {
+				var dDate = new Date();
+				dDate.setFullYear(2014, 7, 16);
+				var minDate = new Date();
+				minDate.setFullYear(2010, 0, 1);
+				var maxDate = new Date();
+				maxDate.setFullYear(2016, 11, 31);
+				plus.nativeUI.pickDate(function(e) {
+					var d = e.date;
+					info.innerText = '您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
+				}, function(e) {
+					info.innerText = "您没有选择日期";
+				}, {
+					title: "请选择日期",
+					date: dDate,
+					minDate: minDate,
+					maxDate: maxDate
+				});
+			})
+			 document.getElementById("pickTimeBtn").addEventListener('tap', function() {
+				var dTime = new Date();
+				dTime.setHours(6, 0);
+				plus.nativeUI.pickTime(function(e) {
+					var d = e.date;
+					info.innerText = "您选择的时间是：" + d.getHours() + ":" + d.getMinutes();
+				}, function(e) {
+					info.innerText = "您没有选择时间"
+				}, {
+					title: "请选择时间",
+					is24Hour: true,
+					time: dTime
+				});
+			});
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/dialog.html

 <!DOCTYPE html>
 <html>
+
 	<head>
 		<meta charset="utf-8">
 		<title>Hello MUI</title>
@@ -10,15 +11,15 @@
 		<!--标准mui.css-->
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<!--App自定义的css-->
-		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
 		<style>
-			.mui-btn{
+			.mui-btn {
 				display: block;
 				width: 120px;
 				margin: 10px auto;
 			}
-			  #info{
-			  	padding: 20px 10px ;
+			#info {
+				padding: 20px 10px;
 			}
 		</style>
 
@@ -35,8 +36,6 @@
 				<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
 				<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
 				<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
-				<button id='pickDateBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择框</button>
-				<button id='pickTimeBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">时间选择框</button>
 				<div id="info">
 
 				</div>
@@ -46,64 +45,39 @@
 		<script type="text/javascript" charset="utf-8">
 			 //mui初始化
 			mui.init({
-				swipeBack:true //启用右滑关闭功能
+				swipeBack: true //启用右滑关闭功能
 			});
 			var info = document.getElementById("info");
-			  document.getElementById("alertBtn").addEventListener('tap',function(){
-			  	mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
+			document.getElementById("alertBtn").addEventListener('tap', function() {
+				mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
 					info.innerText = '你刚关闭了警告框';
 				});
 			});
-			  
-			  document.getElementById("confirmBtn").addEventListener('tap',function(){
-			  	var btnArray = ['是','否'];
-			  	mui.confirm('MUI是个好框架，确认？','Hello MUI',btnArray,function(e){
-			  		if(e.index==0){
+			document.getElementById("confirmBtn").addEventListener('tap', function() {
+				var btnArray = ['是', '否'];
+				mui.confirm('MUI是个好框架，确认？', 'Hello MUI', btnArray, function(e) {
+					if (e.index == 0) {
 						info.innerText = '你刚确认MUI是个好框架';
-			  		}else{
+					} else {
 						info.innerText = 'MUI没有得到你的认可，继续加油'
 					}
 				})
 			});
-			  
-			  //TODO iOS 8.x平台存在bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了，故临时使用click代替tap；
-			  document.getElementById("promptBtn").addEventListener('click',function(){
-			  	var btnArray = ['确定','取消'];
-			  	mui.prompt('请输入你对MUI的评语：','性能好','Hello MUI',btnArray,function(e){
-			  		if(e.index==0){
-			  			info.innerText = '谢谢你的评语：'+e.value;
-			  		}else{
+			document.getElementById("promptBtn").addEventListener('tap', function(e) {
+				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
+				var btnArray = ['确定', '取消'];
+				mui.prompt('请输入你对MUI的评语：', '性能好', 'Hello MUI', btnArray, function(e) {
+					if (e.index == 0) {
+						info.innerText = '谢谢你的评语：' + e.value;
+					} else {
 						info.innerText = '你点了取消按钮';
 					}
 				})
 			});
-			  document.getElementById("toastBtn").addEventListener('tap',function(){
+			document.getElementById("toastBtn").addEventListener('tap', function() {
 				mui.toast('欢迎体验Hello MUI');
 			});
-			  document.getElementById("pickDateBtn").addEventListener('tap',function () {
-			  	var dDate=new Date();
-				dDate.setFullYear(2014,7,16);
-				var minDate=new Date();
-				minDate.setFullYear(2010,0,1);
-				var maxDate=new Date();
-				maxDate.setFullYear(2016,11,31);
-				plus.nativeUI.pickDate( function(e) {
-					var d=e.date;
-					info.innerText = '您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate();
-				},function(e){
-					info.innerText = "您没有选择日期";
-				},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
-			})
-			document.getElementById("pickTimeBtn").addEventListener('tap',function () {
-				var dTime=new Date();
-				dTime.setHours(6,0);
-				plus.nativeUI.pickTime(function(e){
-					var d=e.date;
-					info.innerText = "您选择的时间是："+d.getHours()+":"+d.getMinutes();
-				},function (e){
-					info.innerText = "您没有选择时间" 
-				},{title:"请选择时间",is24Hour:true,time:dTime});
-			});
 		</script>
 	</body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/dtpicker.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>
+		<!--标准mui.css-->
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
+		<link href="../css/mui.listpicker.css" rel="stylesheet" />
+		<link href="../css/mui.dtpicker.css" rel="stylesheet" />
+		<style>
+			html,
+			body,
+			.mui-content {
+				height: 0px;
+				margin: 0px;
+				background-color: #efeff4;
+			}
+			h5.mui-content-padded {
+				margin-left: 3px;
+				margin-top: 20px !important;
+			}
+			h5.mui-content-padded:first-child {
+				margin-top: 12px !important;
+			}
+			.mui-btn {
+				font-size: 16px;
+				padding: 8px;
+				margin: 3px;
+			}
+			.ui-alert {
+				text-align: center;
+				padding: 20px 10px;
+				font-size: 16px;
+			}
+		</style>
+	</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">dtpicker（日期时间选择器）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<h5 class="mui-content-padded">常规示例</h5>
+				<button id='demo1' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
+				<h5 class="mui-content-padded">设定年份区间</h5>
+				<button id='demo2' data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
+				<h5 class="mui-content-padded">设定选中的时间</h5>
+				<button id='demo3' data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
+				<h5 class="mui-content-padded">指定类型</h5>
+				<button id='demo4' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
+				<button id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block">选择时间 ...</button>
+				<button id='demo6' data-options='{"type":"month"}' class="btn mui-btn mui-btn-block">选择月份 ...</button>
+				<h5 class="mui-content-padded">自定义数据</h5>
+				<button id='demo7' data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}' class="btn mui-btn mui-btn-block">选择时段 ...</button>
+				<div id='result' class="ui-alert"></div>
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script src="../js/mui.listpicker.js"></script>
+		<script src="../js/mui.dtpicker.js"></script>
+		<script>
+			(function($) {
+				$.init();
+				var result = $('#result')[0];
+				var btns = $('.btn');
+				btns.each(function(i, btn) {
+					btn.addEventListener('tap', function() {
+						var optionsJson = this.getAttribute('data-options') || '{}';
+						var options = JSON.parse(optionsJson);
+						var id = this.getAttribute('id');
+						/*
+						 * 首次显示时实例化组件
+						 * 示例为了简洁，将 options 放在了按钮的 dom 上
+						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
+						 */
+						var picker = new $.DtPicker(options);
+						picker.show(function(rs) {
+							/*
+							 * rs.value 拼合后的 value
+							 * rs.text 拼合后的 text
+							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
+							 * rs.m 月，用法同年
+							 * rs.d 日，用法同年
+							 * rs.h 时，用法同年
+							 * rs.i 分（minutes 的第二个字母），用法同年
+							 */
+							result.innerText = '选择结果: ' + rs.text;
+							
+							/* 
+							 * 返回 false 可以阻止选择框的关闭
+							 * return false;
+							 */
+							
+							/*
+							 * 释放组件资源，释放后将将不能再操作组件
+							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
+							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
+							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。
+							 */
+							picker.dispose(); 
+						});
+					}, false);
+				});
+			})(mui);
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/echarts.html

+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<title>ECahrt 示例</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">
+		<!--标准mui.css-->
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
+		<style>
+			.chart {
+				height: 200px;
+				margin: 0px;
+				padding: 0px;
+			}
+			h5 {
+				margin-top: 30px;
+				font-weight: bold;
+			}
+			h5:first-child {
+				margin-top: 15px;
+			}
+		</style>
+	</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">chart（EChart图表）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<p style="text-indent: 22px;">
+					这是mui集成百度ECharts的图表示例，ECharts的详细用法及 API 请参考其官方网站: <a id='echarts' data-url='http://echarts.baidu.com'>http://echarts.baidu.com</a>
+				</p>
+			</div>
+			<div class="mui-content-padded">
+				<h5>柱图示例</h5>
+				<div class="chart" id="barChart"></div>
+				<h5>线图示例</h5>
+				<div class="chart" id="lineChart"></div>
+				<h5>饼图示例</h5>
+				<div class="chart" id="pieChart"></div>
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script src="../libs/echarts-all.js"></script>
+		<script>
+			var getOption = function(chartType) {
+				var chartOption = chartType == 'pie' ? {
+					calculable: false,
+					series: [{
+						name: '访问来源',
+						type: 'pie',
+						radius: '65%',
+						center: ['50%', '50%'],
+						data: [{
+							value: 335,
+							name: '直接访问'
+						}, {
+							value: 310,
+							name: '邮件营销'
+						}, {
+							value: 234,
+							name: '联盟广告'
+						}, {
+							value: 135,
+							name: '视频广告'
+						}, {
+							value: 1548,
+							name: '搜索引擎'
+						}]
+					}]
+				} : {
+					legend: {
+						data: ['蒸发量', '降水量']
+					},
+					grid: {
+						x: 35,
+						x2: 10,
+						y: 30,
+						y2: 25
+					},
+					toolbox: {
+						show: false,
+						feature: {
+							mark: {
+								show: true
+							},
+							dataView: {
+								show: true,
+								readOnly: false
+							},
+							magicType: {
+								show: true,
+								type: ['line', 'bar']
+							},
+							restore: {
+								show: true
+							},
+							saveAsImage: {
+								show: true
+							}
+						}
+					},
+					calculable: false,
+					xAxis: [{
+						type: 'category',
+						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+					}],
+					yAxis: [{
+						type: 'value',
+						splitArea: {
+							show: true
+						}
+					}],
+					series: [{
+						name: '蒸发量',
+						type: chartType,
+						data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+					}, {
+						name: '降水量',
+						type: chartType,
+						data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+					}]
+				};
+				return chartOption;
+			};
+			var byId = function(id) {
+				return document.getElementById(id);
+			};
+			var barChart = echarts.init(byId('barChart'));
+			barChart.setOption(getOption('bar'));
+			var lineChart = echarts.init(byId('lineChart'));
+			lineChart.setOption(getOption('line'));
+			var pieChart = echarts.init(byId('pieChart'));
+			pieChart.setOption(getOption('pie'));
+			byId("echarts").addEventListener('tap',function(){
+				var url = this.getAttribute('data-url');
+				plus.runtime.openURL(url);
+			},false);
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/feedback.html

+<!doctype html>
+<html lang="en" class="feedback">
+
+	<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>feedback</title>
+		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
+		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
+	</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">
+			<p>问题和意见</p>
+			<div class="row mui-input-row">
+				<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
+			</div>
+			<p>图片(选填,提供问题截图)</p>
+			<div id='image-list' class="row image-list">
+			</div>
+			<p>QQ/邮箱</p>
+			<div class="mui-input-row">
+				<input id='contact' type="text" class="mui-input-clear  contact" placeholder="(选填,方便我们联系你 )" />
+			</div>
+			<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
+		</div>
+		<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客服面板” 能够查阅反馈信息。</p>
+		<script src="../js/mui.min.js"></script>
+		<script src='../libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
+		<script src='../libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
+		<script src='../libs/easymob-webim-sdk/json2.js'></script>
+		<script src="../libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
+		<script src='../js/feedback.js'></script>
+		<script src="../js/feedback-page.js"></script>
+	</body>
+
+</html>
\ No newline at end of file

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

@@ -11,7 +11,7 @@
 		<!--标准mui.css-->
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<!--App自定义的css-->
-		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
 		<style>
 			.mui-slider-indicator {
 				bottom: 0;
@@ -21,6 +21,7 @@
 			}
 		</style>
 	</head>
+
 	<body>
 		<header class="mui-bar mui-bar-nav">
 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
@@ -234,22 +235,26 @@
 			//克隆最后一个节点
 			var last = items[items.length - 1].cloneNode(true);
 			last.classList.add('mui-slider-item-duplicate');
-	
 			//处理是否循环逻辑，若支持循环，需支持两点：
 			//1、在.mui-slider-group节点上增加.mui-slider-loop类
 			//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
+			var sliderApi = mui(slider).slider();
+
 			function toggleLoop(loop) {
 					if (loop) {
 						group.classList.add('mui-slider-loop');
 						group.insertBefore(last, group.firstChild);
 						group.appendChild(first);
+						sliderApi.refresh();
+						sliderApi.gotoItem(0);
 					} else {
 						group.classList.remove('mui-slider-loop');
 						group.removeChild(first);
 						group.removeChild(last);
+						sliderApi.refresh();
+						sliderApi.gotoItem(0);
 					}
 				}
-	
 				//按下“循环”按钮的处理逻辑；
 			document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
 				var loop = e.detail.isActive;
@@ -257,4 +262,5 @@
 			});
 		});
 	</script>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/guide.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">
+		<style>
+			#close {
+				position: absolute;
+				width: 160px;
+				left: 50%;
+				margin-left: -80px;
+				bottom: 15%;
+				padding: 10px;
+				color: #fff;
+				border-color: #fff;
+			}
+			.item-logo {
+				width: 100%;
+				height: 100%;
+				position: relative;
+			}
+			.item-logo a {
+				width: 200px;
+				height: 200px;
+				display: block;
+				border: 1px solid #FFFFFF;
+				border-color: rgba(255, 255, 255, 0.5);
+				text-align: center;
+				line-height: 200px;
+				border-radius: 50%;
+				font-size: 40px;
+				color: #fff;
+				position: absolute;
+				top: 15%;
+				left: 50%;
+				margin-left: -100px;
+			}
+			.animate {
+				position: absolute;
+				left: 0;
+				bottom: 15%;
+				width: 100%;
+				color: #fff;
+				display: -moz-box;
+			}
+			.animate h2 {
+				text-align: center;
+				margin-bottom: 20px;
+			}
+			.animate li {
+				width: 50%;
+				height: 30px;
+				line-height: 30px;
+				list-style: none;
+				font-size: 16px;
+				text-align: right;
+			}
+			.animate li:nth-child(3) {
+				text-align: left;
+				float: right;
+			}
+			.animated {
+				-webkit-animation-duration: 1s;
+				-webkit-animation-play-state: paused;
+				-webkit-animation-fill-mode: both;
+			}
+			.guide-show .bounceInDown {
+				-webkit-animation-name: bounceInDown;
+				-webkit-animation-play-state: running;
+				-webkit-animation-delay: 1s;
+				display: block;
+			}
+			.guide-show .bounceInLeft {
+				-webkit-animation-name: bounceInLeft;
+				display: block;
+				-webkit-animation-play-state: running;
+			}
+			.guide-show .bounceInRight {
+				-webkit-animation-name: bounceInRight;
+				display: block;
+				-webkit-animation-play-state: running;
+				-webkit-animation-delay: 0.5s;
+			}
+			@-webkit-keyframes bounceInDown {
+				0%, 60%, 75%, 90%, 100% {
+					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+				}
+				0% {
+					opacity: 0;
+					-webkit-transform: translate3d(0, -3000px, 0);
+					transform: translate3d(0, -3000px, 0);
+				}
+				60% {
+					opacity: 1;
+					-webkit-transform: translate3d(0, 25px, 0);
+					transform: translate3d(0, 25px, 0);
+				}
+				75% {
+					-webkit-transform: translate3d(0, -5px, 0);
+					transform: translate3d(0, -5px, 0);
+				}
+				90% {
+					-webkit-transform: translate3d(0, 3px, 0);
+					transform: translate3d(0, 3px, 0);
+				}
+				100% {
+					-webkit-transform: none;
+					transform: none;
+				}
+			}
+			@-webkit-keyframes bounceInLeft {
+				0%, 60%, 75%, 90%, 100% {
+					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+				}
+				0% {
+					opacity: 0;
+					-webkit-transform: translate3d(-3000px, 0, 0);
+					transform: translate3d(-3000px, 0, 0);
+				}
+				60% {
+					opacity: 1;
+					-webkit-transform: translate3d(25px, 0, 0);
+					transform: translate3d(25px, 0, 0);
+				}
+				75% {
+					-webkit-transform: translate3d(-10px, 0, 0);
+					transform: translate3d(-10px, 0, 0);
+				}
+				90% {
+					-webkit-transform: translate3d(5px, 0, 0);
+					transform: translate3d(5px, 0, 0);
+				}
+				100% {
+					-webkit-transform: none;
+					transform: none;
+				}
+			}
+			@-webkit-keyframes bounceInRight {
+				0%, 60%, 75%, 90%, 100% {
+					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+				}
+				0% {
+					opacity: 0;
+					-webkit-transform: translate3d(3000px, 0, 0);
+					transform: translate3d(3000px, 0, 0);
+				}
+				60% {
+					opacity: 1;
+					-webkit-transform: translate3d(-25px, 0, 0);
+					transform: translate3d(-25px, 0, 0);
+				}
+				75% {
+					-webkit-transform: translate3d(10px, 0, 0);
+					transform: translate3d(10px, 0, 0);
+				}
+				90% {
+					-webkit-transform: translate3d(-5px, 0, 0);
+					transform: translate3d(-5px, 0, 0);
+				}
+				100% {
+					-webkit-transform: none;
+					transform: none;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
+			<div class="mui-slider-group">
+				<!-- 第一张 -->
+				<div class="mui-slider-item">
+					<div class="item-logo" style="background-color: #D74B28">
+						<a href="#">
+						MUI
+						</a>
+						<div class="animate guide-show">
+							<h2 class="animated bounceInDown">小巧高能</h2>
+							<li class="animated bounceInLeft">几十K的JS和CSS</li>
+							<li class="animated bounceInRight">上百种控件样式和模板</li>
+						</div>
+					</div>
+				</div>
+				<!-- 第二张 -->
+				<div class="mui-slider-item">
+					<div class="item-logo" style="background-color: #02C1ED;">
+						<a href="#">
+						MUI
+						</a>
+						<div id="tips-2" class="animate mui-hidden">
+							<h2 class="animated bounceInDown">原生UI</h2>
+							<li class="animated bounceInLeft">以iOS原生UI为基础</li>
+							<li class="animated bounceInRight">补充Android特有样式</li>
+						</div>
+					</div>
+				</div>
+				<!-- 第三张 -->
+				<div class="mui-slider-item">
+					<div class="item-logo" style="background-color: #67C962;">
+						<a href="#">
+						MUI
+						</a>
+						<div id="tips-3" class="animate mui-hidden">
+							<h2 class="animated bounceInDown">流畅体验</h2>
+							<li class="animated bounceInLeft">下拉刷新、转场动画</li>
+							<li class="animated bounceInRight">整个世界都流畅了</li>
+						</div>
+					</div>
+				</div>
+				<!-- 第四张 -->
+				<div class="mui-slider-item">
+					<div class="item-logo" style="background-color: #FCD208;">
+						<a href="#">
+						MUI
+						</a>
+						<div class="animate">
+							<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="mui-slider-indicator">
+				<div class="mui-indicator mui-active"></div>
+				<div class="mui-indicator"></div>
+				<div class="mui-indicator"></div>
+				<div class="mui-indicator"></div>
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script>
+			mui.back = function() {};
+			mui.plusReady(function() {
+				if(mui.os.ios){
+					plus.navigator.setFullscreen(true);
+				}
+				plus.navigator.closeSplashscreen();
+			});
+			//立即体验按钮点击事件
+			document.getElementById("close").addEventListener('tap', function(event) {
+				plus.storage.setItem("lauchFlag", "true");
+				plus.navigator.setFullscreen(false);
+				plus.webview.currentWebview().close();
+			}, false);
+			//图片切换时，触发动画
+			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
+			 	//注意slideNumber是从0开始的；
+			 	var index = event.detail.slideNumber+1;
+			 	if(index==2||index==3){
+			 		var item = document.getElementById("tips-"+index);
+			 		if(item.classList.contains("mui-hidden")){
+			 			item.classList.remove("mui-hidden");
+			 			item.classList.add("guide-show");
+			 		}
+			 	}
+			});
+			
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/icons.html

@@ -74,7 +74,7 @@
 					<a><span class="mui-icon mui-icon-weixin"></span></a>
 					<a><span class="mui-icon mui-icon-pengyouquan"></span></a>
 					<a><span class="mui-icon mui-icon-chat"></span></a>
-
+					<a><span class="mui-icon mui-icon-qq"></span></a>
 
 					<a><span class="mui-icon mui-icon-videocam"></span></a>
 					<a><span class="mui-icon mui-icon-camera"></span></a>
@@ -83,11 +83,6 @@
 					<a><span class="mui-icon mui-icon-micoff"></span></a>
 					<a id="icon-location"><span class="mui-icon mui-icon-location"></span></a>
 					<a><span class="mui-icon mui-icon-map"></span></a>
-					<!--<a><span class="mui-icon mui-icon-volumehigh"></span></a>
-		<a><span class="mui-icon mui-icon-volumelow"></span></a>-->
-
-
-
 					<a><span class="mui-icon mui-icon-compose"></span></a>
 					<a><span class="mui-icon mui-icon-trash"></span></a>
 					<a><span class="mui-icon mui-icon-upload"></span></a>