编译至mui v2.1.0

dist/css/mui.css

 /*!
  * =====================================================
- * Mui v2.0.0 (https://github.com/dcloudio/mui)
+ * Mui v2.1.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 
@@ -824,6 +824,9 @@ p
 .mui-off-canvas-wrap .mui-bar
 {
     position: absolute !important;
+
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
 }
 
 .mui-off-canvas-wrap
@@ -931,6 +934,47 @@ p
     right: 0;
 }
 
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable
+{
+    background-color: #333;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
+{
+    width: 80%;
+
+    -webkit-transform: scale(.8);
+            transform: scale(.8);
+
+    opacity: .1;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
+{
+    -webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease;
+            transition:         transform 200ms ease, opacity 200ms ease;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
+{
+    -webkit-transform-origin: -100%;
+            transform-origin: -100%;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
+{
+    -webkit-transform-origin: 200%;
+            transform-origin: 200%;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-inner-wrap
+{
+    -webkit-transform: scale(.8);
+            transform: scale(.8);
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-right
+{
+    -webkit-transform: scale(1);
+            transform: scale(1);
+
+    opacity: 1;
+}
+
 .mui-loading .mui-spinner
 {
     display: block;
@@ -1689,6 +1733,11 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
     margin: 0 auto;
 }
 
+.mui-bar.mui-bar-header-secondary .mui-segmented-control
+{
+    top: 0;
+}
+
 .mui-badge
 {
     font-size: 12px;
@@ -2316,9 +2365,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
     -webkit-transform: translateY(-50%);
             transform: translateY(-50%);
 }
-.mui-table-view-cell .mui-navigate-left > .mui-btn,
-.mui-table-view-cell .mui-navigate-left > .mui-badge,
-.mui-table-view-cell .mui-navigate-left > .mui-switch,
 .mui-table-view-cell .mui-navigate-right > .mui-btn,
 .mui-table-view-cell .mui-navigate-right > .mui-badge,
 .mui-table-view-cell .mui-navigate-right > .mui-switch,
@@ -2328,9 +2374,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 .mui-table-view-cell .mui-push-right > .mui-btn,
 .mui-table-view-cell .mui-push-right > .mui-badge,
 .mui-table-view-cell .mui-push-right > .mui-switch,
-.mui-table-view-cell > a .mui-navigate-left > .mui-btn,
-.mui-table-view-cell > a .mui-navigate-left > .mui-badge,
-.mui-table-view-cell > a .mui-navigate-left > .mui-switch,
 .mui-table-view-cell > a .mui-navigate-right > .mui-btn,
 .mui-table-view-cell > a .mui-navigate-right > .mui-badge,
 .mui-table-view-cell > a .mui-navigate-right > .mui-switch,
@@ -4062,7 +4105,6 @@ select:focus
             transform: translate3d(100%, 0, 0);
 }
 
-.mui-navigate-left:after,
 .mui-navigate-right:after,
 .mui-push-left:after,
 .mui-push-right:after
@@ -4085,7 +4127,6 @@ select:focus
     -webkit-font-smoothing: antialiased;
 }
 
-.mui-navigate-left:after,
 .mui-push-left:after
 {
     left: 15px;
@@ -4787,7 +4828,7 @@ select:focus
     width: 100%;
     height: 100%;
 }
-.mui-fullscreen .mui-slider-group
+.mui-fullscreen.mui-slider .mui-slider-group
 {
     height: 100%;
 }
@@ -4800,7 +4841,7 @@ select:focus
     width: 100%;
     height: auto;
 }
-.mui-fullscreen .mui-slider-item > a
+.mui-fullscreen.mui-slider .mui-slider-item > a
 {
     top: 50%;
 
@@ -4842,11 +4883,21 @@ select:focus
     display: block !important;
 }
 
+.mui-tab-item.mui-plus-hidden, .mui-tab-item.mui-wechat-hidden
+{
+    display: table-cell !important;
+}
+
 .mui-plus .mui-plus-visible, .mui-wechat .mui-wechat-visible
 {
     display: block !important;
 }
 
+.mui-plus .mui-tab-item.mui-plus-visible, .mui-wechat .mui-tab-item.mui-wechat-visible
+{
+    display: table-cell !important;
+}
+
 .mui-plus .mui-plus-hidden, .mui-wechat .mui-wechat-hidden
 {
     display: none !important;

examples/hello-mui/css/mui.css

 /*!
  * =====================================================
- * Mui v2.0.0 (https://github.com/dcloudio/mui)
+ * Mui v2.1.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 
@@ -824,6 +824,9 @@ p
 .mui-off-canvas-wrap .mui-bar
 {
     position: absolute !important;
+
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
 }
 
 .mui-off-canvas-wrap
@@ -931,6 +934,47 @@ p
     right: 0;
 }
 
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable
+{
+    background-color: #333;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
+{
+    width: 80%;
+
+    -webkit-transform: scale(.8);
+            transform: scale(.8);
+
+    opacity: .1;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
+{
+    -webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease;
+            transition:         transform 200ms ease, opacity 200ms ease;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
+{
+    -webkit-transform-origin: -100%;
+            transform-origin: -100%;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
+{
+    -webkit-transform-origin: 200%;
+            transform-origin: 200%;
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-inner-wrap
+{
+    -webkit-transform: scale(.8);
+            transform: scale(.8);
+}
+.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-right
+{
+    -webkit-transform: scale(1);
+            transform: scale(1);
+
+    opacity: 1;
+}
+
 .mui-loading .mui-spinner
 {
     display: block;
@@ -1689,6 +1733,11 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
     margin: 0 auto;
 }
 
+.mui-bar.mui-bar-header-secondary .mui-segmented-control
+{
+    top: 0;
+}
+
 .mui-badge
 {
     font-size: 12px;
@@ -2316,9 +2365,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
     -webkit-transform: translateY(-50%);
             transform: translateY(-50%);
 }
-.mui-table-view-cell .mui-navigate-left > .mui-btn,
-.mui-table-view-cell .mui-navigate-left > .mui-badge,
-.mui-table-view-cell .mui-navigate-left > .mui-switch,
 .mui-table-view-cell .mui-navigate-right > .mui-btn,
 .mui-table-view-cell .mui-navigate-right > .mui-badge,
 .mui-table-view-cell .mui-navigate-right > .mui-switch,
@@ -2328,9 +2374,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 .mui-table-view-cell .mui-push-right > .mui-btn,
 .mui-table-view-cell .mui-push-right > .mui-badge,
 .mui-table-view-cell .mui-push-right > .mui-switch,
-.mui-table-view-cell > a .mui-navigate-left > .mui-btn,
-.mui-table-view-cell > a .mui-navigate-left > .mui-badge,
-.mui-table-view-cell > a .mui-navigate-left > .mui-switch,
 .mui-table-view-cell > a .mui-navigate-right > .mui-btn,
 .mui-table-view-cell > a .mui-navigate-right > .mui-badge,
 .mui-table-view-cell > a .mui-navigate-right > .mui-switch,
@@ -4062,7 +4105,6 @@ select:focus
             transform: translate3d(100%, 0, 0);
 }
 
-.mui-navigate-left:after,
 .mui-navigate-right:after,
 .mui-push-left:after,
 .mui-push-right:after
@@ -4085,7 +4127,6 @@ select:focus
     -webkit-font-smoothing: antialiased;
 }
 
-.mui-navigate-left:after,
 .mui-push-left:after
 {
     left: 15px;
@@ -4787,7 +4828,7 @@ select:focus
     width: 100%;
     height: 100%;
 }
-.mui-fullscreen .mui-slider-group
+.mui-fullscreen.mui-slider .mui-slider-group
 {
     height: 100%;
 }
@@ -4800,7 +4841,7 @@ select:focus
     width: 100%;
     height: auto;
 }
-.mui-fullscreen .mui-slider-item > a
+.mui-fullscreen.mui-slider .mui-slider-item > a
 {
     top: 50%;
 
@@ -4842,11 +4883,21 @@ select:focus
     display: block !important;
 }
 
+.mui-tab-item.mui-plus-hidden, .mui-tab-item.mui-wechat-hidden
+{
+    display: table-cell !important;
+}
+
 .mui-plus .mui-plus-visible, .mui-wechat .mui-wechat-visible
 {
     display: block !important;
 }
 
+.mui-plus .mui-tab-item.mui-plus-visible, .mui-wechat .mui-tab-item.mui-wechat-visible
+{
+    display: table-cell !important;
+}
+
 .mui-plus .mui-plus-hidden, .mui-wechat .mui-wechat-hidden
 {
     display: none !important;

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/dtpicker.html

@@ -69,7 +69,6 @@
 				$.init();
 				var result = $('#result')[0];
 				var btns = $('.btn');
-				var pickers = {};
 				btns.each(function(i, btn) {
 					btn.addEventListener('tap', function() {
 						var optionsJson = this.getAttribute('data-options') || '{}';
@@ -80,8 +79,8 @@
 						 * 示例为了简洁，将 options 放在了按钮的 dom 上
 						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
 						 */
-						pickers[id] = pickers[id] || new $.DtPicker(options);
-						pickers[id].show(function(rs) {
+						var picker = new $.DtPicker(options);
+						picker.show(function(rs) {
 							/*
 							 * rs.value 拼合后的 value
 							 * rs.text 拼合后的 text
@@ -92,6 +91,19 @@
 							 * rs.i 分（minutes 的第二个字母），用法同年
 							 */
 							result.innerText = '选择结果: ' + rs.text;
+							
+							/* 
+							 * 返回 false 可以阻止选择框的关闭
+							 * return false;
+							 */
+							
+							/*
+							 * 释放组件资源，释放后将将不能再操作组件
+							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
+							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
+							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。
+							 */
+							picker.dispose(); 
 						});
 					}, false);
 				});

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">ECahrt 示例</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<h5>柱图示例</h5>
+				<div class="chart" id="barChart"></div>
+				<h5>线图示例</h5>
+				<div class="chart" id="lineChart"></div>
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script src="../libs/echarts-all.js"></script>
+		<script>
+			var getOption = function(chartType) {
+				var chartOption = {
+					tooltip: {
+						trigger: 'axis'
+					},
+					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 barChart = echarts.init(document.getElementById('barChart'));
+			barChart.setOption(getOption('bar'));
+			var lineChart = echarts.init(document.getElementById('lineChart'));
+			lineChart.setOption(getOption('line'));
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/feedback.html

@@ -29,7 +29,7 @@
 			</div>
 			<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
 		</div>
-		<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客户面板” 能够查阅反馈信息。</p>
+		<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>

examples/hello-mui/examples/icons.html

@@ -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>

examples/hello-mui/examples/imageviewer.html

@@ -43,15 +43,22 @@
 			}
 			.mui-preview-image {
 				display: none;
+				-webkit-animation-duration: 0.5s;
+				animation-duration: 0.5s;
+				-webkit-animation-fill-mode: both;
+				animation-fill-mode: both;
 			}
 			.mui-preview-image.mui-preview-in {
-				display: block;
+				-webkit-animation-name: fadeIn;
+				animation-name: fadeIn;
 			}
-			.mui-preview-image.mui-transitioning {
+			.mui-preview-image.mui-preview-out {
 				background: none;
+				-webkit-animation-name: fadeOut;
+				animation-name: fadeOut;
 			}
-			.mui-preview-image.mui-transitioning .mui-preview-header,
-			.mui-preview-image.mui-transitioning .mui-preview-footer {
+			.mui-preview-image.mui-preview-out .mui-preview-header,
+			.mui-preview-image.mui-preview-out .mui-preview-footer {
 				display: none;
 			}
 			.mui-zoom-scroller {
@@ -78,10 +85,6 @@
 				-webkit-transform-style: preserve-3d;
 				transform-style: preserve-3d;
 			}
-			p img {
-				max-width: 100%;
-				height: auto;
-			}
 			.mui-slider .mui-slider-group .mui-slider-item img {
 				width: auto;
 				height: auto;
@@ -122,6 +125,42 @@
 				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
 				transition: transform 0.5s ease, opacity 0.5s ease;
 			}
+			@-webkit-keyframes fadeIn {
+				0% {
+					opacity: 0;
+				}
+				100% {
+					opacity: 1;
+				}
+			}
+			@keyframes fadeIn {
+				0% {
+					opacity: 0;
+				}
+				100% {
+					opacity: 1;
+				}
+			}
+			@-webkit-keyframes fadeOut {
+				0% {
+					opacity: 1;
+				}
+				100% {
+					opacity: 0;
+				}
+			}
+			@keyframes fadeOut {
+				0% {
+					opacity: 1;
+				}
+				100% {
+					opacity: 0;
+				}
+			}
+			p img {
+				max-width: 100%;
+				height: auto;
+			}
 		</style>
 
 	</head>

examples/hello-mui/examples/info.html

@@ -26,10 +26,10 @@
 		</style>
 	</head>
 	<body>
-<!-- 		<header class="mui-bar mui-bar-nav">
+		<!--<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> -->
+		</header>-->
 		<div class="mui-content">
 			<div class="mui-content-padded">
 				<h4 style="margin-top:10px;">mui</h4>
@@ -48,7 +48,7 @@
 				</p>
 				<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
 				<h4>版本介绍</h4>
-				<p>当前版本为2.0.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
+				<p>当前版本为2.1.0，可到<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>;

examples/hello-mui/examples/listpicker.html

@@ -6,6 +6,7 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 		<title></title>
 		<link href="../css/mui.min.css" rel="stylesheet" />
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
 		<link href="../css/mui.listpicker.css" rel="stylesheet" />
 		<style>
 			html,
@@ -22,9 +23,6 @@
 			h5.mui-content-padded:first-child {
 				margin-top: 12px !important;
 			}
-			#userPicker {
-				height: 185px;
-			}
 			.mui-btn {
 				font-size: 16px;
 				padding: 8px;
@@ -46,6 +44,10 @@
 	</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">listpicker (选择列表)</h1>
+		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded">
 				<div id='userPicker' class="mui-listpicker">
@@ -73,7 +75,6 @@
 					<button data-method='setSelectedValue' data-args='zhz' class="mui-btn api-btn" type='button'>设置选中的值(智子)</button>
 				</p>
 				<div id='result' class="ui-alert"></div>
-
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
@@ -85,10 +86,10 @@
 					//
 					var userPicker = doc.getElementById('userPicker');
 					var result = doc.getElementById('result');
-					userPicker.setSelectedValue('ymt');
+					//userPicker.setSelectedValue('ymt');
 					userPicker.addEventListener('change', function(event) {
 						var index = event.detail.index;
-						console.log(index);
+						//console.log(index);
 					}, false);
 					var apiBtns = [].slice.call($('.api-btn'));
 					for (var i in apiBtns) {
@@ -104,6 +105,7 @@
 					}
 				});
 			})(mui, document);
+			
 		</script>
 	</body>
 

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

@@ -23,22 +23,20 @@
 				margin-left: -15px;
 				padding-right: 10px;
 			}
-			
-			.mui-off-canvas-right{
+			.mui-off-canvas-right {
 				color: #fff;
 			}
-			
-			.title{
+			.title {
 				margin: 35px 15px 10px;
 			}
-			  .title+.content{
+			.title+.content {
 				margin: 10px 15px 35px;
 				color: #bbb;
 				text-indent: 1em;
 				font-size: 14px;
 				line-height: 24px;
 			}
-			   input{
+			input {
 				color: #000;
 			}
 		</style>
@@ -53,9 +51,8 @@
 					<div class="mui-scroll">
 						<div class="title">侧滑导航</div>
 						<div class="content">
-							这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
-							1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置;
-							3.点击如下红色按钮<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
+							这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
+							<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
 							</span>。
 							<p style="margin: 10px 15px;">
 								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
@@ -108,13 +105,8 @@
 				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
 					<div class="mui-scroll">
 						<div class="mui-content-padded">
-							<p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中，
-								优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用；
-								当前页面为主界面，你可以在主界面放置任何内容；
-							打开侧滑菜单有多种方式：
-							1、在当前页面向左拖动；
-							2、点击页面右上角的<span class="mui-icon mui-icon-bars"></span> 图标；
-							3、通过JS API触发（例如点击如下蓝色按钮体验）；
+							<p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式： 1、在当前页面向左拖动； 2、点击页面右上角的
+								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
 								<span class="android-only">4、Android手机按menu键；</span>
 							</p>
 							<p style="padding: 5px 20px;margin-bottom: 5px;">
@@ -131,6 +123,10 @@
 								<label>主界面移动、菜单不动</label>
 								<input name="style" type="radio" checked="" value="main-move">
 							</div>
+							<div class="mui-input-row mui-radio">
+								<label>主界面、菜单移动缩放</label>
+								<input name="style" type="radio" value="main-move-scalable">
+							</div>
 							<div class="mui-input-row mui-radio">
 								<label>主界面不动、菜单移动</label>
 								<input name="style" type="radio" value="menu-move">
@@ -158,39 +154,42 @@
 			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
 			 //菜单容器
 			var offCanvasSide = document.getElementById("offCanvasSide");
-
 			 //Android暂不支持整体移动动画
-			if(!mui.os.android){
+			if (!mui.os.android) {
 				document.getElementById("move-togger").classList.remove('mui-hidden');
 				var spans = document.querySelectorAll('.android-only');
-				for (var i=0,len=spans.length;i<len;i++) {
+				for (var i = 0, len = spans.length; i < len; i++) {
 					spans[i].style.display = "none";
 				}
 			}
-			
 			 //移动效果是否为整体移动
 			var moveTogether = false;
 			 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
 			var classList = offCanvasWrapper[0].classList;
 			 //变换侧滑动画移动效果；
-			mui('.mui-input-group').on('change','input',function () {
-				if(this.checked){
-					switch (this.value){
-						case 'main-move':
+			mui('.mui-input-group').on('change', 'input', function() {
+				if (this.checked) {
 					classList.remove('mui-slide-in');
-							if(moveTogether){
+					classList.remove('mui-scalable');
+					switch (this.value) {
+						case 'main-move':
+							if (moveTogether) {
 								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
 								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
 								moveTogether = false;
 							}
 							break;
+						case 'main-move-scalable':
+							if (moveTogether) {
+								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
+								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
+							}
+							classList.add('mui-scalable');
+							break;
 						case 'menu-move':
 							classList.add('mui-slide-in');
 							break;
 						case 'all-move':
-							if(classList.contains('mui-slide-in')){
-								classList.remove('mui-slide-in');
-							}
 							moveTogether = true;
 							//整体滑动时，侧滑菜单在inner-wrap内
 							offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
@@ -201,8 +200,6 @@
 					offCanvasSide.setAttribute('style', '');
 				}
 			});
-
-
 			document.getElementById('offCanvasShow').addEventListener('tap', function() {
 				offCanvasWrapper.offCanvas('show');
 			});
@@ -212,7 +209,6 @@
 			 //主界面和侧滑菜单界面均支持区域滚动；
 			mui('#offCanvasSideScroll').scroll();
 			mui('#offCanvasContentScroll').scroll();
-
 			 //实现ios平台的侧滑关闭页面；
 			if (mui.os.plus && mui.os.ios) {
 				offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
@@ -228,4 +224,5 @@
 			}
 		</script>
 	</body>
+
 </html>
\ No newline at end of file

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

@@ -23,24 +23,22 @@
 				margin-left: -15px;
 				padding-right: 10px;
 			}
-			.mui-off-canvas-left{
+			.mui-off-canvas-left {
 				color: #fff;
 			}
-			
-			.title{
+			.title {
 				margin: 35px 15px 10px;
 			}
-			  .title+.content{
+			.title+.content {
 				margin: 10px 15px 35px;
 				color: #bbb;
 				text-indent: 1em;
 				font-size: 14px;
 				line-height: 24px;
 			}
-			  input{
+			input {
 				color: #000;
 			}
-
 		</style>
 	</head>
 
@@ -52,9 +50,8 @@
 					<div class="mui-scroll">
 						<div class="title">侧滑导航</div>
 						<div class="content">
-							这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
-							1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置;
-							3.点击如下红色按钮<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
+							这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
+							<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
 							</span>。
 							<p style="margin: 10px 15px;">
 								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
@@ -107,12 +104,8 @@
 				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
 					<div class="mui-scroll">
 						<div class="mui-content-padded">
-							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中，
-								优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用；
-								当前页面为主界面，你可以在主界面放置任何内容；
-								 打开侧滑菜单有多种方式： 1、在当前页面向右拖动； 2、点击页面左上角的
-								<span class="mui-icon mui-icon-bars"></span> 图标；
-								 3、通过JS API触发（例如点击如下蓝色按钮体验）；
+							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式： 1、在当前页面向右拖动； 2、点击页面左上角的
+								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
 								<span class="android-only">4、Android手机按menu键；</span>
 							</p>
 							<p style="padding: 5px 20px;margin-bottom: 5px;">
@@ -129,6 +122,10 @@
 								<label>主界面移动、菜单不动</label>
 								<input name="style" type="radio" checked="" value="main-move">
 							</div>
+							<div class="mui-input-row mui-radio">
+								<label>主界面、菜单移动缩放</label>
+								<input name="style" type="radio" value="main-move-scalable">
+							</div>
 							<div class="mui-input-row mui-radio">
 								<label>主界面不动、菜单移动</label>
 								<input name="style" type="radio" value="menu-move">
@@ -139,7 +136,6 @@
 							</div>
 						</form>
 
-						
 					</div>
 				</div>
 				<!-- off-canvas backdrop -->
@@ -155,17 +151,13 @@
 			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
 			 //菜单容器
 			var offCanvasSide = document.getElementById("offCanvasSide");
-
 			if (!mui.os.android) {
 				document.getElementById("move-togger").classList.remove('mui-hidden');
 				var spans = document.querySelectorAll('.android-only');
-				for (var i=0,len=spans.length;i<len;i++) {
+				for (var i = 0, len = spans.length; i < len; i++) {
 					spans[i].style.display = "none";
 				}
-
 			}
-
-
 			 //移动效果是否为整体移动
 			var moveTogether = false;
 			 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
@@ -173,21 +165,26 @@
 			 //变换侧滑动画移动效果；
 			mui('.mui-input-group').on('change', 'input', function() {
 				if (this.checked) {
+					classList.remove('mui-slide-in');
+					classList.remove('mui-scalable');
 					switch (this.value) {
 						case 'main-move':
-							classList.remove('mui-slide-in');
-							if(moveTogether){
+							if (moveTogether) {
+								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
+								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
+							}
+							break;
+						case 'main-move-scalable':
+							if (moveTogether) {
 								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
 								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
 							}
+							classList.add('mui-scalable');
 							break;
 						case 'menu-move':
 							classList.add('mui-slide-in');
 							break;
 						case 'all-move':
-							if(classList.contains('mui-slide-in')){
-								classList.remove('mui-slide-in');
-							}
 							moveTogether = true;
 							//整体滑动时，侧滑菜单在inner-wrap内
 							offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
@@ -198,8 +195,6 @@
 					offCanvasSide.setAttribute('style', '');
 				}
 			});
-
-
 			 //主界面‘显示侧滑菜单’按钮的点击事件
 			document.getElementById('offCanvasShow').addEventListener('tap', function() {
 				offCanvasWrapper.offCanvas('show');
@@ -221,4 +216,5 @@
 			}
 		</script>
 	</body>
+
 </html>
\ No newline at end of file

examples/hello-mui/list.html

@@ -425,9 +425,8 @@
 					}
 				}
 				//Android平台暂时使用slide-in-right动画
-				if(mui.os.android&&parseFloat(mui.os.version)<4.4){
+				if(parseFloat(mui.os.version)<4.4){
 					aniShow = "slide-in-right";
-					// document.getElementById('feedback').style.display = 'none';
 				}
 			}
 			//初始化，并预加载webview模式的选项卡			

js/input.plugin.js

@@ -38,7 +38,7 @@
 			this.sliderActionSelector = SELECTOR_TOOLTIP;
 		} else { //clear,speech,search
 			if (~this.options.actions.indexOf('clear')) {
-				this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR +' '+ CLASS_HIDDEN;
+				this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR + ' ' + CLASS_HIDDEN;
 				this.clearActionSelector = SELECTOR_ICON_CLOSE;
 			}
 			if (~this.options.actions.indexOf('speech')) { //only for 5+
@@ -119,7 +119,7 @@
 			var showTip = function() {
 				tooltip.classList.remove(CLASS_HIDDEN);
 				tooltipWidth = tooltipWidth || tooltip.offsetWidth;
-				var scaleWidth = Math.abs(element.value) / distince * width;
+				var scaleWidth = (width / distince) * Math.abs(element.value - element.min);
 				tooltip.style.left = (14 + offsetLeft + scaleWidth - tooltipWidth / 2) + 'px';
 				tooltip.innerText = element.value;
 				if (timer) {

js/mui.back.5+.js

@@ -6,7 +6,7 @@
  */
 (function($, window) {
 	if ($.os.plus && $.os.android) {
-		$.registerBack({
+		$.addBack({
 			name: 'mui',
 			index: 5,
 			handle: function() {
@@ -32,7 +32,7 @@
 	/**
 	 * 5+ back
 	 */
-	$.registerBack({
+	$.addBack({
 		name: '5+',
 		index: 10,
 		handle: function() {
@@ -101,7 +101,7 @@
 		}
 	});
 	//处理按键监听事件
-	$.registerInit({
+	$.addInit({
 		name: 'keyEventBind',
 		index: 1000,
 		handle: function() {

js/mui.back.js

@@ -10,13 +10,13 @@
 	 * @param {type} back
 	 * @returns {$.gestures}
 	 */
-	$.registerBack = function(back) {
-		return $.registerHandler('backs', back);
+	$.addBack = function(back) {
+		return $.addAction('backs', back);
 	};
 	/**
 	 * default
 	 */
-	$.registerBack({
+	$.addBack({
 		name: 'browser',
 		index: 100,
 		handle: function() {
@@ -36,9 +36,7 @@
 				return;
 			}
 		}
-		$.each($.backs, function(index, back) {
-			return !back.handle();
-		});
+		$.doAction('backs');
 	};
 	window.addEventListener('tap', function(e) {
 		var action = $.targets.action;

js/mui.class.scroll.js

@@ -28,11 +28,11 @@
 			this.stopped = false;
 
 			this.options = $.extend(true, {
-				scrollY: true,
-				scrollX: false,
-				startX: 0,
-				startY: 0,
-				indicators: true,
+				scrollY: true,//是否竖向滚动
+				scrollX: false,//是否横向滚动
+				startX: 0,//初始化时滚动至x
+				startY: 0,//初始化时滚动至y
+				indicators: true,//是否显示滚动条
 				stopPropagation: false,
 				hardwareAccelerated: true,
 				fixedBadAndorid: false,
@@ -41,15 +41,15 @@
 				},
 				momentum: true,
 
-				snap: false,
+				snap: false,//图片轮播，拖拽式选项卡
 
-				bounce: true,
-				bounceTime: 300,
-				bounceEasing: ease.circular.style,
+				bounce: true,//是否启用回弹
+				bounceTime: 300,//回弹动画时间
+				bounceEasing: ease.circular.style,//回弹动画曲线
 
 				directionLockThreshold: 5,
 
-				parallaxElement: false,
+				parallaxElement: false,//视差元素
 				parallaxRatio: 0.5
 			}, options);
 
@@ -353,7 +353,7 @@
 			} else {
 				isReturn = true;
 			}
-			if (isPreventDefault) {
+			if (this.moved || isPreventDefault) {
 				e.stopPropagation(); //阻止冒泡(scroll类嵌套)
 				detail.gesture && detail.gesture.preventDefault();
 			}

js/mui.class.scroll.pullrefresh.js

@@ -23,6 +23,7 @@
 			if (!this.loading) {
 				this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
 			}
+			e.preventDefault();
 			this._super(e);
 		},
 		_drag: function(e) {
@@ -112,12 +113,20 @@
 				}
 			}
 		},
-		refresh: function(isReset) {
-			if (isReset && this.finished) {
+		disablePullupToRefresh: function() {
+			this._initPullupRefresh();
+			this.bottomPocket.className = $.className('pull-bottom-pocket') + ' ' + CLASS_HIDDEN;
+			this.wrapper.removeEventListener('scrollbottom', this);
+		},
+		enablePullupToRefresh: function() {
 			this._initPullupRefresh();
 			this.bottomPocket.classList.remove(CLASS_HIDDEN);
 			this._setCaption(this.options.up.contentdown);
 			this.wrapper.addEventListener('scrollbottom', this);
+		},
+		refresh: function(isReset) {
+			if (isReset && this.finished) {
+				this.enablePullupToRefresh();
 				this.finished = false;
 			}
 			this._super();

js/mui.detect.5+.js

@@ -14,11 +14,11 @@
 			});
 			if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
 				this.os.stream = true;
-			}
 				$(function() {
 					document.body.classList.add($.className('plus-stream'));
 				});
 			}
 		}
+	}
 	detect.call($, navigator.userAgent);
 })(mui, document);
\ No newline at end of file

js/mui.gestures.drag.js

@@ -27,15 +27,15 @@
 
 				if (!session.drag) {
 					session.drag = true;
-					$.trigger(event.target, name + 'start', touch);
+					$.trigger(session.target, name + 'start', touch);
 				}
-				$.trigger(event.target, name, touch);
-				$.trigger(event.target, name + touch.direction, touch);
+				$.trigger(session.target, name, touch);
+				$.trigger(session.target, name + touch.direction, touch);
 				break;
 			case $.EVENT_END:
 			case $.EVENT_CANCEL:
 				if (session.drag && touch.isFinal) {
-					$.trigger(event.target, name + 'end', touch);
+					$.trigger(session.target, name + 'end', touch);
 				}
 				break;
 		}
@@ -43,7 +43,7 @@
 	/**
 	 * mui gesture drag
 	 */
-	$.registerGesture({
+	$.addGesture({
 		name: name,
 		index: 20,
 		handle: handle,

js/mui.gestures.flick.js

@@ -24,8 +24,8 @@
 					touch.flickTime = now - flickStartTime;
 					touch.flickDistanceX = touch.center.x - session.flickStart.x;
 					touch.flickDistanceY = touch.center.y - session.flickStart.y;
-					$.trigger(event.target, name, touch);
-					$.trigger(event.target, name + touch.direction, touch);
+					$.trigger(session.target, name, touch);
+					$.trigger(session.target, name + touch.direction, touch);
 				}
 				break;
 		}
@@ -34,7 +34,7 @@
 	/**
 	 * mui gesture flick
 	 */
-	$.registerGesture({
+	$.addGesture({
 		name: name,
 		index: 5,
 		handle: handle,

js/mui.gestures.hold.js

@@ -7,6 +7,7 @@
 (function($, name) {
 	var timer;
 	var handle = function(event, touch) {
+		var session = $.gestures.session;
 		var options = this.options;
 		switch (event.type) {
 			case $.EVENT_START:
@@ -14,7 +15,7 @@
 					timer && clearTimeout(timer);
 					timer = setTimeout(function() {
 						touch.hold = true;
-						$.trigger(event.target, name, touch);
+						$.trigger(session.target, name, touch);
 					}, options.holdTimeout);
 				}
 				break;
@@ -24,7 +25,7 @@
 			case $.EVENT_CANCEL:
 				if (timer) {
 					clearTimeout(timer) && (timer = null);
-					$.trigger(event.target, 'release', touch);
+					$.trigger(session.target, 'release', touch);
 				}
 				break;
 		}
@@ -32,7 +33,7 @@
 	/**
 	 * mui gesture hold
 	 */
-	$.registerGesture({
+	$.addGesture({
 		name: name,
 		index: 10,
 		handle: handle,

js/mui.gestures.js

@@ -10,6 +10,9 @@
 	$.EVENT_END = 'touchend';
 	$.EVENT_CANCEL = 'touchcancel';
 	$.EVENT_CLICK = 'click';
+	$.gestures = {
+		session: {}
+	};
 	/**
 	 * Gesture preventDefault
 	 * @param {type} e
@@ -32,8 +35,8 @@
 	 * @param {type} gesture
 	 * @returns {$.gestures}
 	 */
-	$.registerGesture = function(gesture) {
-		return $.registerHandler('gestures', gesture);
+	$.addGesture = function(gesture) {
+		return $.addAction('gestures', gesture);
 
 	};
 
@@ -96,11 +99,27 @@
 		}
 		return y > 0 ? 'up' : 'down';
 	};
-
+	/**
+	 * rotation
+	 * @param {Object} start
+	 * @param {Object} end
+	 */
 	var getRotation = function(start, end) {
 		var props = ['pageX', 'pageY'];
 		return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
 	};
+	/**
+	 * px per ms
+	 * @param {Object} deltaTime
+	 * @param {Object} x
+	 * @param {Object} y
+	 */
+	var getVelocity = function(deltaTime, x, y) {
+		return {
+			x: x / deltaTime || 0,
+			y: y / deltaTime || 0
+		};
+	};
 	/**
 	 * detect gestures
 	 * @param {type} event
@@ -111,7 +130,7 @@
 		if ($.gestures.stoped) {
 			return;
 		}
-		$.each($.gestures, function(index, gesture) {
+		$.doAction('gestures', function(index, gesture) {
 			if (!$.gestures.stoped) {
 				if ($.options.gestureConfig[gesture.name] !== false) {
 					gesture.handle(event, touch);
@@ -120,17 +139,10 @@
 		});
 	};
 	/**
-	 * px per ms
-	 * @param {Object} deltaTime
-	 * @param {Object} x
-	 * @param {Object} y
+	 * 暂时无用
+	 * @param {Object} node
+	 * @param {Object} parent
 	 */
-	var getVelocity = function(deltaTime, x, y) {
-		return {
-			x: x / deltaTime || 0,
-			y: y / deltaTime || 0
-		};
-	};
 	var hasParent = function(node, parent) {
 		while (node) {
 			if (node == parent) {
@@ -288,7 +300,7 @@
 			velocityX = v.x;
 			velocityY = v.y;
 			velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
-			direction = getDirection(deltaX, deltaY);
+			direction = getDirection(deltaX, deltaY) || last.direction;
 
 			session.lastInterval = touch;
 		} else {
@@ -303,6 +315,7 @@
 		touch.velocityY = velocityY;
 		touch.direction = direction;
 	};
+	var targetIds = {};
 	var getTouches = function(event, touch) {
 		var allTouches = $.slice.call(event.touches);
 
@@ -310,18 +323,9 @@
 
 		var targetTouches = [];
 		var changedTargetTouches = [];
-		$.gestures.session || ($.gestures.session = {
-			targetIds: {}
-		});
+
+		//当touchstart或touchmove且touches长度为1，直接获得all和changed
 		if ((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
-			if (type === $.EVENT_START) { //first
-				touch.isFirst = true;
-				$.gestures.touch = $.gestures.session = {
-					firstTarget: event.target,
-					targetIds: {}
-				};
-			}
-			var targetIds = $.gestures.session.targetIds;
 			targetIds[allTouches[0].identifier] = true;
 			targetTouches = allTouches;
 			changedTargetTouches = allTouches;
@@ -330,13 +334,12 @@
 			var i = 0;
 			var targetTouches = [];
 			var changedTargetTouches = [];
-			var targetIds = $.gestures.session.targetIds;
 			var changedTouches = $.slice.call(event.changedTouches);
 
 			touch.target = event.target;
-
+			var sessionTarget = $.gestures.session.target || event.target;
 			targetTouches = allTouches.filter(function(touch) {
-				return true; //return hasParent(touch.target, touch.firstTarget);
+				return hasParent(touch.target, sessionTarget);
 			});
 
 			if (type === $.EVENT_START) {
@@ -366,6 +369,12 @@
 		var touchesLength = targetTouches.length;
 		var changedTouchesLength = changedTargetTouches.length;
 
+		if (type === $.EVENT_START && touchesLength - changedTouchesLength === 0) { //first
+			touch.isFirst = true;
+			$.gestures.touch = $.gestures.session = {
+				target: event.target
+			};
+		}
 		touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
 
 		touch.touches = targetTouches;

js/mui.gestures.longtap.js

@@ -7,12 +7,13 @@
 (function($, name) {
 	var timer;
 	var handle = function(event, touch) {
+		var session = $.gestures.session;
 		var options = this.options;
 		switch (event.type) {
 			case $.EVENT_START:
 				clearTimeout(timer);
 				timer = setTimeout(function() {
-					$.trigger(event.target, name, touch);
+					$.trigger(session.target, name, touch);
 				}, options.holdTimeout);
 				break;
 			case $.EVENT_MOVE:
@@ -29,7 +30,7 @@
 	/**
 	 * mui gesture longtap
 	 */
-	$.registerGesture({
+	$.addGesture({
 		name: name,
 		index: 10,
 		handle: handle,

js/mui.gestures.pinch.js

@@ -18,30 +18,30 @@
 					}
 					if (!session.pinch) { //start
 						session.pinch = true;
-						$.trigger(event.target, name + 'start', touch);
+						$.trigger(session.target, name + 'start', touch);
 					}
-					$.trigger(event.target, name, touch);
+					$.trigger(session.target, name, touch);
 					var scale = touch.scale;
 					var rotation = touch.rotation;
 					var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
 					var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
 					if (scale > lastScale) { //out
 						lastScale = scale - scaleDiff;
-						$.trigger(event.target, name + 'out', touch);
+						$.trigger(session.target, name + 'out', touch);
 					} //in
 					else if (scale < lastScale) {
 						lastScale = scale + scaleDiff;
-						$.trigger(event.target, name + 'in', touch);
+						$.trigger(session.target, name + 'in', touch);
 					}
 					if (Math.abs(rotation) > options.minRotationAngle) {
-						$.trigger(event.target, 'rotate', touch);
+						$.trigger(session.target, 'rotate', touch);
 					}
 				}
 				break;
 			case $.EVENT_END:
 			case $.EVENT_CANCEL:
 				if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
-					$.trigger(event.target, name + 'end', touch);
+					$.trigger(session.target, name + 'end', touch);
 				}
 				break;
 		}
@@ -49,7 +49,7 @@
 	/**
 	 * mui gesture pinch
 	 */
-	$.registerGesture({
+	$.addGesture({
 		name: name,
 		index: 10,
 		handle: handle,

js/mui.gestures.swipe.js

@@ -6,19 +6,21 @@
  */
 (function($, name) {
 	var handle = function(event, touch) {
+		var session = $.gestures.session;
 		if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
 			var options = this.options;
+			//TODO 后续根据velocity计算
 			if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
 				touch.swipe = true;
-				$.trigger(event.target, name, touch);
-				$.trigger(event.target, name + touch.direction, touch);
+				$.trigger(session.target, name, touch);
+				$.trigger(session.target, name + touch.direction, touch);
 			}
 		}
 	};
 	/**
 	 * mui gesture swipe
 	 */
-	$.registerGesture({
+	$.addGesture({
 		name: name,
 		index: 10,
 		handle: handle,

js/mui.gestures.tap.js

@@ -8,13 +8,14 @@
 	var lastTarget;
 	var lastTapTime;
 	var handle = function(event, touch) {
+		var session = $.gestures.session;
 		var options = this.options;
 		switch (event.type) {
 			case $.EVENT_END:
 				if (!touch.isFinal) {
 					return;
 				}
-				var target = event.target;
+				var target = session.target;
 				if (!target || (target.disabled || target.classList.contains($.className('disabled')))) {
 					return;
 				}
@@ -29,7 +30,7 @@
 					}
 					$.trigger(target, name, touch);
 					lastTapTime = $.now();
-					lastTarget = event.target;
+					lastTarget = target;
 				}
 				break;
 		}
@@ -37,7 +38,7 @@
 	/**
 	 * mui gesture tap
 	 */
-	$.registerGesture({
+	$.addGesture({
 		name: name,
 		index: 30,
 		handle: handle,

js/mui.init.5+.js

@@ -86,7 +86,11 @@
 	 */
 	$.fire = function(webview, eventType, data) {
 		if (webview) {
-			webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c") + "')");
+			data = data || {};
+			if ($.isPlainObject(data)) {
+				data = JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c");
+			}
+			webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + data + "')");
 		}
 	};
 	/**
@@ -97,7 +101,9 @@
 	 */
 	$.receive = function(eventType, data) {
 		if (eventType) {
+			try {
 				data = JSON.parse(data);
+			} catch (e) {}
 			$.trigger(document, eventType, data);
 		}
 	};
@@ -247,7 +253,7 @@
 				}
 
 				//之前没有，那就新创建	
-				if(!webview){
+				if (!webview) {
 					webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
 						preload: true
 					}, options.extras));
@@ -389,7 +395,7 @@
 	$.plusReady(function() {
 		$.currentWebview = plus.webview.currentWebview();
 	});
-	$.registerInit({
+	$.addInit({
 		name: '5+',
 		index: 100,
 		handle: function() {

js/mui.init.js

@@ -44,7 +44,7 @@
 		isInitialized = true;
 		$.options = $.extend(true, $.global, options || {});
 		$.ready(function() {
-			$.each($.inits, function(index, init) {
+			$.doAction('inits', function(index, init) {
 				var isInit = !!(!inits[init.name] || init.repeat);
 				if (isInit) {
 					init.handle.call($);
@@ -59,8 +59,8 @@
 	 * 增加初始化执行流程
 	 * @param {function} init
 	 */
-	$.registerInit = function(init) {
-		return $.registerHandler('inits', init);
+	$.addInit = function(init) {
+		return $.addAction('inits', init);
 	};
 	$(function() {
 		var classList = document.body.classList;

js/mui.init.pullrefresh.js

@@ -4,7 +4,7 @@
  * @returns {undefined}
  */
 (function($) {
-	$.registerInit({
+	$.addInit({
 		name: 'pullrefresh',
 		index: 1000,
 		handle: function() {

js/mui.js

@@ -320,19 +320,28 @@ var mui = (function(document, undefined) {
 		}
 		return result;
 	};
-
-	$.registerHandler = function(type, handler) {
-		var handlers = $[type];
-		if (!handlers) {
-			handlers = [];
-		}
-		handler.index = handler.index || 1000;
-		handlers.push(handler);
-		handlers.sort(function(a, b) {
+	$.hooks = {};
+	$.addAction = function(type, hook) {
+		var hooks = $.hooks[type];
+		if (!hooks) {
+			hooks = [];
+		}
+		hook.index = hook.index || 1000;
+		hooks.push(hook);
+		hooks.sort(function(a, b) {
 			return a.index - b.index;
 		});
-		$[type] = handlers;
-		return $[type];
+		$.hooks[type] = hooks;
+		return $.hooks[type];
+	};
+	$.doAction = function(type, callback) {
+		if ($.isFunction(callback)) { //指定了callback
+			$.each($.hooks[type], callback);
+		} else { //未指定callback，直接执行
+			$.each($.hooks[type], function(index, hook) {
+				return !hook.handle();
+			});
+		}
 	};
 	/**
 	 * setTimeout封装

js/mui.offcanvas.js

@@ -9,7 +9,7 @@
 (function($, window, document, name) {
 	var CLASS_OFF_CANVAS_LEFT = $.className('off-canvas-left');
 	var CLASS_OFF_CANVAS_RIGHT = $.className('off-canvas-right');
-	var CLASS_ACTION_BACKDEOP = $.className('off-canvas-backdrop');
+	var CLASS_ACTION_BACKDROP = $.className('off-canvas-backdrop');
 	var CLASS_OFF_CANVAS_WRAP = $.className('off-canvas-wrap');
 
 	var CLASS_SLIDE_IN = $.className('slide-in');
@@ -28,7 +28,9 @@
 			this.classList = this.wrapper.classList;
 			if (this.scroller) {
 				this.options = $.extend(true, {
-					dragThresholdX: 10
+					dragThresholdX: 10,
+					scale: 0.8,
+					opacity: 0.1
 				}, options);
 				document.body.classList.add($.className('fullscreen')); //fullscreen
 				this.refresh();
@@ -38,6 +40,7 @@
 		refresh: function(offCanvas) {
 			//			offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
 			this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
+			this.scalable = this.classList.contains($.className('scalable')) && !this.slideIn;
 			this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
 			//			!offCanvas && this.scroller.classList.remove(CLASS_TRANSITIONING);
 			//			!offCanvas && this.scroller.setAttribute('style', '');
@@ -69,7 +72,7 @@
 				//				this.offCanvasLeft.classList.remove(CLASS_ACTIVE);
 				//				this.offCanvasLeft.setAttribute('style', '');
 			}
-			this.backdrop = this.scroller.querySelector('.' + CLASS_ACTION_BACKDEOP);
+			this.backdrop = this.scroller.querySelector('.' + CLASS_ACTION_BACKDROP);
 
 			this.options.dragThresholdX = this.options.dragThresholdX || 10;
 
@@ -103,24 +106,51 @@
 					if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
 						if (this.slideIn) {
 							if (this.classList.contains(CLASS_ACTIVE)) {
-								this.scroller = this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE) ? this.offCanvasRight : this.offCanvasLeft;
+								if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
+									this.offCanvas = this.offCanvasRight;
+									this.offCanvasWidth = this.offCanvasRightWidth;
+								} else {
+									this.offCanvas = this.offCanvasLeft;
+									this.offCanvasWidth = this.offCanvasLeftWidth;
+								}
 							} else {
 								if (detail.direction === 'left' && this.offCanvasRight) {
-									this.scroller = this.offCanvasRight;
+									this.offCanvas = this.offCanvasRight;
+									this.offCanvasWidth = this.offCanvasRightWidth;
 								} else if (detail.direction === 'right' && this.offCanvasLeft) {
-									this.scroller = this.offCanvasLeft;
+									this.offCanvas = this.offCanvasLeft;
+									this.offCanvasWidth = this.offCanvasLeftWidth;
 								} else {
 									this.scroller = null;
 								}
 							}
+						} else {
+							if (this.classList.contains(CLASS_ACTIVE)) {
+								if (detail.direction === 'left') {
+									this.offCanvas = this.offCanvasLeft;
+									this.offCanvasWidth = this.offCanvasLeftWidth;
+								} else {
+									this.offCanvas = this.offCanvasRight;
+									this.offCanvasWidth = this.offCanvasRightWidth;
 								}
-						if (this.scroller) {
+							} else {
+								if (detail.direction === 'right') {
+									this.offCanvas = this.offCanvasLeft;
+									this.offCanvasWidth = this.offCanvasLeftWidth;
+								} else {
+									this.offCanvas = this.offCanvasRight;
+									this.offCanvasWidth = this.offCanvasRightWidth;
+								}
+							}
+						}
+						if (this.offCanvas) {
 							this.startX = this.lastX;
 							this.isDragging = true;
 
 							$.gestures.session.lockDirection = true; //锁定方向
 							$.gestures.session.startDirection = detail.direction;
 
+							this.offCanvas.classList.remove(CLASS_TRANSITIONING);
 							this.scroller.classList.remove(CLASS_TRANSITIONING);
 							this.offsetX = this.getTranslateX();
 							this._initOffCanvasVisible();
@@ -137,10 +167,10 @@
 						var detail = e.detail;
 						var direction = detail.direction;
 						this.isDragging = false;
+						this.offCanvas.classList.add(CLASS_TRANSITIONING);
 						this.scroller.classList.add(CLASS_TRANSITIONING);
 						var ratio = 0;
 						var x = this.getTranslateX();
-
 						if (!this.slideIn) {
 							if (x >= 0) {
 								ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0;
@@ -317,7 +347,7 @@
 						}
 					}
 				} else {
-					if (this.scroller.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
+					if (this.offCanvas.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
 						if (x < 0) {
 							this.setTranslateX(0);
 							return;
@@ -343,12 +373,35 @@
 		},
 		setTranslateX: $.animationFrame(function(x) {
 			if (this.scroller) {
+				if (this.scalable && this.offCanvas.parentNode === this.wrapper) {
+					var percent = Math.abs(x) / this.offCanvasWidth;
+					var zoomOutScale = 1 - (1 - this.options.scale) * percent;
+					var zoomInScale = this.options.scale + (1 - this.options.scale) * percent;
+					var zoomOutOpacity = 1 - (1 - this.options.opacity) * percent;
+					var zoomInOpacity = this.options.opacity + (1 - this.options.opacity) * percent;
+					if (this.offCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT)) {
+						this.offCanvas.style.webkitTransformOrigin = '-100%';
+						this.scroller.style.webkitTransformOrigin = 'left';
+					} else {
+						this.offCanvas.style.webkitTransformOrigin = '200%';
+						this.scroller.style.webkitTransformOrigin = 'right';
+					}
+					this.offCanvas.style.opacity = zoomInOpacity;
+					this.offCanvas.style.webkitTransform = 'translate3d(0,0,0) scale(' + zoomInScale + ')';
+					this.scroller.style.webkitTransform = 'translate3d(' + x + 'px,0,0) scale(' + zoomOutScale + ')';
+				} else {
+					if (this.slideIn) {
+						this.offCanvas.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
+					} else {
 						this.scroller.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
 					}
+				}
+			}
 		}),
 		getTranslateX: function() {
-			if (this.scroller) {
-				var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
+			if (this.offCanvas) {
+				var scroller = this.slideIn ? this.offCanvas : this.scroller;
+				var result = $.parseTranslateMatrix($.getStyles(scroller, 'webkitTransform'));
 				return (result && result.x) || 0;
 			}
 			return 0;
@@ -377,10 +430,11 @@
 		},
 		close: function() {
 			this._initOffCanvasVisible();
-			if (this.slideIn) {
-				this.scroller = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
-			}
+			this.offCanvas = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
+			this.offCanvasWidth = this.offCanvas.offsetWidth;
 			if (this.scroller) {
+				this.offCanvas.offsetHeight;
+				this.offCanvas.classList.add(CLASS_TRANSITIONING);
 				this.scroller.classList.add(CLASS_TRANSITIONING);
 				this.openPercentage(0);
 			}
@@ -393,10 +447,16 @@
 			if (!direction) {
 				direction = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT) ? 'right' : 'left';
 			}
-			if (this.slideIn) {
-				this.scroller = direction === 'right' ? this.offCanvasRight : this.offCanvasLeft;
+			if (direction === 'right') {
+				this.offCanvas = this.offCanvasRight;
+				this.offCanvasWidth = this.offCanvasRightWidth;
+			} else {
+				this.offCanvas = this.offCanvasLeft;
+				this.offCanvasWidth = this.offCanvasLeftWidth;
 			}
 			if (this.scroller) {
+				this.offCanvas.offsetHeight;
+				this.offCanvas.classList.add(CLASS_TRANSITIONING);
 				this.scroller.classList.add(CLASS_TRANSITIONING);
 				this.openPercentage(direction === 'left' ? 100 : -100);
 			}

js/pullrefresh.5+.js

@@ -201,16 +201,24 @@
 				}
 			}
 		},
-		scrollTo: function(x, y, time) {
-			$.scrollTo(x, y, time);
+		disablePullupToRefresh: function() {
+			this._initPullupRefresh();
+			this.bottomPocket.className = $.className('pull-bottom-pocket') + ' ' + CLASS_HIDDEN;
+			window.removeEventListener('dragup', this);
 		},
-		refresh: function(isReset) {
-			if (isReset && this.finished) {
+		enablePullupToRefresh: function() {
 			this._initPullupRefresh();
 			this.bottomPocket.classList.remove(CLASS_HIDDEN);
 			this.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
 			this.pullCaption.innerHTML = this.options.up.contentdown;
 			window.addEventListener('dragup', this);
+		},
+		scrollTo: function(x, y, time) {
+			$.scrollTo(x, y, time);
+		},
+		refresh: function(isReset) {
+			if (isReset && this.finished) {
+				this.enablePullupToRefresh();
 				this.finished = false;
 			}
 		}

package.json

 {
   "name": "mui",
   "description": "Build mobile apps with simple HTML, CSS, and JS components.",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "keywords": [
     "css",
     "fonts",

sass/bars.scss

@@ -307,3 +307,6 @@
     margin: 0 auto;
     width: auto;
 }
+.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}segmented-control {
+    top: 0px;
+}

sass/fullscreen.scss

@@ -6,7 +6,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    .#{$namespace}slider-group{
+    &.#{$namespace}slider .#{$namespace}slider-group{
         height:100%;
         
     }
@@ -17,7 +17,7 @@
         bottom:0;
         position: absolute;
     }
-    .#{$namespace}slider-item>a{
+    &.#{$namespace}slider .#{$namespace}slider-item>a{
         top: 50%;
         transform: translateY(-50%);
         -webkit-transform: translateY(-50%);

sass/off-canvas.scss

@@ -2,6 +2,7 @@
 .#{$namespace}off-canvas-wrap{
     .#{$namespace}bar{//fix android
        position: absolute!important;
+       @include transform(translate3d(0, 0, 0));//fix ios(offcanvas scalable的时候,bar会消失)
     }
    } 
 //}
@@ -82,3 +83,35 @@
 .#{$namespace}off-canvas-right {
     right: 0;
 }
+
+//scalable
+.#{$namespace}off-canvas-wrap:not(.#{$namespace}slide-in).#{$namespace}scalable {
+    background-color: #333;
+    >.#{$namespace}off-canvas-left,>.#{$namespace}off-canvas-right{
+        width: 80%;
+        @include transform(scale(0.8));
+        opacity: 0.1;
+        &.#{$namespace}transitioning{
+            -webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease;
+            transition: transform 200ms ease, opacity 200ms ease;
+        }
+    }
+    >.#{$namespace}off-canvas-left{
+        -webkit-transform-origin: -100%;
+        transform-origin: -100%;
+    }
+    >.#{$namespace}off-canvas-right{
+        -webkit-transform-origin: 200%;
+        transform-origin: 200%;
+    }
+    &.#{$namespace}active{
+         >.#{$namespace}inner-wrap{
+             @include transform(scale(0.8));
+         }
+         >.#{$namespace}off-canvas-left,>.#{$namespace}off-canvas-right{
+             @include transform(scale(1));
+             opacity: 1;
+         }
+    }
+    
+}
\ No newline at end of file

sass/os.scss

@@ -4,9 +4,15 @@
 .#{$namespace}plus-hidden,.#{$namespace}wechat-hidden{
     display: block!important;
 }
+.#{$namespace}tab-item.#{$namespace}plus-hidden,.#{$namespace}tab-item.#{$namespace}wechat-hidden{
+    display: table-cell!important;
+}
 .#{$namespace}plus .#{$namespace}plus-visible,.#{$namespace}wechat .#{$namespace}wechat-visible{
 	display: block!important;
 }
+.#{$namespace}plus .#{$namespace}tab-item.#{$namespace}plus-visible,.#{$namespace}wechat .#{$namespace}tab-item.#{$namespace}wechat-visible{
+    display: table-cell!important;
+}
 .#{$namespace}plus .#{$namespace}plus-hidden,.#{$namespace}wechat .#{$namespace}wechat-hidden{
     display: none!important;
 }

sass/push.scss

@@ -33,7 +33,6 @@
 }
 
 // Add chevrons to elements
-.#{$namespace}navigate-left,
 .#{$namespace}navigate-right,
 .#{$namespace}push-left,
 .#{$namespace}push-right {
@@ -51,7 +50,6 @@
   }
 }
 
-.#{$namespace}navigate-left:after,
 .#{$namespace}push-left:after {
   left: 15px;
   content: '\e582';

sass/table-views.scss

@@ -335,7 +335,6 @@
     }
 
     // If the cell has a chevron, give some more room.
-    .#{$namespace}navigate-left,
     .#{$namespace}navigate-right,
     .#{$namespace}push-left,
     .#{$namespace}push-right {