Merge remote-tracking branch 'dcloudio/master'

dist/css/mui.css

 /*!
  * =====================================================
- * Mui v2.2.0 (https://github.com/dcloudio/mui)
+ * Mui v2.3.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 
@@ -574,6 +574,29 @@ p
     color: #8f8f94;
 }
 
+.mui-row:before, .mui-row:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-row:after
+{
+    clear: both;
+}
+
+.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
+{
+    position: relative;
+
+    min-height: 1px;
+}
+
+.mui-row > [class*='mui-col-']
+{
+    float: left;
+}
+
 .mui-col-xs-12
 {
     width: 100%;
@@ -1867,14 +1890,14 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
     border-bottom: 0;
     border-radius: 6px;
 }
-.mui-card .mui-table-view .mui-table-view-divider:first-child
+.mui-card .mui-table-view .mui-table-view-divider:first-child, .mui-card .mui-table-view .mui-table-view-cell:first-child
 {
     top: 0;
 
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 }
-.mui-card .mui-table-view .mui-table-view-divider:last-child
+.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child
 {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
@@ -2548,20 +2571,36 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 
 .mui-grid-view.mui-grid-9
 {
-    padding: 1px 0 1px 0;
-    padding-right: 0;
+    margin: 0;
+    padding: 0;
 
+    border-top: 1px solid #eee;
+    border-left: 1px solid #eee;
     background-color: #f2f2f2;
 }
+.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-grid-view.mui-grid-9:after
+{
+    clear: both;
+}
+.mui-grid-view.mui-grid-9:after
+{
+    position: static;
+}
 .mui-grid-view.mui-grid-9 .mui-table-view-cell
 {
-    margin: -1px 0 0 -1px;
+    margin: 0;
     padding: 11px 15px;
 
     vertical-align: top;
 
-    border-top: 1px solid #eee;
-    border-left: 1px solid #eee;
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
 }
 .mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
 {
@@ -3232,6 +3271,20 @@ select:focus
 
     -webkit-touch-callout: none;
 }
+.mui-segmented-control.mui-segmented-control-vertical
+{
+    border-collapse: collapse;
+
+    border-width: 0;
+    border-radius: 0;
+}
+.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
+{
+    display: block;
+
+    border-bottom: 1px solid #c8c7cc;
+    border-left-width: 0;
+}
 .mui-segmented-control.mui-scroll-wrapper
 {
     height: 38px;
@@ -3287,6 +3340,14 @@ select:focus
     border: 0;
     border-radius: 0;
 }
+.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
+{
+    border-bottom: 1px solid #c8c7cc;
+}
+.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
+{
+    border-bottom: 1px solid #c8c7cc;
+}
 .mui-segmented-control.mui-segmented-control-inverted .mui-control-item
 {
     color: inherit;

dist/js/mui.js

 /*!
  * =====================================================
- * Mui v2.2.0 (https://github.com/dcloudio/mui)
+ * Mui v2.3.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 /**
@@ -1593,7 +1593,7 @@ var mui = (function(document, undefined) {
 					return;
 				}
 				var target = session.target;
-				if (!target || (target.disabled || target.classList.contains('mui-disabled'))) {
+				if (!target || (target.disabled || (target.classList && target.classList.contains('mui-disabled')))) {
 					return;
 				}
 				if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
@@ -1758,6 +1758,7 @@ var mui = (function(document, undefined) {
 			case $.EVENT_END:
 			case $.EVENT_CANCEL:
 				if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
+					session.pinch = false;
 					$.trigger(session.target, name + 'end', touch);
 				}
 				break;
@@ -1925,7 +1926,7 @@ var mui = (function(document, undefined) {
 	 * @returns {Object}
 	 */
 	$.showOptions = function(options) {
-		return $.extend(defaultShow, options);
+		return $.extend(true,{},defaultShow, options);
 	};
 	/**
 	 * 窗口默认配置
@@ -3192,28 +3193,28 @@ var mui = (function(document, undefined) {
 			this.stopped = false;
 
 			this.options = $.extend(true, {
-				scrollY: true,//是否竖向滚动
-				scrollX: false,//是否横向滚动
-				startX: 0,//初始化时滚动至x
-				startY: 0,//初始化时滚动至y
-				indicators: true,//是否显示滚动条
+				scrollY: true, //是否竖向滚动
+				scrollX: false, //是否横向滚动
+				startX: 0, //初始化时滚动至x
+				startY: 0, //初始化时滚动至y
+				indicators: true, //是否显示滚动条
 				stopPropagation: false,
 				hardwareAccelerated: true,
 				fixedBadAndorid: false,
 				preventDefaultException: {
-					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
+					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
 				},
 				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);
 
@@ -3439,14 +3440,15 @@ var mui = (function(document, undefined) {
 			}
 		},
 		_start: function(e) {
+			e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
 			this.moved = this.needReset = false;
 			this._transitionTime();
-			if (this.isInTransition && this.moved) {
+			if (this.isInTransition) {
 				this.needReset = true;
 				this.isInTransition = false;
 				var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
 				this.setTranslate(Math.round(pos.x), Math.round(pos.y));
-				this.resetPosition(); //reset
+				//				this.resetPosition(); //reset
 				$.trigger(this.scroller, 'scrollend', this);
 				//				e.stopPropagation();
 				e.preventDefault();
@@ -4086,7 +4088,6 @@ var mui = (function(document, undefined) {
 			if (!this.loading) {
 				this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
 			}
-			e.preventDefault();
 			this._super(e);
 		},
 		_drag: function(e) {
@@ -4899,13 +4900,24 @@ var mui = (function(document, undefined) {
 				this.options = $.extend(true, {
 					dragThresholdX: 10,
 					scale: 0.8,
-					opacity: 0.1
+					opacity: 0.1,
+					preventDefaultException: {
+						tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
+					},
 				}, options);
 				document.body.classList.add('mui-fullscreen'); //fullscreen
 				this.refresh();
 				this.initEvent();
 			}
 		},
+		_preventDefaultException: function(el, exceptions) {
+			for (var i in exceptions) {
+				if (exceptions[i].test(el[i])) {
+					return true;
+				}
+			}
+			return false;
+		},
 		refresh: function(offCanvas) {
 			//			offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
 			this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
@@ -4954,10 +4966,7 @@ var mui = (function(document, undefined) {
 		handleEvent: function(e) {
 			switch (e.type) {
 				case 'touchstart':
-					var tagName = e.target && e.target.tagName;
-					if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
-						e.preventDefault();
-					}
+					e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
 					break;
 				case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
 					if (e.target === this.scroller) {
@@ -4974,6 +4983,7 @@ var mui = (function(document, undefined) {
 					}
 					if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
 						if (this.slideIn) {
+							this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
 							if (this.classList.contains(CLASS_ACTIVE)) {
 								if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
 									this.offCanvas = this.offCanvasRight;
@@ -5012,7 +5022,7 @@ var mui = (function(document, undefined) {
 								}
 							}
 						}
-						if (this.offCanvas) {
+						if (this.offCanvas && this.scroller) {
 							this.startX = this.lastX;
 							this.isDragging = true;
 
@@ -5787,6 +5797,7 @@ var mui = (function(document, undefined) {
 
 	var CLASS_CONTROL_ITEM = 'mui-control-item';
 	var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
+	var CLASS_SEGMENTED_CONTROL_VERTICAL = 'mui-segmented-control-vertical';
 	var CLASS_CONTROL_CONTENT = 'mui-control-content';
 	var CLASS_TAB_BAR = 'mui-bar-tab';
 	var CLASS_TAB_ITEM = 'mui-tab-item';
@@ -5794,7 +5805,11 @@ var mui = (function(document, undefined) {
 
 	var handle = function(event, target) {
 		if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
+			if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
+				//vertical 如果preventDefault会导致无法滚动
+			} else {
 				event.preventDefault(); //stop hash change				
+			}
 			//			if (target.hash) {
 			return target;
 			//			}
@@ -5844,7 +5859,6 @@ var mui = (function(document, undefined) {
 		if (!targetTab.hash) {
 			return;
 		}
-
 		targetBody = document.getElementById(targetTab.hash.replace('#', ''));
 
 		if (!targetBody) {
@@ -6476,17 +6490,21 @@ var mui = (function(document, undefined) {
 			var input = cell.querySelector('input[type=radio]');
 			if (input) {
 				//				input.click();
+				if (!input.disabled && !input.readOnly) {
 					input.checked = !input.checked;
 					$.trigger(input, 'change');
 				}
+			}
 		} else if (classList.contains('mui-checkbox')) {
 			var input = cell.querySelector('input[type=checkbox]');
 			if (input) {
 				//				input.click();
+				if (!input.disabled && !input.readOnly) {
 					input.checked = !input.checked;
 					$.trigger(input, 'change');
 				}
 			}
+		}
 	};
 	//fixed hashchange(android)
 	window.addEventListener($.EVENT_CLICK, function(e) {
@@ -6958,16 +6976,15 @@ var mui = (function(document, undefined) {
 	var inputClassName = 'mui-numbox-input';
 
 	var Numbox = $.Numbox = $.Class.extend({
+		/**
+		 * 构造函数
+		 **/
 		init: function(holder, options) {
 			var self = this;
 			if (!holder) {
 				throw "构造 numbox 时缺少容器元素";
 			}
 			self.holder = holder;
-			//避免重复初始化开始
-			if (self.holder.__numbox_inited) return;
-			self.holder.__numbox_inited = true;
-			//避免重复初始化结束
 			options = options || {};
 			options.step = parseInt(options.step || 1);
 			self.options = options;
@@ -6977,6 +6994,9 @@ var mui = (function(document, undefined) {
 			self.checkValue();
 			self.initEvent();
 		},
+		/**
+		 * 初始化事件绑定
+		 **/
 		initEvent: function() {
 			var self = this;
 			self.plus.addEventListener(tapEventName, function(event) {
@@ -6993,6 +7013,9 @@ var mui = (function(document, undefined) {
 				self.checkValue();
 			});
 		},
+		/**
+		 * 验证当前值是法合法
+		 **/
 		checkValue: function() {
 			var self = this;
 			var val = self.input.value;
@@ -7015,28 +7038,38 @@ var mui = (function(document, undefined) {
 				}
 				self.input.value = val;
 			}
+		},
+		/**
+		 * 更新选项
+		 **/
+		setOption: function(name, value) {
+			var self = this;
+			self.options[name] = value;
 		}
 	});
 
 	$.fn.numbox = function(options) {
+		var instanceArray = [];
 		//遍历选择的元素
 		this.each(function(i, element) {
+			if (element.numbox) return;
 			if (options) {
-				new Numbox(element, options);
+				element.numbox = new Numbox(element, options);
 			} else {
 				var optionsText = element.getAttribute('data-numbox-options');
 				var options = optionsText ? JSON.parse(optionsText) : {};
 				options.step = element.getAttribute('data-numbox-step') || options.step;
 				options.min = element.getAttribute('data-numbox-min') || options.min;
 				options.max = element.getAttribute('data-numbox-max') || options.max;
-				new Numbox(element, options);
+				element.numbox = new Numbox(element, options);
 			}
 		});
-		return this;
+		return this[0] ? this[0].numbox : null;
 	}
 
 	//自动处理 class='mui-locker' 的 dom
 	$.ready(function() {
 		$('.' + holderClassName).numbox();
 	});
+
 }(mui))
\ No newline at end of file

examples/hello-mui/css/mui.css

 /*!
  * =====================================================
- * Mui v2.2.0 (https://github.com/dcloudio/mui)
+ * Mui v2.3.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 
@@ -574,6 +574,29 @@ p
     color: #8f8f94;
 }
 
+.mui-row:before, .mui-row:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-row:after
+{
+    clear: both;
+}
+
+.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
+{
+    position: relative;
+
+    min-height: 1px;
+}
+
+.mui-row > [class*='mui-col-']
+{
+    float: left;
+}
+
 .mui-col-xs-12
 {
     width: 100%;
@@ -1867,14 +1890,14 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
     border-bottom: 0;
     border-radius: 6px;
 }
-.mui-card .mui-table-view .mui-table-view-divider:first-child
+.mui-card .mui-table-view .mui-table-view-divider:first-child, .mui-card .mui-table-view .mui-table-view-cell:first-child
 {
     top: 0;
 
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 }
-.mui-card .mui-table-view .mui-table-view-divider:last-child
+.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child
 {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
@@ -2548,20 +2571,36 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 
 .mui-grid-view.mui-grid-9
 {
-    padding: 1px 0 1px 0;
-    padding-right: 0;
+    margin: 0;
+    padding: 0;
 
+    border-top: 1px solid #eee;
+    border-left: 1px solid #eee;
     background-color: #f2f2f2;
 }
+.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
+{
+    display: table;
+
+    content: ' ';
+}
+.mui-grid-view.mui-grid-9:after
+{
+    clear: both;
+}
+.mui-grid-view.mui-grid-9:after
+{
+    position: static;
+}
 .mui-grid-view.mui-grid-9 .mui-table-view-cell
 {
-    margin: -1px 0 0 -1px;
+    margin: 0;
     padding: 11px 15px;
 
     vertical-align: top;
 
-    border-top: 1px solid #eee;
-    border-left: 1px solid #eee;
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
 }
 .mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
 {
@@ -3232,6 +3271,20 @@ select:focus
 
     -webkit-touch-callout: none;
 }
+.mui-segmented-control.mui-segmented-control-vertical
+{
+    border-collapse: collapse;
+
+    border-width: 0;
+    border-radius: 0;
+}
+.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
+{
+    display: block;
+
+    border-bottom: 1px solid #c8c7cc;
+    border-left-width: 0;
+}
 .mui-segmented-control.mui-scroll-wrapper
 {
     height: 38px;
@@ -3287,6 +3340,14 @@ select:focus
     border: 0;
     border-radius: 0;
 }
+.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
+{
+    border-bottom: 1px solid #c8c7cc;
+}
+.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
+{
+    border-bottom: 1px solid #c8c7cc;
+}
 .mui-segmented-control.mui-segmented-control-inverted .mui-control-item
 {
     color: inherit;

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

@@ -44,8 +44,8 @@
 	position: relative;
 	width: 100%;
 	height: 200px;
-	border-top: solid 1px #eee;
-	background-color: #fff;
+	/*border-top: solid 1px #eee;
+	background-color: #fff;*/
 }
 .mui-ios .mui-dtpicker-body {
 	-webkit-perspective: 1200px;
@@ -60,9 +60,10 @@
 	padding: 8px;
 	text-align: center;
 	border-top: solid 1px #ddd;
-	background-color: #fafafa;
+	background-color: #f0f0f0;
+	border-bottom: solid 1px #ccc;
 }
-.mui-dtpicker .mui-listpicker {
+.mui-dtpicker .mui-picker {
 	width: 20%;
 	height: 100%;
 	margin: 0px;
@@ -71,17 +72,17 @@
 }
 /*年月日时分*/
 
-[data-type="datetime"] .mui-listpicker,
+[data-type="datetime"] .mui-picker,
 [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;
+	border-left: dotted 1px #ccc;
 }
 /*年月日*/
 
-[data-type="date"] .mui-listpicker,
+[data-type="date"] .mui-picker,
 [data-type="date"] .mui-dtpicker-title h5 {
 	width: 33.3%;
 }
@@ -93,7 +94,7 @@
 }
 /*年月日时*/
 
-[data-type="hour"] .mui-listpicker,
+[data-type="hour"] .mui-picker,
 [data-type="hour"] .mui-dtpicker-title h5 {
 	width: 25%;
 }
@@ -103,11 +104,11 @@
 }
 [data-type="hour"] [data-id="picker-h"],
 [data-type="hour"] [data-id="title-h"] {
-	border-left: dotted 1px #ddd;
+	border-left: dotted 1px #ccc;
 }
 /*时分*/
 
-[data-type="time"] .mui-listpicker,
+[data-type="time"] .mui-picker,
 [data-type="time"] .mui-dtpicker-title h5 {
 	width: 50%;
 }
@@ -121,7 +122,7 @@
 }
 /*年月*/
 
-[data-type="month"] .mui-listpicker,
+[data-type="month"] .mui-picker,
 [data-type="month"] .mui-dtpicker-title h5 {
 	width: 50%;
 }

examples/hello-mui/css/mui.picker.all.css

+/**
+ * 选择列表插件
+ * varstion 2.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+.mui-picker {
+    background-color: #ddd;
+    position: relative;
+    height: 200px;
+    overflow: hidden;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    -webkit-user-select: none;
+    user-select: none;
+    box-sizing: border-box;
+}
+.mui-picker-inner {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+    -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+}
+.mui-pciker-list,
+.mui-pciker-rule {
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    position: absolute;
+    left: 0px;
+    top: 50%;
+    margin-top: -18px;
+}
+.mui-pciker-rule-bg {
+    z-index: 0;
+    /*background-color: #cfd5da;*/
+}
+.mui-pciker-rule-ft {
+    z-index: 2;
+    border-top: solid 1px rgba(0, 0, 0, 0.1);
+    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+    /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+}
+.mui-pciker-list {
+    z-index: 1;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+}
+.mui-pciker-list li {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-size: 16px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+    color: #888;
+    padding: 0px 8px;
+    white-space: nowrap;
+    -webkit-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: default;
+    visibility: hidden;
+}
+.mui-pciker-list li.highlight,
+.mui-pciker-list li.visible {
+    visibility: visible;
+}
+.mui-pciker-list li.highlight {
+    color: #222;
+}
+.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);
+}
+.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;
+	/*-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;*/
+}
+.mui-poppicker-body .mui-picker {
+	width: 100%;
+	height: 100%;
+	margin: 0px;
+	border: none;
+	float: left;
+}
+.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: #f0f0f0;
+	border-bottom: solid 1px #ccc;
+}
+.mui-dtpicker .mui-picker {
+	width: 20%;
+	height: 100%;
+	margin: 0px;
+	float: left;
+	border: none;
+}
+/*年月日时分*/
+
+[data-type="datetime"] .mui-picker,
+[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 #ccc;
+}
+/*年月日*/
+
+[data-type="date"] .mui-picker,
+[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-picker,
+[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 #ccc;
+}
+/*时分*/
+
+[data-type="time"] .mui-picker,
+[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-picker,
+[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.picker.css

+/**
+ * 选择列表插件
+ * varstion 2.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+.mui-picker {
+    background-color: #ddd;
+    position: relative;
+    height: 200px;
+    overflow: hidden;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    -webkit-user-select: none;
+    user-select: none;
+    box-sizing: border-box;
+}
+.mui-picker-inner {
+    box-sizing: border-box;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+    -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+}
+.mui-pciker-list,
+.mui-pciker-rule {
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    position: absolute;
+    left: 0px;
+    top: 50%;
+    margin-top: -18px;
+}
+.mui-pciker-rule-bg {
+    z-index: 0;
+    /*background-color: #cfd5da;*/
+}
+.mui-pciker-rule-ft {
+    z-index: 2;
+    border-top: solid 1px rgba(0, 0, 0, 0.1);
+    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+    /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
+}
+.mui-pciker-list {
+    z-index: 1;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+}
+.mui-pciker-list li {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-size: 16px;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
+    color: #888;
+    padding: 0px 8px;
+    white-space: nowrap;
+    -webkit-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: default;
+    visibility: hidden;
+}
+.mui-pciker-list li.highlight,
+.mui-pciker-list li.visible {
+    visibility: visible;
+}
+.mui-pciker-list li.highlight {
+    color: #222;
+}
\ No newline at end of file

examples/hello-mui/css/mui.picker.min.css

+/**
+* 选择列表插件
+* varstion 2.0.0
+* by Houfeng
+* Houfeng@DCloud.io
+**/
+.mui-pciker-list li,.mui-picker,.mui-picker-inner{box-sizing:border-box;overflow:hidden}.mui-picker{background-color:#ddd;position:relative;height:200px;border:1px solid rgba(0,0,0,.1);-webkit-user-select:none;user-select:none}.mui-dtpicker,.mui-poppicker{left:0;background-color:#eee;box-shadow:0 -5px 7px 0 rgba(0,0,0,.1);-webkit-transition:.3s;width:100%}.mui-picker-inner{position:relative;width:100%;height:100%;-webkit-mask-box-image:-webkit-linear-gradient(bottom,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent);-webkit-mask-box-image:linear-gradient(top,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent)}.mui-pciker-list,.mui-pciker-rule{box-sizing:border-box;padding:0;margin:-18px 0 0;width:100%;height:36px;line-height:36px;position:absolute;left:0;top:50%}.mui-pciker-rule-bg{z-index:0}.mui-pciker-rule-ft{z-index:2;border-top:solid 1px rgba(0,0,0,.1);border-bottom:solid 1px rgba(0,0,0,.1)}.mui-pciker-list{z-index:1;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(750pt) rotateY(0) rotateX(0);transform:perspective(750pt) rotateY(0) rotateX(0)}.mui-pciker-list li{width:100%;height:100%;position:absolute;text-align:center;vertical-align:middle;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:1pc;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#888;padding:0 8px;white-space:nowrap;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;cursor:default;visibility:hidden}.mui-pciker-list li.highlight,.mui-pciker-list li.visible{visibility:visible}.mui-pciker-list li.highlight{color:#222}.mui-poppicker{position:fixed;z-index:999;border-top:solid 1px #ccc;bottom:0;-webkit-transform:translateY(300px)}.mui-poppicker.mui-active{-webkit-transform:translateY(0)}.mui-android-5-1 .mui-poppicker{bottom:-300px;-webkit-transition-property:bottom;-webkit-transform:none}.mui-android-5-1 .mui-poppicker.mui-active{bottom:0;-webkit-transition-property:bottom;-webkit-transform:none}.mui-poppicker-header{padding:6px;font-size:14px;color:#888}.mui-poppicker-header .mui-btn{font-size:9pt;padding:5px 10px}.mui-poppicker-btn-cancel{float:left}.mui-poppicker-btn-ok{float:right}.mui-poppicker-clear{clear:both;height:0;line-height:0;font-size:0;overflow:hidden}.mui-poppicker-body{position:relative;width:100%;height:200px;border-top:solid 1px #ddd}.mui-poppicker-body .mui-picker{width:100%;height:100%;margin:0;border:none;float:left}.mui-dtpicker{position:fixed;z-index:999999;border-top:solid 1px #ccc;bottom:0;-webkit-transform:translateY(300px)}.mui-dtpicker.mui-active{-webkit-transform:translateY(0)}.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:0;-webkit-transition-property:bottom;-webkit-transform:none}.mui-dtpicker-header{padding:6px;font-size:14px;color:#888}.mui-dtpicker-header button{font-size:9pt;padding:5px 10px}.mui-dtpicker-header button:last-child{float:right}.mui-dtpicker-body{position:relative;width:100%;height:200px}.mui-ios .mui-dtpicker-body{-webkit-perspective:75pc;perspective:75pc;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.mui-dtpicker-title h5{display:inline-block;width:20%;margin:0;padding:8px;text-align:center;border-top:solid 1px #ddd;background-color:#f0f0f0;border-bottom:solid 1px #ccc}[data-type=hour] [data-id=title-i],[data-type=hour] [data-id=picker-i],[data-type=month] [data-id=title-i],[data-type=month] [data-id=picker-d],[data-type=month] [data-id=title-d],[data-type=month] [data-id=picker-h],[data-type=month] [data-id=title-h],[data-type=month] [data-id=picker-i],[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],[data-type=date] [data-id=title-i],[data-type=date] [data-id=picker-h],[data-type=date] [data-id=title-h],[data-type=date] [data-id=picker-i]{display:none}.mui-dtpicker .mui-picker{width:20%;height:100%;margin:0;float:left;border:none}[data-type=hour] [data-id=picker-h],[data-type=hour] [data-id=title-h],[data-type=datetime] [data-id=picker-h],[data-type=datetime] [data-id=title-h]{border-left:dotted 1px #ccc}[data-type=datetime] .mui-picker,[data-type=time] .mui-dtpicker-title h5{width:20%}[data-type=date] .mui-dtpicker-title h5,[data-type=date] .mui-picker{width:33.3%}[data-type=hour] .mui-dtpicker-title h5,[data-type=hour] .mui-picker{width:25%}[data-type=month] .mui-dtpicker-title h5,[data-type=month] .mui-picker,[data-type=time] .mui-dtpicker-title h5,[data-type=time] .mui-picker{width:50%}
\ No newline at end of file

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

@@ -13,11 +13,6 @@
 .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;
@@ -55,14 +50,12 @@
 	width: 100%;
 	height: 200px;
 	border-top: solid 1px #ddd;
-}
-.mui-ios .mui-poppicker-body {
-	-webkit-perspective: 1200px;
+	/*-webkit-perspective: 1200px;
 	perspective: 1200px;
 	-webkit-transform-style: preserve-3d;
-	transform-style: preserve-3d;
+	transform-style: preserve-3d;*/
 }
-.mui-poppicker-body .mui-listpicker {
+.mui-poppicker-body .mui-picker {
 	width: 100%;
 	height: 100%;
 	margin: 0px;

examples/hello-mui/examples/clouddb_wilddog.html

@@ -61,7 +61,7 @@
 		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded">
-				<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能； 在手机上新增数据后，你可以通过测试账号（账号：demo@dcloud.io/密码：12345678）登录野狗官网， 查看数据库的实时数据。
+				<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能。
 				</p>
 				
 			</div>

examples/hello-mui/examples/dtpicker.html

@@ -9,8 +9,9 @@
 		<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" />
+		<!--<link href="../css/mui.picker.css" rel="stylesheet" />
+		<link href="../css/mui.dtpicker.css" rel="stylesheet" />-->
+		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
 		<style>
 			html,
 			body,
@@ -62,8 +63,9 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/mui.listpicker.js"></script>
-		<script src="../js/mui.dtpicker.js"></script>
+		<!--<script src="../js/mui.picker.js"></script>
+		<script src="../js/mui.dtpicker.js"></script>-->
+		<script src="../js/mui.picker.min.js"></script>
 		<script>
 			(function($) {
 				$.init();
@@ -91,17 +93,15 @@
 							 * rs.i 分（minutes 的第二个字母），用法同年
 							 */
 							result.innerText = '选择结果: ' + rs.text;
-							
 							/* 
 							 * 返回 false 可以阻止选择框的关闭
 							 * return false;
 							 */
-							
 							/*
 							 * 释放组件资源，释放后将将不能再操作组件
 							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
 							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
-							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。
+							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
 							 */
 							picker.dispose();
 						});

examples/hello-mui/examples/echarts.html

@@ -33,6 +33,11 @@
 			<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>
@@ -134,6 +139,10 @@
 			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>
 

examples/hello-mui/examples/info.html

@@ -48,7 +48,7 @@
 				</p>
 				<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
 				<h4>版本介绍</h4>
-				<p>当前版本为2.2.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
+				<p>当前版本为2.3.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/picker.html

@@ -9,8 +9,9 @@
 		<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.poppicker.css" rel="stylesheet" />
+		<!--<link href="../css/mui.picker.css" rel="stylesheet" />
+		<link href="../css/mui.poppicker.css" rel="stylesheet" />-->
+		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
 		<style>
 			.mui-btn {
 				font-size: 16px;
@@ -60,8 +61,9 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/mui.listpicker.js"></script>
-		<script src="../js/mui.poppicker.js"></script>
+		<script src="../js/mui.picker.min.js"></script>
+		<!--<script src="../js/mui.picker.js"></script>
+		<script src="../js/mui.poppicker.js"></script>-->
 		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
 		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
 		<script>

examples/hello-mui/examples/setting.html

@@ -215,7 +215,7 @@
 						</ul>
 						<ul class="mui-table-view mui-table-view-chevron">
 							<li class="mui-table-view-cell">
-								<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.2.0</i></a>
+								<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.3.0</i></a>
 							</li>
 						</ul>
 						<ul class="mui-table-view">

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

@@ -46,7 +46,7 @@
 			mui.init();
 			var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
 			var subpage_style = {
-				top: '46px',
+				top: '44px',
 				bottom: '50px'
 			};
 			

examples/hello-mui/examples/tab-with-segmented-control-vertical.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>
+			.mui-row.mui-fullscreen>[class*="mui-col-"] {
+				height: 100%;
+			}
+			.mui-col-xs-3,
+			.mui-control-content {
+				overflow-y: auto;
+				height: 100%;
+			}
+			.mui-segmented-control .mui-control-item {
+				line-height: 50px;
+				width: 100%;
+			}
+			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
+				background-color: #fff;
+			}
+		</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">侧面选项卡-div模式</h1>
+		</header>
+		<div class="mui-content mui-row mui-fullscreen">
+			<div class="mui-col-xs-3">
+				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
+				</div>
+			</div>
+			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
+				<div id="item1" class="mui-control-content mui-active">
+				</div>
+				<div id="item2" class="mui-control-content">
+				</div>
+				<div id="item3" class="mui-control-content">
+				</div>
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script>
+			mui.init({
+				swipeBack: true //启用右滑关闭功能
+			});
+			var controls = document.getElementById("segmentedControls");
+			var contents = document.getElementById("segmentedControlContents");
+			var html = [];
+			var i = 1,
+				j = 1,
+				m = 16, //左侧选项卡数量+1
+				n = 21; //每个选项卡列表数量+1
+			for (; i < m; i++) {
+				html.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');
+			}
+			controls.innerHTML = html.join('');
+			html = [];
+			for (i = 1; i < m; i++) {
+				html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
+				for (j = 1; j < n; j++) {
+					html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
+				}
+				html.push('</ul></div>');
+			}
+			contents.innerHTML = html.join('');
+			 //默认选中第一个
+			controls.querySelector('.mui-control-item').classList.add('mui-active');
+			contents.querySelector('.mui-control-content').classList.add('mui-active');
+		</script>
+
+	</body>
+
+</html>
\ No newline at end of file

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

@@ -24,7 +24,7 @@
 	<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>
+			<h1 class="mui-title">顶部选项卡-div模式</h1>
 		</header>
 		<div class="mui-content">
 			<div style="padding: 10px 10px;">

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

@@ -25,6 +25,10 @@
 				margin-top: 50px;
 			}
 		</style>
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 class="mui-title">顶部选项卡-可左右拖动(div)</h1>
+		</header>
 		<div class="mui-content">
 			<div id="slider" class="mui-slider">
 				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">

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

@@ -21,13 +21,18 @@
 	<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>
+			<h1 class="mui-title">底部选项卡-二级菜单(div)</h1>
 		</header>
 		<nav class="mui-bar mui-bar-tab ">
 			<a class="mui-tab-item" href="#Popover_0">产品</a>
 			<a class="mui-tab-item" href="#Popover_1">方案</a>
 			<a class="mui-tab-item" href="#Popover_2">新闻</a>
 		</nav>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<p style="text-indent: 22px;">这是包含二级菜单的底部选项卡示例，点击底部菜单，会展开显示对应的二级菜单。</p>
+			</div>
+		</div>
 		<div id="Popover_0" class="mui-popover mui-bar-popover">
 			<div class="mui-popover-arrow"></div>
 			<ul class="mui-table-view">

examples/hello-mui/examples/tabbar.html

@@ -50,7 +50,7 @@
 	<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">选项卡（Tab）-div模式</h1>
+			<h1 class="mui-title">底部选项卡-div模式</h1>
 		</header>
 		<nav class="mui-bar mui-bar-tab">
 			<a class="mui-tab-item mui-active" href="#tabbar">

examples/hello-mui/js/mui.dtpicker.js

@@ -6,6 +6,23 @@
  */
 
 (function($, document) {
+	
+	//创建 DOM
+	$.dom = function(str) {
+		if (typeof(str) !== 'string') {
+			if ((str instanceof Array) || (str[0] && str.length)) {
+				return [].slice.call(str);
+			} else {
+				return [str];
+			}
+		}
+		if (!$.__create_dom_div__) {
+			$.__create_dom_div__ = document.createElement('div');
+		}
+		$.__create_dom_div__.innerHTML = str;
+		return [].slice.call($.__create_dom_div__.childNodes);
+	};
+	
 	var domBuffer = '<div class="mui-dtpicker" data-type="datetime">\
 		<div class="mui-dtpicker-header">\
 			<button data-id="btn-cancel" class="mui-btn">取消</button>\
@@ -13,47 +30,56 @@
 		</div>\
 		<div class="mui-dtpicker-title"><h5 data-id="title-y">年</h5><h5 data-id="title-m">月</h5><h5 data-id="title-d">日</h5><h5 data-id="title-h">时</h5><h5 data-id="title-i">分</h5></div>\
 		<div class="mui-dtpicker-body">\
-			<div data-id="picker-y" class="mui-listpicker">\
-				<div class="mui-listpicker-inner">\
-					<ul>\
+			<div data-id="picker-y" class="mui-picker">\
+				<div class="mui-picker-inner">\
+					<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
+					<ul class="mui-pciker-list">\
 					</ul>\
+					<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
 				</div>\
 			</div>\
-			<div data-id="picker-m" class="mui-listpicker">\
-				<div class="mui-listpicker-inner">\
-					<ul>\
+			<div data-id="picker-m" class="mui-picker">\
+				<div class="mui-picker-inner">\
+					<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
+					<ul class="mui-pciker-list">\
 					</ul>\
+					<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
 				</div>\
 			</div>\
-			<div data-id="picker-d" class="mui-listpicker">\
-				<div class="mui-listpicker-inner">\
-					<ul>\
+			<div data-id="picker-d" class="mui-picker">\
+				<div class="mui-picker-inner">\
+					<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
+					<ul class="mui-pciker-list">\
 					</ul>\
+					<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
 				</div>\
 			</div>\
-			<div data-id="picker-h" class="mui-listpicker">\
-				<div class="mui-listpicker-inner">\
-					<ul>\
+			<div data-id="picker-h" class="mui-picker">\
+				<div class="mui-picker-inner">\
+					<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
+					<ul class="mui-pciker-list">\
 					</ul>\
+					<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
 				</div>\
 			</div>\
-			<div data-id="picker-i" class="mui-listpicker">\
-				<div class="mui-listpicker-inner">\
-					<ul>\
+			<div data-id="picker-i" class="mui-picker">\
+				<div class="mui-picker-inner">\
+					<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
+					<ul class="mui-pciker-list">\
 					</ul>\
+					<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
 				</div>\
 			</div>\
 		</div>\
 	</div>';
 
-
 	//plugin
 	var DtPicker = $.DtPicker = $.Class.extend({
 		init: function(options) {
 			var self = this;
 			var _picker = $.dom(domBuffer)[0];
 			document.body.appendChild(_picker);
-			$('[data-id*="picker"]', _picker).listpicker();
+			$('[data-id*="picker"]', _picker).picker();
 			var ui = self.ui = {
 				picker: _picker,
 				mask: $.createMask(),
@@ -85,6 +111,13 @@
 				self.hide();
 			}, false);
 			self._create(options);
+			//防止滚动穿透
+			self.ui.picker.addEventListener('touchstart',function(event){
+				event.preventDefault();  
+			},false);
+			self.ui.picker.addEventListener('touchmove',function(event){
+				event.preventDefault();  
+			},false);
 		},
 		getSelected: function() {
 			var self = this;
@@ -92,11 +125,11 @@
 			var type = self.options.type;
 			var selected = {
 				type: type,
-				y: ui.y.getSelectedItem(),
-				m: ui.m.getSelectedItem(),
-				d: ui.d.getSelectedItem(),
-				h: ui.h.getSelectedItem(),
-				i: ui.i.getSelectedItem(),
+				y: ui.y.picker.getSelectedItem(),
+				m: ui.m.picker.getSelectedItem(),
+				d: ui.d.picker.getSelectedItem(),
+				h: ui.h.picker.getSelectedItem(),
+				i: ui.i.picker.getSelectedItem(),
 				toString: function() {
 					return this.value;
 				}
@@ -129,11 +162,11 @@
 			var self = this;
 			var ui = self.ui;
 			var parsedValue = self._parseValue(value);
-			ui.y.setSelectedValue(parsedValue.y, true);
-			ui.m.setSelectedValue(parsedValue.m, true);
-			ui.d.setSelectedValue(parsedValue.d, true);
-			ui.h.setSelectedValue(parsedValue.h, true);
-			ui.i.setSelectedValue(parsedValue.i, true);
+			ui.y.picker.setSelectedValue(parsedValue.y, 0);
+			ui.m.picker.setSelectedValue(parsedValue.m, 0);
+			ui.d.picker.setSelectedValue(parsedValue.d, 0);
+			ui.h.picker.setSelectedValue(parsedValue.h, 0);
+			ui.i.picker.setSelectedValue(parsedValue.i, 0);
 		},
 		isLeapYear: function(year) {
 			return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
@@ -182,8 +215,8 @@
 					});
 				}
 			}
-			ui.y.setItems(yArray);
-			//ui.y.setSelectedValue(current);
+			ui.y.picker.setItems(yArray);
+			//ui.y.picker.setSelectedValue(current);
 		},
 		_createMonth: function(current) {
 			var self = this;
@@ -202,8 +235,8 @@
 					});
 				}
 			}
-			ui.m.setItems(mArray);
-			//ui.m.setSelectedValue(current);
+			ui.m.picker.setItems(mArray);
+			//ui.m.picker.setSelectedValue(current);
 		},
 		_createDay: function(current) {
 			var self = this;
@@ -214,7 +247,7 @@
 			if (options.customData.d) {
 				dArray = options.customData.d;
 			} else {
-				var maxDay = self.getDayNum(parseInt(ui.y.getSelectedValue()), parseInt(ui.m.getSelectedValue()));
+				var maxDay = self.getDayNum(parseInt(ui.y.picker.getSelectedValue()), parseInt(ui.m.picker.getSelectedValue()));
 				for (var d = 1; d <= maxDay; d++) {
 					var val = self._fill(d);
 					dArray.push({
@@ -223,9 +256,9 @@
 					});
 				}
 			}
-			ui.d.setItems(dArray);
-			current = current || ui.d.getSelectedValue();
-			//ui.d.setSelectedValue(current);
+			ui.d.picker.setItems(dArray);
+			current = current || ui.d.picker.getSelectedValue();
+			//ui.d.picker.setSelectedValue(current);
 		},
 		_createHours: function(current) {
 			var self = this;
@@ -244,8 +277,8 @@
 					});
 				}
 			}
-			ui.h.setItems(hArray);
-			//ui.h.setSelectedValue(current);
+			ui.h.picker.setItems(hArray);
+			//ui.h.picker.setSelectedValue(current);
 		},
 		_createMinutes: function(current) {
 			var self = this;
@@ -264,8 +297,8 @@
 					});
 				}
 			}
-			ui.i.setItems(iArray);
-			//ui.i.setSelectedValue(current);
+			ui.i.picker.setItems(iArray);
+			//ui.i.picker.setSelectedValue(current);
 		},
 		_setLabels: function() {
 			var self = this;
@@ -336,6 +369,11 @@
 			ui.mask.show();
 			document.body.classList.add($.className('dtpicker-active-for-page'));
 			ui.picker.classList.add($.className('active'));
+			//处理物理返回键
+			self.__back = $.back;
+			$.back = function() {
+				self.hide();
+			};
 		},
 		hide: function() {
 			var self = this;
@@ -344,6 +382,8 @@
 			ui.picker.classList.remove($.className('active'));
 			ui.mask.close();
 			document.body.classList.remove($.className('dtpicker-active-for-page'));
+			//处理物理返回键
+			$.back=self.__back;
 		},
 		dispose: function() {
 			var self = this;

examples/hello-mui/js/mui.js

 /*!
  * =====================================================
- * Mui v2.2.0 (https://github.com/dcloudio/mui)
+ * Mui v2.3.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 /**
@@ -1593,7 +1593,7 @@ var mui = (function(document, undefined) {
 					return;
 				}
 				var target = session.target;
-				if (!target || (target.disabled || target.classList.contains('mui-disabled'))) {
+				if (!target || (target.disabled || (target.classList && target.classList.contains('mui-disabled')))) {
 					return;
 				}
 				if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
@@ -1758,6 +1758,7 @@ var mui = (function(document, undefined) {
 			case $.EVENT_END:
 			case $.EVENT_CANCEL:
 				if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
+					session.pinch = false;
 					$.trigger(session.target, name + 'end', touch);
 				}
 				break;
@@ -1925,7 +1926,7 @@ var mui = (function(document, undefined) {
 	 * @returns {Object}
 	 */
 	$.showOptions = function(options) {
-		return $.extend(defaultShow, options);
+		return $.extend(true,{},defaultShow, options);
 	};
 	/**
 	 * 窗口默认配置
@@ -3192,28 +3193,28 @@ var mui = (function(document, undefined) {
 			this.stopped = false;
 
 			this.options = $.extend(true, {
-				scrollY: true,//是否竖向滚动
-				scrollX: false,//是否横向滚动
-				startX: 0,//初始化时滚动至x
-				startY: 0,//初始化时滚动至y
-				indicators: true,//是否显示滚动条
+				scrollY: true, //是否竖向滚动
+				scrollX: false, //是否横向滚动
+				startX: 0, //初始化时滚动至x
+				startY: 0, //初始化时滚动至y
+				indicators: true, //是否显示滚动条
 				stopPropagation: false,
 				hardwareAccelerated: true,
 				fixedBadAndorid: false,
 				preventDefaultException: {
-					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
+					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
 				},
 				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);
 
@@ -3439,14 +3440,15 @@ var mui = (function(document, undefined) {
 			}
 		},
 		_start: function(e) {
+			e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
 			this.moved = this.needReset = false;
 			this._transitionTime();
-			if (this.isInTransition && this.moved) {
+			if (this.isInTransition) {
 				this.needReset = true;
 				this.isInTransition = false;
 				var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
 				this.setTranslate(Math.round(pos.x), Math.round(pos.y));
-				this.resetPosition(); //reset
+				//				this.resetPosition(); //reset
 				$.trigger(this.scroller, 'scrollend', this);
 				//				e.stopPropagation();
 				e.preventDefault();
@@ -4086,7 +4088,6 @@ var mui = (function(document, undefined) {
 			if (!this.loading) {
 				this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
 			}
-			e.preventDefault();
 			this._super(e);
 		},
 		_drag: function(e) {
@@ -4899,13 +4900,24 @@ var mui = (function(document, undefined) {
 				this.options = $.extend(true, {
 					dragThresholdX: 10,
 					scale: 0.8,
-					opacity: 0.1
+					opacity: 0.1,
+					preventDefaultException: {
+						tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
+					},
 				}, options);
 				document.body.classList.add('mui-fullscreen'); //fullscreen
 				this.refresh();
 				this.initEvent();
 			}
 		},
+		_preventDefaultException: function(el, exceptions) {
+			for (var i in exceptions) {
+				if (exceptions[i].test(el[i])) {
+					return true;
+				}
+			}
+			return false;
+		},
 		refresh: function(offCanvas) {
 			//			offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
 			this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
@@ -4954,10 +4966,7 @@ var mui = (function(document, undefined) {
 		handleEvent: function(e) {
 			switch (e.type) {
 				case 'touchstart':
-					var tagName = e.target && e.target.tagName;
-					if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
-						e.preventDefault();
-					}
+					e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
 					break;
 				case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
 					if (e.target === this.scroller) {
@@ -4974,6 +4983,7 @@ var mui = (function(document, undefined) {
 					}
 					if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
 						if (this.slideIn) {
+							this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
 							if (this.classList.contains(CLASS_ACTIVE)) {
 								if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
 									this.offCanvas = this.offCanvasRight;
@@ -5012,7 +5022,7 @@ var mui = (function(document, undefined) {
 								}
 							}
 						}
-						if (this.offCanvas) {
+						if (this.offCanvas && this.scroller) {
 							this.startX = this.lastX;
 							this.isDragging = true;
 
@@ -5787,6 +5797,7 @@ var mui = (function(document, undefined) {
 
 	var CLASS_CONTROL_ITEM = 'mui-control-item';
 	var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
+	var CLASS_SEGMENTED_CONTROL_VERTICAL = 'mui-segmented-control-vertical';
 	var CLASS_CONTROL_CONTENT = 'mui-control-content';
 	var CLASS_TAB_BAR = 'mui-bar-tab';
 	var CLASS_TAB_ITEM = 'mui-tab-item';
@@ -5794,7 +5805,11 @@ var mui = (function(document, undefined) {
 
 	var handle = function(event, target) {
 		if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
+			if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
+				//vertical 如果preventDefault会导致无法滚动
+			} else {
 				event.preventDefault(); //stop hash change				
+			}
 			//			if (target.hash) {
 			return target;
 			//			}
@@ -5844,7 +5859,6 @@ var mui = (function(document, undefined) {
 		if (!targetTab.hash) {
 			return;
 		}
-
 		targetBody = document.getElementById(targetTab.hash.replace('#', ''));
 
 		if (!targetBody) {
@@ -6476,17 +6490,21 @@ var mui = (function(document, undefined) {
 			var input = cell.querySelector('input[type=radio]');
 			if (input) {
 				//				input.click();
+				if (!input.disabled && !input.readOnly) {
 					input.checked = !input.checked;
 					$.trigger(input, 'change');
 				}
+			}
 		} else if (classList.contains('mui-checkbox')) {
 			var input = cell.querySelector('input[type=checkbox]');
 			if (input) {
 				//				input.click();
+				if (!input.disabled && !input.readOnly) {
 					input.checked = !input.checked;
 					$.trigger(input, 'change');
 				}
 			}
+		}
 	};
 	//fixed hashchange(android)
 	window.addEventListener($.EVENT_CLICK, function(e) {
@@ -6958,16 +6976,15 @@ var mui = (function(document, undefined) {
 	var inputClassName = 'mui-numbox-input';
 
 	var Numbox = $.Numbox = $.Class.extend({
+		/**
+		 * 构造函数
+		 **/
 		init: function(holder, options) {
 			var self = this;
 			if (!holder) {
 				throw "构造 numbox 时缺少容器元素";
 			}
 			self.holder = holder;
-			//避免重复初始化开始
-			if (self.holder.__numbox_inited) return;
-			self.holder.__numbox_inited = true;
-			//避免重复初始化结束
 			options = options || {};
 			options.step = parseInt(options.step || 1);
 			self.options = options;
@@ -6977,6 +6994,9 @@ var mui = (function(document, undefined) {
 			self.checkValue();
 			self.initEvent();
 		},
+		/**
+		 * 初始化事件绑定
+		 **/
 		initEvent: function() {
 			var self = this;
 			self.plus.addEventListener(tapEventName, function(event) {
@@ -6993,6 +7013,9 @@ var mui = (function(document, undefined) {
 				self.checkValue();
 			});
 		},
+		/**
+		 * 验证当前值是法合法
+		 **/
 		checkValue: function() {
 			var self = this;
 			var val = self.input.value;
@@ -7015,28 +7038,38 @@ var mui = (function(document, undefined) {
 				}
 				self.input.value = val;
 			}
+		},
+		/**
+		 * 更新选项
+		 **/
+		setOption: function(name, value) {
+			var self = this;
+			self.options[name] = value;
 		}
 	});
 
 	$.fn.numbox = function(options) {
+		var instanceArray = [];
 		//遍历选择的元素
 		this.each(function(i, element) {
+			if (element.numbox) return;
 			if (options) {
-				new Numbox(element, options);
+				element.numbox = new Numbox(element, options);
 			} else {
 				var optionsText = element.getAttribute('data-numbox-options');
 				var options = optionsText ? JSON.parse(optionsText) : {};
 				options.step = element.getAttribute('data-numbox-step') || options.step;
 				options.min = element.getAttribute('data-numbox-min') || options.min;
 				options.max = element.getAttribute('data-numbox-max') || options.max;
-				new Numbox(element, options);
+				element.numbox = new Numbox(element, options);
 			}
 		});
-		return this;
+		return this[0] ? this[0].numbox : null;
 	}
 
 	//自动处理 class='mui-locker' 的 dom
 	$.ready(function() {
 		$('.' + holderClassName).numbox();
 	});
+
 }(mui))
\ No newline at end of file

examples/hello-mui/js/mui.poppicker.js

 /**
  * 弹出选择列表插件
- * 此组件依赖 listpcker ，请在页面中先引入 mui.listpicker.css + mui.listpicker.js
+ * 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
  * varstion 1.0.1
  * by Houfeng
  * Houfeng@DCloud.io
@@ -8,6 +8,22 @@
 
 (function($, document) {
 
+	//创建 DOM
+	$.dom = function(str) {
+		if (typeof(str) !== 'string') {
+			if ((str instanceof Array) || (str[0] && str.length)) {
+				return [].slice.call(str);
+			} else {
+				return [str];
+			}
+		}
+		if (!$.__create_dom_div__) {
+			$.__create_dom_div__ = document.createElement('div');
+		}
+		$.__create_dom_div__.innerHTML = str;
+		return [].slice.call($.__create_dom_div__.childNodes);
+	};
+
 	var panelBuffer = '<div class="mui-poppicker">\
 		<div class="mui-poppicker-header">\
 			<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\
@@ -18,10 +34,12 @@
 		</div>\
 	</div>';
 
-	var pickerBuffer = '<div class="mui-listpicker">\
-		<div class="mui-listpicker-inner">\
-			<ul>\
+	var pickerBuffer = '<div class="mui-picker">\
+		<div class="mui-picker-inner">\
+			<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
+			<ul class="mui-pciker-list">\
 			</ul>\
+			<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
 		</div>\
 	</div>';
 
@@ -54,25 +72,32 @@
 			self.mask[0].addEventListener('tap', function() {
 				self.hide();
 			}, false);
-			self._createListPicker();
+			self._createPicker();
+			//防止滚动穿透
+			self.panel.addEventListener('touchstart', function(event) {
+				event.preventDefault();
+			}, false);
+			self.panel.addEventListener('touchmove', function(event) {
+				event.preventDefault();
+			}, false);
 		},
-		_createListPicker: function() {
+		_createPicker: function() {
 			var self = this;
 			var layer = self.options.layer || 1;
 			var width = (100 / layer) + '%';
 			self.pickers = [];
 			for (var i = 1; i <= layer; i++) {
-				var picker = $.dom(pickerBuffer)[0];
-				picker.style.width = width;
-				self.body.appendChild(picker);
-				$(picker).listpicker();
+				var pickerElement = $.dom(pickerBuffer)[0];
+				pickerElement.style.width = width;
+				self.body.appendChild(pickerElement);
+				var picker = $(pickerElement).picker();
 				self.pickers.push(picker);
-				picker.addEventListener('change', function(event) {
-					var nextPicker = this.nextSibling;
-					if (nextPicker && nextPicker.listpickerId) {
+				pickerElement.addEventListener('change', function(event) {
+					var nextPickerElement = this.nextSibling;
+					if (nextPickerElement && nextPickerElement.picker) {
 						var eventData = event.detail || {};
 						var preItem = eventData.item || {};
-						nextPicker.setItems(preItem.children);
+						nextPickerElement.picker.setItems(preItem.children);
 					}
 				}, false);
 			}
@@ -100,6 +125,11 @@
 			self.mask.show();
 			document.body.classList.add($.className('poppicker-active-for-page'));
 			self.panel.classList.add($.className('active'));
+			//处理物理返回键
+			self.__back = $.back;
+			$.back = function() {
+				self.hide();
+			};
 		},
 		//隐藏
 		hide: function() {
@@ -108,6 +138,8 @@
 			self.panel.classList.remove($.className('active'));
 			self.mask.close();
 			document.body.classList.remove($.className('poppicker-active-for-page'));
+			//处理物理返回键
+			$.back=self.__back;
 		},
 		dispose: function() {
 			var self = this;

examples/hello-mui/js/mui.previewimage.js

@@ -117,10 +117,10 @@
 		if (!this.groups[group]) {
 			this.groups[group] = [];
 		}
-		if (img.__mui_img_data) {
+		var src = img.getAttribute('src');
+		if (img.__mui_img_data && img.__mui_img_data.src === src) { //已缓存且图片未变化
 			this.groups[group].push(img.__mui_img_data);
 		} else {
-			var src = img.getAttribute('src');
 			var lazyload = img.getAttribute('data-preview-src');
 			if (!lazyload) {
 				lazyload = src;

examples/hello-mui/js/mui.pullToRefresh.js

@@ -188,6 +188,7 @@
 				e.detail.gesture.preventDefault();
 				var deltaY = detail.deltaY - this.startDeltaY;
 				deltaY = Math.min(deltaY, 1.5 * this.options.down.height);
+				this.deltaY = deltaY;
 				this._pulling(deltaY);
 				var state = deltaY > this.options.down.height ? STATE_AFTERCHANGEOFFSET : STATE_BEFORECHANGEOFFSET;
 				if (this.state !== state) {
@@ -201,6 +202,13 @@
 					}
 					this['_' + state](deltaY);
 				}
+				if ($.os.ios && parseFloat($.os.version) >= 8) {
+					var clientY = detail.gesture.touches[0].clientY;
+					if ((clientY + 10) > window.innerHeight || clientY < 10) {
+						this._dragend(e);
+						return;
+					}
+				}
 			}
 		},
 		_dragend: function(e) {
@@ -313,7 +321,11 @@
 			this.pullUpTips && this.pullUpTips.classList.remove(CLASS_HIDDEN);
 			this.pullDownTips.classList.add(CLASS_TRANSITIONING);
 			this.pullDownTips.style.webkitTransform = 'translate3d(0,0,0)';
+			if (this.deltaY <= 0) {
+				this.removePullDownTips();
+			} else {
 				this.removing = true;
+			}
 		},
 		endPullUpToRefresh: function(finished) {
 			if (finished) {

examples/hello-mui/list.html

@@ -296,23 +296,6 @@
 						range（滑块）
 					</a>
 				</li>
-				<li class="mui-table-view-cell mui-collapse">
-					<a class="mui-navigate-right" href="#">
-						segment（分段选择）
-					</a>
-					<ul class="mui-table-view mui-table-view-chevron">
-						<li class="mui-table-view-cell">
-							<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
-								按钮式选项卡
-							</a>
-						</li>
-						<li class="mui-table-view-cell">
-							<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
-								可拖动选项卡(仿Android)
-							</a>
-						</li>
-					</ul>
-				</li>
 				<li class="mui-table-view-cell">
 					<a class="mui-navigate-right" href="examples/switches.html">
 						switch（开关）
@@ -325,22 +308,37 @@
 					<ul class="mui-table-view mui-table-view-chevron">
 						<li class="mui-table-view-cell">
 							<a class="mui-navigate-right" href="examples/tabbar.html">
-								div模式
+								底部选项卡-div模式
 							</a>
 						</li>
 						<li class="mui-table-view-cell">
 							<a class="mui-navigate-right" open-type="common" href="examples/tab-webview-main.html">
-								webview模式
+								底部选项卡-webview模式
 							</a>
 						</li>
-						<li class="mui-table-view-cell">
+						<!-- <li class="mui-table-view-cell">
 							<a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
-								文字选项卡
+								底部选项卡-文字选项卡
 							</a>
-						</li>
+						</li> -->
 						<li class="mui-table-view-cell">
 							<a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">
-								含二级菜单的选项卡
+								底部选项卡-二级菜单(div)
+							</a>
+						</li>
+						<li class="mui-table-view-cell">
+							<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
+								顶部选项卡-div模式
+							</a>
+						</li>
+						<li class="mui-table-view-cell">
+							<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
+								顶部选项卡-可左右拖动(div)
+							</a>
+						</li>
+						<li class="mui-table-view-cell">
+							<a class="mui-navigate-right" href="examples/tab-with-segmented-control-vertical.html">
+								左侧选项卡-div模式
 							</a>
 						</li>
 					</ul>
@@ -441,7 +439,12 @@
 			}
 			//初始化，并预加载webview模式的选项卡			
 			function preload () {
-				mui.preload({url:'examples/tab-webview-main.html'});
+				mui.preload({
+					url:'examples/tab-webview-main.html',
+					styles: {
+						popGesture: 'hide'
+					}
+				});
 				mui.preload({
 					url:"examples/pullrefresh_main.html",
 					styles:{
@@ -560,7 +563,7 @@
 						}
 					});
 				} else if (id && ~id.indexOf('.html')) {
-					if (!~id.indexOf('popovers.html')&&!~id.indexOf('tab-with-viewpagerindicator.html')&&mui.os.ios) {
+					if (!~id.indexOf('popovers.html')&&mui.os.ios) {
 						mui.openWindow({
 							id: id,
 							url: this.href,

js/mui.class.scroll.js

@@ -28,28 +28,28 @@
 			this.stopped = false;
 
 			this.options = $.extend(true, {
-				scrollY: true,//是否竖向滚动
-				scrollX: false,//是否横向滚动
-				startX: 0,//初始化时滚动至x
-				startY: 0,//初始化时滚动至y
-				indicators: true,//是否显示滚动条
+				scrollY: true, //是否竖向滚动
+				scrollX: false, //是否横向滚动
+				startX: 0, //初始化时滚动至x
+				startY: 0, //初始化时滚动至y
+				indicators: true, //是否显示滚动条
 				stopPropagation: false,
 				hardwareAccelerated: true,
 				fixedBadAndorid: false,
 				preventDefaultException: {
-					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
+					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
 				},
 				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);
 
@@ -275,14 +275,15 @@
 			}
 		},
 		_start: function(e) {
+			e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
 			this.moved = this.needReset = false;
 			this._transitionTime();
-			if (this.isInTransition && this.moved) {
+			if (this.isInTransition) {
 				this.needReset = true;
 				this.isInTransition = false;
 				var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
 				this.setTranslate(Math.round(pos.x), Math.round(pos.y));
-				this.resetPosition(); //reset
+				//				this.resetPosition(); //reset
 				$.trigger(this.scroller, 'scrollend', this);
 				//				e.stopPropagation();
 				e.preventDefault();

js/mui.class.scroll.pullrefresh.js

@@ -23,7 +23,6 @@
 			if (!this.loading) {
 				this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
 			}
-			e.preventDefault();
 			this._super(e);
 		},
 		_drag: function(e) {

js/mui.gestures.pinch.js

@@ -41,6 +41,7 @@
 			case $.EVENT_END:
 			case $.EVENT_CANCEL:
 				if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
+					session.pinch = false;
 					$.trigger(session.target, name + 'end', touch);
 				}
 				break;

js/mui.gestures.tap.js

@@ -16,7 +16,7 @@
 					return;
 				}
 				var target = session.target;
-				if (!target || (target.disabled || target.classList.contains($.className('disabled')))) {
+				if (!target || (target.disabled || (target.classList && target.classList.contains($.className('disabled'))))) {
 					return;
 				}
 				if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {

js/mui.init.5+.js

@@ -47,7 +47,7 @@
 	 * @returns {Object}
 	 */
 	$.showOptions = function(options) {
-		return $.extend(defaultShow, options);
+		return $.extend(true,{},defaultShow, options);
 	};
 	/**
 	 * 窗口默认配置

js/mui.number.js

@@ -16,16 +16,15 @@
 	var inputClassName = $.className('numbox-input');
 
 	var Numbox = $.Numbox = $.Class.extend({
+		/**
+		 * 构造函数
+		 **/
 		init: function(holder, options) {
 			var self = this;
 			if (!holder) {
 				throw "构造 numbox 时缺少容器元素";
 			}
 			self.holder = holder;
-			//避免重复初始化开始
-			if (self.holder.__numbox_inited) return;
-			self.holder.__numbox_inited = true;
-			//避免重复初始化结束
 			options = options || {};
 			options.step = parseInt(options.step || 1);
 			self.options = options;
@@ -35,6 +34,9 @@
 			self.checkValue();
 			self.initEvent();
 		},
+		/**
+		 * 初始化事件绑定
+		 **/
 		initEvent: function() {
 			var self = this;
 			self.plus.addEventListener(tapEventName, function(event) {
@@ -51,6 +53,9 @@
 				self.checkValue();
 			});
 		},
+		/**
+		 * 验证当前值是法合法
+		 **/
 		checkValue: function() {
 			var self = this;
 			var val = self.input.value;
@@ -73,28 +78,38 @@
 				}
 				self.input.value = val;
 			}
+		},
+		/**
+		 * 更新选项
+		 **/
+		setOption: function(name, value) {
+			var self = this;
+			self.options[name] = value;
 		}
 	});
 
 	$.fn.numbox = function(options) {
+		var instanceArray = [];
 		//遍历选择的元素
 		this.each(function(i, element) {
+			if (element.numbox) return;
 			if (options) {
-				new Numbox(element, options);
+				element.numbox = new Numbox(element, options);
 			} else {
 				var optionsText = element.getAttribute('data-numbox-options');
 				var options = optionsText ? JSON.parse(optionsText) : {};
 				options.step = element.getAttribute('data-numbox-step') || options.step;
 				options.min = element.getAttribute('data-numbox-min') || options.min;
 				options.max = element.getAttribute('data-numbox-max') || options.max;
-				new Numbox(element, options);
+				element.numbox = new Numbox(element, options);
 			}
 		});
-		return this;
+		return this[0] ? this[0].numbox : null;
 	}
 
 	//自动处理 class='mui-locker' 的 dom
 	$.ready(function() {
 		$('.' + holderClassName).numbox();
 	});
+
 }(mui))
\ No newline at end of file

js/mui.offcanvas.js

@@ -30,13 +30,24 @@
 				this.options = $.extend(true, {
 					dragThresholdX: 10,
 					scale: 0.8,
-					opacity: 0.1
+					opacity: 0.1,
+					preventDefaultException: {
+						tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
+					},
 				}, options);
 				document.body.classList.add($.className('fullscreen')); //fullscreen
 				this.refresh();
 				this.initEvent();
 			}
 		},
+		_preventDefaultException: function(el, exceptions) {
+			for (var i in exceptions) {
+				if (exceptions[i].test(el[i])) {
+					return true;
+				}
+			}
+			return false;
+		},
 		refresh: function(offCanvas) {
 			//			offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
 			this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
@@ -85,10 +96,7 @@
 		handleEvent: function(e) {
 			switch (e.type) {
 				case 'touchstart':
-					var tagName = e.target && e.target.tagName;
-					if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
-						e.preventDefault();
-					}
+					e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
 					break;
 				case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
 					if (e.target === this.scroller) {
@@ -105,6 +113,7 @@
 					}
 					if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
 						if (this.slideIn) {
+							this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
 							if (this.classList.contains(CLASS_ACTIVE)) {
 								if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
 									this.offCanvas = this.offCanvasRight;
@@ -143,7 +152,7 @@
 								}
 							}
 						}
-						if (this.offCanvas) {
+						if (this.offCanvas && this.scroller) {
 							this.startX = this.lastX;
 							this.isDragging = true;
 

js/segmented-controllers.js

@@ -10,6 +10,7 @@
 
 	var CLASS_CONTROL_ITEM = $.className('control-item');
 	var CLASS_SEGMENTED_CONTROL = $.className('segmented-control');
+	var CLASS_SEGMENTED_CONTROL_VERTICAL = $.className('segmented-control-vertical');
 	var CLASS_CONTROL_CONTENT = $.className('control-content');
 	var CLASS_TAB_BAR = $.className('bar-tab');
 	var CLASS_TAB_ITEM = $.className('tab-item');
@@ -17,7 +18,11 @@
 
 	var handle = function(event, target) {
 		if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
+			if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
+				//vertical 如果preventDefault会导致无法滚动
+			} else {
 				event.preventDefault(); //stop hash change				
+			}
 			//			if (target.hash) {
 			return target;
 			//			}
@@ -67,7 +72,6 @@
 		if (!targetTab.hash) {
 			return;
 		}
-
 		targetBody = document.getElementById(targetTab.hash.replace('#', ''));
 
 		if (!targetBody) {

js/tableviews.js

@@ -435,17 +435,21 @@
 			var input = cell.querySelector('input[type=radio]');
 			if (input) {
 				//				input.click();
+				if (!input.disabled && !input.readOnly) {
 					input.checked = !input.checked;
 					$.trigger(input, 'change');
 				}
+			}
 		} else if (classList.contains($.className('checkbox'))) {
 			var input = cell.querySelector('input[type=checkbox]');
 			if (input) {
 				//				input.click();
+				if (!input.disabled && !input.readOnly) {
 					input.checked = !input.checked;
 					$.trigger(input, 'change');
 				}
 			}
+		}
 	};
 	//fixed hashchange(android)
 	window.addEventListener($.EVENT_CLICK, function(e) {

package.json

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

sass/cards.scss

@@ -34,14 +34,15 @@
     border-bottom: 0;
     border-radius: $border-radius;
     // Rounding first divider on carded lists and remove border on the top
-    .#{$namespace}table-view-divider:first-child {
+    //fix Android 4.1.x/4.2.x 圆角列表四角不圆的bug
+    .#{$namespace}table-view-divider:first-child,.#{$namespace}table-view-cell:first-child {
         top: 0;
         border-top-left-radius: $border-radius;
         border-top-right-radius: $border-radius;
     }
 
     // Rounding last divider on carded table views
-    .#{$namespace}table-view-divider:last-child {
+    .#{$namespace}table-view-divider:last-child,.#{$namespace}table-view-cell:last-child {
         border-bottom-left-radius: $border-radius;
         border-bottom-right-radius: $border-radius;
     }

sass/grid.scss

+.#{$namespace}row {
+    @include clearfix();
+}
+.#{$namespace}col-xs-1, .#{$namespace}col-sm-1, .#{$namespace}col-xs-2, .#{$namespace}col-sm-2, .#{$namespace}col-xs-3, .#{$namespace}col-sm-3, .#{$namespace}col-xs-4, .#{$namespace}col-sm-4,  .#{$namespace}col-xs-5, .#{$namespace}col-sm-5, .#{$namespace}col-xs-6, .#{$namespace}col-sm-6, .#{$namespace}col-xs-7, .#{$namespace}col-sm-7, .#{$namespace}col-xs-8, .#{$namespace}col-sm-8, .#{$namespace}col-xs-9, .#{$namespace}col-sm-9, .#{$namespace}col-xs-10, .#{$namespace}col-sm-10,  .#{$namespace}col-xs-11, .#{$namespace}col-sm-11, .#{$namespace}col-xs-12, .#{$namespace}col-sm-12 {
+  position: relative;
+  min-height: 1px;
+}
+.#{$namespace}row>[class*="#{$namespace}col-"]{
+  float: left;  
+}
 .#{$namespace}col-xs-12 {
     width: 100%;
 }

sass/segmented-controls.scss

@@ -14,7 +14,16 @@
     border: 1px solid $primary-color;
     border-radius: 3px;
     -webkit-touch-callout: none;//(iOS平台)分段选择禁止长按弹出菜单；
-
+    &.#{$namespace}segmented-control-vertical{
+        border-radius:0;
+        border-width: 0;
+        border-collapse: collapse;
+     .#{$namespace}control-item{
+         display: block;
+         border-left-width: 0;
+         border-bottom: 1px solid #c8c7cc;
+     }   
+    }
     &.#{$namespace}scroll-wrapper{
         height: 38px;
         .#{$namespace}scroll{
@@ -61,6 +70,14 @@
         width:100%;
         border:0;
         border-radius:0;
+        &.#{$namespace}segmented-control-vertical{
+             .#{$namespace}control-item{
+                 border-bottom: 1px solid #c8c7cc;
+                 &.#{$namespace}active {
+                   border-bottom: 1px solid #c8c7cc;
+                 }
+             }
+        }
         .#{$namespace}control-item {
             border:0;
             color: inherit;

sass/table-views.scss

@@ -461,15 +461,21 @@
 }
 //grid-9
 .#{$namespace}grid-view.#{$namespace}grid-9{
-    padding-right: 0;
     background-color: #f2f2f2;
-    padding: 1px 0 1px 0;
+    padding: 0;
+    margin:0;
+    border-left:1px solid #EEE;
+    border-top:1px solid #EEE;
+    @include clearfix();
+    &:after{
+        position:static;
+    }
     .#{$namespace}table-view-cell {
         vertical-align: top;
         padding:11px 15px;
-        border-left: 1px solid #EEE;
-        border-top: 1px solid #EEE;
-        margin: -1px 0 0 -1px;
+        margin:0;
+        border-right: 1px solid #EEE;
+        border-bottom: 1px solid #EEE;
         &.#{$namespace}active{
             background-color:#eee;
         }