Merge pull request #3 from dcloudio/master

与原版本保持一致

dist/css/mui.css

 /*!
  * =====================================================
- * Mui v2.2.0 (https://github.com/dcloudio/mui)
+ * Mui v2.4.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;
@@ -1931,6 +1954,10 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 
     background-color: #c8c7cc;
 }
+.mui-table-view:before
+{
+    top: -1px;
+}
 
 .mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon
 {
@@ -2045,8 +2072,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 
     padding: 11px 15px;
 
-    background-color: inherit;
-
     -webkit-touch-callout: none;
 }
 .mui-table-view-cell:after
@@ -2548,20 +2573,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 +3273,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 +3342,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;
@@ -3853,6 +3916,7 @@ select:focus
     height: 100%;
 
     vertical-align: top;
+    white-space: normal;
 }
 .mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item)
 {

examples/hello-mui/css/mui.css

 /*!
  * =====================================================
- * Mui v2.2.0 (https://github.com/dcloudio/mui)
+ * Mui v2.4.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;
@@ -1931,6 +1954,10 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 
     background-color: #c8c7cc;
 }
+.mui-table-view:before
+{
+    top: -1px;
+}
 
 .mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon
 {
@@ -2045,8 +2072,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
 
     padding: 11px 15px;
 
-    background-color: inherit;
-
     -webkit-touch-callout: none;
 }
 .mui-table-view-cell:after
@@ -2548,20 +2573,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 +3273,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 +3342,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;
@@ -3853,6 +3916,7 @@ select:focus
     height: 100%;
 
     vertical-align: top;
+    white-space: normal;
 }
 .mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item)
 {

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;
+	/*-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;*/
 }
-.mui-ios .mui-poppicker-body {
-	-webkit-perspective: 1200px;
-	perspective: 1200px;
-	-webkit-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,19 +93,17 @@
 							 * rs.i 分（minutes 的第二个字母），用法同年
 							 */
 							result.innerText = '选择结果: ' + rs.text;
-							
 							/* 
 							 * 返回 false 可以阻止选择框的关闭
 							 * return false;
 							 */
-							
 							/*
 							 * 释放组件资源，释放后将将不能再操作组件
 							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
 							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
-							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。
+							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
 							 */
-							picker.dispose(); 
+							picker.dispose();
 						});
 					}, false);
 				});

examples/hello-mui/examples/icons.html

@@ -11,7 +11,7 @@
 		<!--标准mui.css-->
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<!--App自定义的css-->
-		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
+		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css"/> -->
 		<style>
 			.flex-container {
 				display: -webkit-box;

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.4.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/lazyload-image.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 type="text/css">
-			p{
-				text-indent: 22px;
+<!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 type="text/css">
+			p {
+				text-indent: 22px;
 			}
-			.des {
-				margin: .5em 0;
-			}
-			.des>li {
-				font-size: 14px;
-				color: #8f8f94;
+			.des {
+				margin: .5em 0;
 			}
-		</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">lazyload（延迟加载） </h1>
-		</header>
-		<div class="mui-content">
-			<div class="mui-content-padded">
-				<p>延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：</p>
-				<ul class="des">
-					<li>加快页面渲染速度</li>
-					<li>提升页面滚动性能</li>
-					<li>默认不下载屏幕外的图片，减少网络流量</li>
-				</ul>
-			</div>
-			<ul id="list" class="mui-table-view mui-table-view-chevron">
-
-			</ul>
-		</div>
-	</body>
-	<script src="../js/mui.min.js "></script>
-	<script src="../js/mui.lazyload.js"></script>
-	<script src="../js/mui.lazyload.img.js"></script>
-	<script>
-		mui.init();
-		var createFragment = function(count) {
-			var fragment = document.createDocumentFragment();
-			var li;
-			for (var i = 0; i < count; i++) {
-				li = document.createElement('li');
-				li.className = 'mui-table-view-cell mui-media';
-				li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/'+(i%5+1)+'.jpg?version='+Math.random()*1000+'"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
-				fragment.appendChild(li);
-			}
-			return fragment;
-		};
-		(function($) {
-			var list = document.getElementById("list");
-			list.appendChild(createFragment(50));
-			$(document).imageLazyload({
-				placeholder: '../images/60x60.gif'
-			});
-		})(mui);
-	</script>
-
+			.des>li {
+				font-size: 14px;
+				color: #8f8f94;
+			}
+		</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">lazyload（延迟加载） </h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<p>延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：</p>
+				<ul class="des">
+					<li>加快页面渲染速度</li>
+					<li>提升页面滚动性能</li>
+					<li>默认不下载屏幕外的图片，减少网络流量</li>
+				</ul>
+			</div>
+			<ul id="list" class="mui-table-view mui-table-view-chevron">
+
+			</ul>
+		</div>
+	</body>
+	<script src="../js/mui.min.js "></script>
+	<script src="../js/mui.lazyload.js"></script>
+	<script src="../js/mui.lazyload.img.js"></script>
+	<script>
+		mui.init();
+		var createFragment = function(count) {
+			var fragment = document.createDocumentFragment();
+			var li;
+			for (var i = 0; i < count; i++) {
+				li = document.createElement('li');
+				li.className = 'mui-table-view-cell mui-media';
+				li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
+				fragment.appendChild(li);
+			}
+			return fragment;
+		};
+		(function($) {
+			var list = document.getElementById("list");
+			list.appendChild(createFragment(50));
+			$(document).imageLazyload({
+				placeholder: '../images/60x60.gif'
+			});
+		})(mui);
+	</script>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/numbox.html

@@ -57,10 +57,10 @@
 				<h5 class="mui-content-padded">取值操作</h5>
 				<div class="mui-numbox">
 					<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
-					<input id="testBox" class="mui-numbox-input" type="number" />
+					<input id="box" class="mui-numbox-input" type="number" />
 					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
 				</div>
-				<button id="getValue" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
+				<button id="btn" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
 				<h5 class="mui-content-padded">在行内</h5> 购买数量:
 				<div class="mui-numbox">
 					<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
@@ -99,17 +99,11 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script>
-			(function($, doc) {
-				$.init();
-				$.plusReady(function() {
-					var btnGetValue = doc.querySelector('#getValue');
-					var boxTest = doc.querySelector('#testBox');
-					btnGetValue.addEventListener('click', function(event) {
-						plus.nativeUI.alert('当前值: ' + boxTest.value, null, "提示");
-					});
-				});
-			}(mui, document));
+		<script>			
+			mui.init();
+			document.getElementById("btn").addEventListener('tap', function(event) {
+				mui.alert('当前值: ' + document.getElementById("box").value, null, "提示");
+			});
 		</script>
 	</body>
 

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.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,7 +61,8 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/mui.listpicker.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>
@@ -98,7 +100,7 @@
 						value: 'zhz',
 						text: '智子'
 					}, {
-						value: 'gezh',
+						value: 'gezh', 
 						text: '歌者'
 					}]);
 					var showUserPickerButton = doc.getElementById('showUserPicker');

examples/hello-mui/examples/pullrefresh_main.html

@@ -39,11 +39,7 @@
 			if(contentWebview==null){
 				contentWebview = plus.webview.currentWebview().children()[0];
 			}
-			if(mui.os.ios){
-				contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
-			}else{
-				contentWebview.evalJS('mui.scrollTo(0, 100)');
-			}
+			contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
 		});
 	</script>
 

examples/hello-mui/examples/setting.html

@@ -112,9 +112,7 @@
 			.mui-table-view {
 				margin-top: 20px;
 			}
-			.mui-table-view:after {
-				height: 0;
-			}
+			
 			.mui-table-view span.mui-pull-right {
 				color: #999;
 			}
@@ -215,7 +213,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.4.0</i></a>
 							</li>
 						</ul>
 						<ul class="mui-table-view">

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

@@ -46,8 +46,8 @@
 			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',
-				bottom: '50px'
+				top: '45px',
+				bottom: '51px'
 			};
 			
 			var aniShow = {};

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">
@@ -196,4 +200,4 @@
 
 	</body>
 
-</html>
+</html>
\ No newline at end of file

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/examples/tableviews-with-swipe.html

@@ -11,7 +11,7 @@
 		<!--标准mui.css-->
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<!--App自定义的css-->
-		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
 	</head>
 
 	<body>
@@ -91,11 +91,10 @@
 						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a>
 						<a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
 					</div>
-					<div class="mui-slider-handle mui-table">
+					<div class="mui-slider-handle">
 						<div class="mui-table-cell">
 							左滑显示多功能菜单
 						</div>
-
 					</div>
 				</li>
 				<li class="mui-table-view-cell">
@@ -140,10 +139,14 @@
 				//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
 				$('#OA_task_1').on('tap', '.mui-btn', function(event) {
 					var elem = this;
+					var li = elem.parentNode.parentNode;
 					mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
 						if (e.index == 0) {
-							var li = elem.parentNode.parentNode;
 							li.parentNode.removeChild(li);
+						} else {
+							setTimeout(function() {
+								$.swipeoutClose(li);
+							}, 0);
 						}
 					});
 				});
@@ -154,6 +157,10 @@
 					mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
 						if (e.index == 0) {
 							elem.parentNode.removeChild(elem);
+						} else {
+							setTimeout(function() {
+								$.swipeoutClose(elem);
+							}, 0);
 						}
 					});
 				});
@@ -163,10 +170,15 @@
 					mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
 						if (e.index == 0) {
 							elem.parentNode.removeChild(elem);
+						} else {
+							setTimeout(function() {
+								$.swipeoutClose(elem);
+							}, 0);
 						}
 					});
 				});
 			})(mui);
 		</script>
 	</body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/template.html

@@ -81,27 +81,25 @@
 			}
 		});
 		var contentWebview = null,self = null;
-		var titleElem = document.getElementById("title");
 		mui.plusReady(function () {
 			self = plus.webview.currentWebview();
-		});
+		});
 		mui.back = function() {
-			var current = plus.webview.currentWebview();
-			current.hide('auto');
+			self.hide('auto');
 			setTimeout(function() {
 				titleElem.className = 'mui-title mui-fadeout';
 				titleElem.innerText = '';
 				if(contentWebview==null){
-					contentWebview = current.children()[0];
+					contentWebview = self.children()[0];
 				}
 				contentWebview.hide("none");
 			}, 350);
 		}
 		
-		
-		var menu = document.getElementById("menu")
+		var titleElem = document.getElementById("title")
+		var menuElem = document.getElementById("menu")
 
-		 window.addEventListener("updateHeader", function(e) {
+		window.addEventListener("updateHeader", function(e) {
 			var title = e.detail.title;
 			var showMenu = e.detail.showMenu;
 			var href = e.detail.target;
@@ -132,7 +130,8 @@
 			}
 		});
 		
-		document.getElementById("menu").addEventListener('tap', function(e) {
+		
+		menuElem.addEventListener('tap', function(e) {
 			e.stopPropagation();
 			if(contentWebview==null){
 				contentWebview = plus.webview.currentWebview().children()[0];
@@ -145,6 +144,16 @@
 			}
 			contentWebview.evalJS('mui.scrollTo(0, 100)');
 		});
+		
+		mui.menu = function () {
+			console.log(menuElem.style.display);
+			if(menuElem.style.display !== "none"){
+				if(contentWebview==null){
+					contentWebview = plus.webview.currentWebview().children()[0];
+				}
+				contentWebview.evalJS('mui("#topPopover").popover("toggle")');
+			}
+		}
 	</script>
 
 </html>
\ No newline at end of file

examples/hello-mui/index-menu.html

@@ -90,7 +90,7 @@
 				var id = this.getAttribute("href");
 				var type = this.getAttribute("open-type");
 				var href = this.href;
-				if(type=="common"||(mui.os.ios&&!~id.indexOf('tab-with-viewpagerindicator.html')) ){
+				if(type=="common"||mui.os.ios){
 					var webview_style = {
 						popGesture: "close"
 					};

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.indexedlist.js

@@ -174,4 +174,14 @@
 		}
 	});
 
+	//mui(selector).indexedList 方式
+	$.fn.indexedList = function(options) {
+		//遍历选择的元素
+		this.each(function(i, element) {
+			if (element.indexedList) return;
+			element.indexedList = new IndexedList(element, options);
+		});
+		return this[0] ? this[0].indexedList : null;
+	};
+
 })(mui, window, document);
\ No newline at end of file

examples/hello-mui/js/mui.lazyload.img.js

@@ -4,50 +4,94 @@
 			this._super(element, options);
 		},
 		_init: function() {
-			this.options.selector = 'img[data-lazyload]';
+			this.options.selector = '[data-lazyload]';
 			this._super();
 		},
-		addElement: function(img) {
+		_set: function(element, uri) {
+			if (element.tagName === 'IMG') {
+				element.src = uri;
+			} else {
+				element.style.backgroundImage = "url(" + uri + ")";
+			}
+		},
+		_hasPlaceholder: function(element) {
+			if (element.offsetWidth) {
+				if (element.tagName === 'IMG') {
+					return !!element.src;
+				} else {
+					return !!element.style.backgroundImage;
+				}
+			}
+			return false;
+		},
+		_addPlaceHolder: function(element) {
 			var self = this;
-			var src = img.getAttribute('data-lazyload');
-			if (src) {
-				self.onPlaceHolder = self._createLoader(function(callback) {
-					var img = new Image();
-					var placeholder = self.options.placeholder;
-					img.src = placeholder;
-					img.onload = img.onerror = function() {
-						callback(placeholder)
-					};
+			if (element.tagName === 'IMG') {
+				self._counter++;
+				element.onload = function() {
+					self._counter--;
+					self.addCallback(element, self.handle);
+					this.onload = null;
+				};
+				self.onPlaceHolder(function(placeholder) {
+					self._set(element, placeholder);
 				});
-				if (img.offsetWidth) {
-					self.addCallback(img, self.handle);
+			} else {
+				element.style.backgroundImage = "url(" + self.options.placeholder + ")";
+			}
+		},
+		addElement: function(element) {
+			var self = this;
+			var uri = element.getAttribute('data-lazyload');
+			if (uri) {
+				if (self._hasPlaceholder(element)) {
+					self.addCallback(element, self.handle);
 				} else {
-					self._counter++;
-					img.onload = function() {
-						self._counter--;
-						self.addCallback(img, self.handle);
-						this.onload = null;
-					};
-					if (!img.src) {
-						self.onPlaceHolder(function(placeholder) {
-							if (!img.src) {
-								img.src = placeholder;
-							}
-						});
-					}
+					self.onPlaceHolder = self._createLoader(function(callback) {
+						var img = new Image();
+						var placeholder = self.options.placeholder;
+						img.src = placeholder;
+						img.onload = img.onerror = function() {
+							callback(placeholder);
+						};
+					});
+					self._addPlaceHolder(element);
 				}
 				return true;
 			}
 			return false;
 		},
-		handle: function(img, key) {
-			var dataSrc = img.getAttribute('data-lazyload');
-			if (dataSrc && img.src != dataSrc) {
-				img.src = dataSrc;
-				img.removeAttribute('data-lazyload');
-				img.parentNode.parentNode.setAttribute('data-lazyload', 'true');
+		set: function(element, uri) {
+			var self = this;
+			var img = new Image();
+			img.onload = function() {
+				self._set(element, uri);
+				$.trigger(self.element, 'success', {
+					element: element,
+					uri: uri
+				});
+			};
+			img.onerror = function() {
+				$.trigger(self.element, 'error', {
+					element: element,
+					uri: uri
+				});
+			};
+			img.src = uri;
+			element.removeAttribute('data-lazyload'); //只尝试一次，后续可能支持多次尝试
+		},
+		handle: function(element, key) {
+			var uri = element.getAttribute('data-lazyload');
+			if (uri) {
+				this.set(element, uri);
+				//element.parentNode.parentNode.setAttribute('data-lazyload', 'true'); //debug
 			}
+		},
+		destroy: function() {
+			this._super();
+			this.element.removeAttribute('data-imageLazyload');
 		}
+
 	});
 	$.fn.imageLazyload = function(options) {
 		var lazyloadApis = [];

examples/hello-mui/js/mui.locker.js

@@ -17,7 +17,7 @@
 	var styleHolder = doc.querySelector('head') || doc.querySelector('body');
 	styleHolder.innerHTML += "<style>.mui-locker-holder{overflow:hidden;position:relative;padding:0px;}.mui-locker-holder canvas{width:100%;height:100%;}</style>";
 
-	var times = 4;
+	var times = 2;
 
 	function getElementLeft(element) {　　　　
 		var actualLeft = element.offsetLeft;　　　　
@@ -56,13 +56,11 @@
 				throw "构造 Locker 时缺少容器元素";
 			}
 			self.holder = holder;
-			//避免重复初始化开始
-			if (self.holder.__locker_inited) return;
-			self.holder.__locker_inited = true;
-			//避免重复初始化结束
 			//
-			self.options = options || {};
-			self.options.callback = self.options.callback || self.options.done || $.noop;
+			options = options || {};
+			options.callback = options.callback || options.done || $.noop;
+			options.times = options.times || times;
+			self.options = options;
 			self.holder.innerHTML = '<canvas></canvas>';
 			//
 			self.holder.classList.add(lockerHolderClassName);
@@ -80,11 +78,11 @@
 			self.CW = self.options.width || self.holder.offsetWidth || self.CW;
 			self.CH = self.options.height || self.holder.offsetHeight || self.CH;
 			//处理 “宽、高” 等数值, 全部扩大 times 倍
-			self.R *= times;
-			self.CW *= times;
-			self.CH *= times;
-			self.OffsetX *= times;
-			self.OffsetY *= times;
+			self.R *= self.options.times;
+			self.CW *= self.options.times;
+			self.CH *= self.options.times;
+			self.OffsetX *= self.options.times;
+			self.OffsetY *= self.options.times;
 			//
 			canvas.width = self.CW;
 			canvas.height = self.CH;
@@ -131,7 +129,7 @@
 					var pointIndex = _LinePointArr[i];
 					cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
 				}
-				cxt.lineWidth = 2 * times;
+				cxt.lineWidth = (self.options.lindeWidth || 2) * self.options.times;
 				cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
 				cxt.stroke();
 				cxt.closePath();
@@ -149,18 +147,18 @@
 				var Point = _PointLocationArr[i];
 				cxt.fillStyle = self.options.ringColor || "#888"; //圆圈边框颜色
 				cxt.beginPath();
-				cxt.arc(Point.X, Point.Y, R, 0, Math.PI * times, true);
+				cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
 				cxt.closePath();
 				cxt.fill();
 				cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色
 				cxt.beginPath();
-				cxt.arc(Point.X, Point.Y, R - (2 * times), 0, Math.PI * times, true);
+				cxt.arc(Point.X, Point.Y, R - ((self.options.ringWidth || 2) * self.options.times), 0, Math.PI * 2, true);
 				cxt.closePath();
 				cxt.fill();
 				if (_LinePointArr.indexOf(i) >= 0) {
 					cxt.fillStyle = self.options.pointColor || "#777"; //圆圈中心点颜色
 					cxt.beginPath();
-					cxt.arc(Point.X, Point.Y, R - (16 * times), 0, Math.PI * times, true);
+					cxt.arc(Point.X, Point.Y, R - ((self.options.pointWidth || 16) * self.options.times), 0, Math.PI * 2, true);
 					cxt.closePath();
 					cxt.fill();
 				}
@@ -190,8 +188,8 @@
 			//start
 			self._startHandler = function(e) {
 				e.point = event.changedTouches ? event.changedTouches[0] : event;
-				e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
-				e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
+				e.point.elementX = (e.point.pageX - getElementLeft(holder)) * self.options.times;
+				e.point.elementY = (e.point.pageY - getElementTop(holder)) * self.options.times;
 				self.isPointSelect(e.point, linePoint);
 				isDown = true;
 			};
@@ -201,8 +199,8 @@
 				if (!isDown) return;
 				e.preventDefault();
 				e.point = event.changedTouches ? event.changedTouches[0] : event;
-				e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
-				e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
+				e.point.elementX = (e.point.pageX - getElementLeft(holder)) * self.options.times;
+				e.point.elementY = (e.point.pageY - getElementTop(holder)) * self.options.times;
 				var touches = e.point;
 				self.isPointSelect(touches, linePoint);
 				cxt.clearRect(0, 0, self.CW, self.CH);
@@ -215,8 +213,8 @@
 			//end
 			self._endHandler = function(e) {
 				e.point = event.changedTouches ? event.changedTouches[0] : event;
-				e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
-				e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
+				e.point.elementX = (e.point.pageX - getElementLeft(holder)) * self.options.times;
+				e.point.elementY = (e.point.pageY - getElementTop(holder)) * self.options.times;
 				cxt.clearRect(0, 0, self.CW, self.CH);
 				self.draw(cxt, self.pointLocationArr, linePoint, null);
 				//事件数据
@@ -276,8 +274,9 @@
 	$.fn.locker = function(options) {
 		//遍历选择的元素
 		this.each(function(i, element) {
+			if (element.locker) return;
 			if (options) {
-				new Locker(element, options);
+				element.locker = new Locker(element, options);
 			} else {
 				var optionsText = element.getAttribute('data-locker-options');
 				var _options = optionsText ? JSON.parse(optionsText) : {};
@@ -287,10 +286,10 @@
 				_options.pointColor = element.getAttribute('data-locker-point-color') || _options.pointColor;
 				_options.width = element.getAttribute('data-locker-width') || _options.width;
 				_options.height = element.getAttribute('data-locker-height') || _options.height;
-				new Locker(element, _options);
+				element.locker = new Locker(element, _options);
 			}
 		});
-		return this;
+		return this[0] ? this[0].locker : null;
 	};
 
 	//自动处理 class='mui-locker' 的 dom

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

@@ -24,9 +24,6 @@
 			document.body.appendChild(div.firstElementChild);
 			el = document.getElementById(this.options.id);
 		}
-		//自动启用
-		$.options.gestureConfig.pinch = true;
-		$.options.gestureConfig.doubletap = true;
 
 		this.element = el;
 		this.scroller = this.element.querySelector($.classSelector('.slider-group'));

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

@@ -36,6 +36,9 @@
 					contentrefresh: '正在加载...',
 					contentnomore: '没有更多数据了',
 					callback: false
+				},
+				preventDefaultException: {
+					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
 				}
 			}, options);
 			this.stopped = this.isNeedRefresh = this.isDragging = false;
@@ -45,8 +48,17 @@
 
 			this.initEvent();
 		},
+		_preventDefaultException: function(el, exceptions) {
+			for (var i in exceptions) {
+				if (exceptions[i].test(el[i])) {
+					return true;
+				}
+			}
+			return false;
+		},
 		initEvent: function() {
 			if ($.isFunction(this.options.down.callback)) {
+				this.element.addEventListener('touchstart', this);
 				this.element.addEventListener('drag', this);
 				this.element.addEventListener('dragend', this);
 			}
@@ -60,6 +72,9 @@
 		},
 		handleEvent: function(e) {
 			switch (e.type) {
+				case 'touchstart':
+					this.isInScroll && this._canPullDown() && e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
+					break;
 				case 'drag':
 					this._drag(e);
 					break;
@@ -127,7 +142,7 @@
 			if (self.loading) {
 				return;
 			}
-			if (e && e.detail && e.detail.drag) {
+			if (e && e.detail && $.gestures.session.drag) {
 				self.isDraggingUp = true;
 			} else {
 				if (!self.isDraggingUp) { //scroll event
@@ -175,6 +190,11 @@
 			var detail = e.detail;
 			if (!this.isDragging) {
 				if (detail.direction === 'down' && this._canPullDown()) {
+					if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {
+						e.stopPropagation();
+						e.detail.gesture.preventDefault();
+						return;
+					}
 					this.isDragging = true;
 					this.removing = false;
 					this.startDeltaY = detail.deltaY;

examples/hello-mui/js/mui.zoom.js

@@ -26,6 +26,9 @@
 		zoom.zoomerStyle = zoom.zoomer && zoom.zoomer.style;
 
 		zoom.init = function() {
+			//自动启用
+			$.options.gestureConfig.pinch = true;
+			$.options.gestureConfig.doubletap = true;
 			zoom.initEvents();
 		};
 

examples/hello-mui/list.html

@@ -163,7 +163,7 @@
 				</li>
 
 				<li class="mui-table-view-cell">
-					<a class="mui-navigate-right" href="examples/icons.html">
+					<a class="mui-navigate-right" open-type="common" href="examples/icons.html">
 						icon（图标）
 					</a>
 				</li>
@@ -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:{
@@ -548,6 +551,10 @@
 						webview_style.zindex = 9998;
 						webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
 					}
+					//图标界面需要启动硬件加速
+					if(~id.indexOf('icons.html')){
+						webview_style.hardwareAccelerated = true;
+					}
 					mui.openWindow({
 						id: id,
 						url: this.href,
@@ -560,7 +567,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);
 
@@ -277,12 +277,12 @@
 		_start: function(e) {
 			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

@@ -20,10 +20,13 @@
 			}
 		},
 		_start: function(e) {
+			//仅下拉刷新在start阻止默认事件
+			if (e.touches && e.touches.length && e.touches[0].clientX > 30) {
+				e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
+			}
 			if (!this.loading) {
 				this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
 			}
-			e.preventDefault();
 			this._super(e);
 		},
 		_drag: function(e) {

js/mui.fixed.keyboard.js

@@ -21,7 +21,8 @@
 				}
 			}
 			var target = e.target;
-			if (target.tagName && target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')) {
+			//TODO 需考虑所有键盘弹起的情况
+			if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) {
 				if (target.disabled || target.readOnly) {
 					return;
 				}

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.init.5+.js

@@ -36,10 +36,7 @@
 	 * @returns {Object}
 	 */
 	$.waitingOptions = function(options) {
-		return $.extend({
-			autoShow: true,
-			title: ''
-		}, options);
+		return $.extend(true,{},{autoShow: true,title: ''}, options);
 	};
 	/**
 	 * 窗口显示配置
@@ -165,20 +162,17 @@
 		}
 		options = options || {};
 		var params = options.params || {};
-		var webview, nShow, nWaiting;
-		if ($.webviews[id]) { //已缓存
-			var webviewCache = $.webviews[id];
-			webview = webviewCache.webview;
-			//需要处理用户手动关闭窗口的情况，此时webview应该是空的；
-			if (!webview || !webview.getURL()) {
-				//再次新建一个webview；
-				options = $.extend(options, {
-					id: id,
-					url: url,
-					preload: true
-				}, true);
-				webview = $.createWindow(options);
+		var webview = null,webviewCache = null, nShow, nWaiting;
+
+		if($.webviews[id]){
+			webviewCache = $.webviews[id];
+			//webview真实存在，才能获取
+			if(plus.webview.getWebviewById(id)){
+				webview = webviewCache.webview;
 			}
+		}
+
+		if (webviewCache&&webview) { //已缓存
 			//每次show都需要传递动画参数；
 			//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
 			nShow = webviewCache.show;

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) {
@@ -47,10 +49,21 @@
 				self.input.value = val.toString();
 				$.trigger(self.input, changeEventName, null);
 			});
-			self.input.addEventListener(changeEventName, function(event) {
-				self.checkValue();
-			});
+//			self.input.addEventListener(changeEventName, function(event) {
+//				self.checkValue();
+//				$.trigger(self, changeEventName, self.getValue());
+//			});
+		},
+		/**
+		 * 获取当前值
+		 **/
+		getValue: function() {
+			var self = this;
+			return parseInt(self.input.value);
 		},
+		/**
+		 * 验证当前值是法合法
+		 **/
 		checkValue: function() {
 			var self = this;
 			var val = self.input.value;
@@ -73,28 +86,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/popovers.js

@@ -78,10 +78,11 @@
 
 		return element;
 	}());
+	var removeBackdropTimer;
 	var removeBackdrop = function(popover) {
 		backdrop.setAttribute('style', 'opacity:0');
 		$.targets.popover = $.targets._popover = null; //reset
-		setTimeout(function() {
+		removeBackdropTimer = $.later(function() {
 			if (!popover.classList.contains(CLASS_ACTIVE) && backdrop.parentNode && backdrop.parentNode === document.body) {
 				document.body.removeChild(backdrop);
 			}
@@ -106,6 +107,7 @@
 	});
 
 	var togglePopover = function(popover, anchor) {
+		removeBackdropTimer && removeBackdropTimer.cancel(); //取消remove的timer
 		//remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove
 		popover.removeEventListener('webkitTransitionEnd', onPopoverShown);
 		popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);

js/pullrefresh.5+.js

@@ -29,6 +29,7 @@
 			var self = this;
 			//			document.addEventListener('plusscrollbottom', this);
 			window.addEventListener('dragup', self);
+			document.addEventListener("plusscrollbottom", self);
 			self.scrollInterval = window.setInterval(function() {
 				if (self.isScroll && !self.loading) {
 					if (window.pageYOffset + window.innerHeight + 10 >= document.documentElement.scrollHeight) {
@@ -96,7 +97,7 @@
 			//				}
 			//			}
 			self.isScroll = false;
-			if (e.type === 'dragup') {
+			if (e.type === 'dragup' || e.type === 'plusscrollbottom') {
 				self.isScroll = true;
 				setTimeout(function() {
 					self.isScroll = false;
@@ -190,7 +191,8 @@
 					self.pullCaption.innerHTML = self.options.up.contentnomore;
 					//					self.bottomPocket.classList.remove(CLASS_BLOCK);
 					//					self.bottomPocket.classList.add(CLASS_HIDDEN);
-					//					document.removeEventListener('plusscrollbottom', self);
+					//取消5+的plusscrollbottom事件
+					document.removeEventListener('plusscrollbottom', self);
 					window.removeEventListener('dragup', self);
 				} else { //初始化时隐藏，后续不再隐藏
 					self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
@@ -211,10 +213,11 @@
 			this.bottomPocket.classList.remove(CLASS_HIDDEN);
 			this.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
 			this.pullCaption.innerHTML = this.options.up.contentdown;
+			document.addEventListener("plusscrollbottom", this);
 			window.addEventListener('dragup', this);
 		},
 		scrollTo: function(x, y, time) {
-			$.scrollTo(x, y, time);
+			$.scrollTo(y, time);
 		},
 		refresh: function(isReset) {
 			if (isReset && this.finished) {

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))) {
-			event.preventDefault(); //stop hash change
+			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,15 +435,19 @@
 			var input = cell.querySelector('input[type=radio]');
 			if (input) {
 				//				input.click();
-				input.checked = !input.checked;
-				$.trigger(input, 'change');
+				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();
-				input.checked = !input.checked;
-				$.trigger(input, 'change');
+				if (!input.disabled && !input.readOnly) {
+					input.checked = !input.checked;
+					$.trigger(input, 'change');
+				}
 			}
 		}
 	};

package.json

 {
   "name": "mui",
   "description": "Build mobile apps with simple HTML, CSS, and JS components.",
-  "version": "2.2.0",
+  "version": "2.4.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/sliders.scss

@@ -36,6 +36,7 @@
 //          -webkit-backface-visibility: hidden;
             position: relative;
             display: inline-block;
+            white-space:normal;
             width: 100%;
             height: 100%;
             font-size: 14px;

sass/table-views.scss

@@ -13,6 +13,9 @@
 //  border-width: 1px 0px 1px 0px;
 //  border-style: solid;
     @include hairline(double, #c8c7cc, 0); // Double grey border.
+    &:before{
+        top:-1px;//cell 高亮时，保证边框仍旧可见
+    }
 
 }
 //.#{$namespace}table-view-striped>li:nth-child(odd){
@@ -83,7 +86,7 @@
     position: relative;
     padding: 11px 15px;
     overflow: hidden;
-    background-color: inherit;
+    //background-color: inherit;//应该透明，否则会盖住ul的边框
     @include hairline(single, #c8c7cc, 15px); // Single grey border with 15px offset.
     -webkit-touch-callout: none;//禁止长按出现打开菜单；
     &.#{$namespace}radio input[type=radio],&.#{$namespace}checkbox input[type=checkbox]{
@@ -461,15 +464,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;
         }