Skip to content

M
mui
Commit 3901e0c2 authored by hbcui1984's avatar hbcui1984
Browse files
Options

更新Hello mui

parent 1f3f986c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1952 additions and 98 deletions
examples/hello-mui/css/mui.dtpicker.css
View file @ 3901e0c2
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 200px; height: 200px;
border-top: solid 1px #eee; /*border-top: solid 1px #eee;
background-color: #fff; background-color: #fff;*/
} }
.mui-ios .mui-dtpicker-body { .mui-ios .mui-dtpicker-body {
-webkit-perspective: 1200px; -webkit-perspective: 1200px;
...@@ -60,9 +60,10 @@ ...@@ -60,9 +60,10 @@
padding: 8px; padding: 8px;
text-align: center; text-align: center;
border-top: solid 1px #ddd; 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%; width: 20%;
height: 100%; height: 100%;
margin: 0px; margin: 0px;
...@@ -71,17 +72,17 @@ ...@@ -71,17 +72,17 @@
} }
/*年月日时分*/ /*年月日时分*/
[data-type="datetime"] .mui-listpicker, [data-type="datetime"] .mui-picker,
[data-type="time"] .mui-dtpicker-title h5 { [data-type="time"] .mui-dtpicker-title h5 {
width: 20%; width: 20%;
} }
[data-type="datetime"] [data-id="picker-h"], [data-type="datetime"] [data-id="picker-h"],
[data-type="datetime"] [data-id="title-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 { [data-type="date"] .mui-dtpicker-title h5 {
width: 33.3%; width: 33.3%;
} }
...@@ -93,7 +94,7 @@ ...@@ -93,7 +94,7 @@
} }
/*年月日时*/ /*年月日时*/
[data-type="hour"] .mui-listpicker, [data-type="hour"] .mui-picker,
[data-type="hour"] .mui-dtpicker-title h5 { [data-type="hour"] .mui-dtpicker-title h5 {
width: 25%; width: 25%;
} }
...@@ -103,11 +104,11 @@ ...@@ -103,11 +104,11 @@
} }
[data-type="hour"] [data-id="picker-h"], [data-type="hour"] [data-id="picker-h"],
[data-type="hour"] [data-id="title-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 { [data-type="time"] .mui-dtpicker-title h5 {
width: 50%; width: 50%;
} }
...@@ -121,7 +122,7 @@ ...@@ -121,7 +122,7 @@
} }
/*年月*/ /*年月*/
[data-type="month"] .mui-listpicker, [data-type="month"] .mui-picker,
[data-type="month"] .mui-dtpicker-title h5 { [data-type="month"] .mui-dtpicker-title h5 {
width: 50%; width: 50%;
} }
......
examples/hello-mui/css/mui.picker.all.css 0 → 100644
View file @ 3901e0c2
/**
* 选择列表插件
* 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 0 → 100644
View file @ 3901e0c2
/**
* 选择列表插件
* 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 0 → 100644
View file @ 3901e0c2
/**
* 选择列表插件
* 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
View file @ 3901e0c2
...@@ -13,11 +13,6 @@ ...@@ -13,11 +13,6 @@
.mui-poppicker.mui-active { .mui-poppicker.mui-active {
-webkit-transform: translateY(0px); -webkit-transform: translateY(0px);
} }
/*用于将 html body 禁止滚动条*/
.mui-poppicker-active-for-page {
overflow: hidden !important;
}
.mui-android-5-1 .mui-poppicker { .mui-android-5-1 .mui-poppicker {
bottom: -300px; bottom: -300px;
-webkit-transition-property: bottom; -webkit-transition-property: bottom;
...@@ -55,14 +50,12 @@ ...@@ -55,14 +50,12 @@
width: 100%; width: 100%;
height: 200px; height: 200px;
border-top: solid 1px #ddd; border-top: solid 1px #ddd;
/*-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;*/
} }
.mui-ios .mui-poppicker-body { .mui-poppicker-body .mui-picker {
-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-poppicker-body .mui-listpicker {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0px; margin: 0px;
......
examples/hello-mui/examples/dtpicker.html
View file @ 3901e0c2
...@@ -9,8 +9,9 @@ ...@@ -9,8 +9,9 @@
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../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.dtpicker.css" rel="stylesheet" /> <link href="../css/mui.dtpicker.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
<style> <style>
html, html,
body, body,
...@@ -62,8 +63,9 @@ ...@@ -62,8 +63,9 @@
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/mui.listpicker.js"></script> <!--<script src="../js/mui.picker.js"></script>
<script src="../js/mui.dtpicker.js"></script> <script src="../js/mui.dtpicker.js"></script>-->
<script src="../js/mui.picker.min.js"></script>
<script> <script>
(function($) { (function($) {
$.init(); $.init();
...@@ -91,19 +93,17 @@ ...@@ -91,19 +93,17 @@
* rs.i 分（minutes 的第二个字母），用法同年 * rs.i 分（minutes 的第二个字母），用法同年
*/ */
result.innerText = '选择结果: ' + rs.text; result.innerText = '选择结果: ' + rs.text;
/* /*
* 返回 false 可以阻止选择框的关闭 * 返回 false 可以阻止选择框的关闭
* return false; * return false;
*/ */
/* /*
* 释放组件资源，释放后将将不能再操作组件 * 释放组件资源，释放后将将不能再操作组件
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
*/ */
picker.dispose(); picker.dispose();
}); });
}, false); }, false);
}); });
......
examples/hello-mui/examples/info.html
View file @ 3901e0c2
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
</style> </style>
</head> </head>
<body> <body>
<!--<header class="mui-bar mui-bar-nav"> <!--<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">关于</h1> <h1 class="mui-title">关于</h1>
</header>--> </header>-->
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</p> </p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p> <p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4> <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> <h4>License</h4>
<p> <p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>; mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/picker.html
View file @ 3901e0c2
...@@ -9,8 +9,9 @@ ...@@ -9,8 +9,9 @@
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../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 href="../css/mui.poppicker.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
<style> <style>
.mui-btn { .mui-btn {
font-size: 16px; font-size: 16px;
...@@ -60,8 +61,9 @@ ...@@ -60,8 +61,9 @@
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script> <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.poppicker.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.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script> <script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script> <script>
...@@ -98,7 +100,7 @@ ...@@ -98,7 +100,7 @@
value: 'zhz', value: 'zhz',
text: '智子' text: '智子'
}, { }, {
value: 'gezh', value: 'gezh',
text: '歌者' text: '歌者'
}]); }]);
var showUserPickerButton = doc.getElementById('showUserPicker'); var showUserPickerButton = doc.getElementById('showUserPicker');
......
examples/hello-mui/examples/setting.html
View file @ 3901e0c2
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
</ul> </ul>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <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> </li>
</ul> </ul>
<ul class="mui-table-view"> <ul class="mui-table-view">
......
examples/hello-mui/examples/tab-with-segmented-control-vertical.html 0 → 100644
View file @ 3901e0c2
<!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');
window.addEventListener('tap', function(e) {
console.log(document.location.hash);
})
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 3901e0c2
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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> </header>
<div class="mui-content"> <div class="mui-content">
<div style="padding: 10px 10px;"> <div style="padding: 10px 10px;">
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 3901e0c2
...@@ -25,6 +25,10 @@ ...@@ -25,6 +25,10 @@
margin-top: 50px; margin-top: 50px;
} }
</style> </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 class="mui-content">
<div id="slider" class="mui-slider"> <div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
...@@ -196,4 +200,4 @@ ...@@ -196,4 +200,4 @@
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ 3901e0c2
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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> </header>
<nav class="mui-bar mui-bar-tab "> <nav class="mui-bar mui-bar-tab ">
<a class="mui-tab-item" href="#Popover_0">产品</a> <a class="mui-tab-item" href="#Popover_0">产品</a>
......
examples/hello-mui/examples/tabbar.html
View file @ 3901e0c2
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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> </header>
<nav class="mui-bar mui-bar-tab"> <nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar"> <a class="mui-tab-item mui-active" href="#tabbar">
......
examples/hello-mui/js/mui.dtpicker.js
View file @ 3901e0c2
...@@ -6,6 +6,23 @@ ...@@ -6,6 +6,23 @@
*/ */
(function($, document) { (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">\ var domBuffer = '<div class="mui-dtpicker" data-type="datetime">\
<div class="mui-dtpicker-header">\ <div class="mui-dtpicker-header">\
<button data-id="btn-cancel" class="mui-btn">取消</button>\ <button data-id="btn-cancel" class="mui-btn">取消</button>\
...@@ -13,47 +30,56 @@ ...@@ -13,47 +30,56 @@
</div>\ </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-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 class="mui-dtpicker-body">\
<div data-id="picker-y" class="mui-listpicker">\ <div data-id="picker-y" class="mui-picker">\
<div class="mui-listpicker-inner">\ <div class="mui-picker-inner">\
<ul>\ <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\ </ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\ </div>\
</div>\ </div>\
<div data-id="picker-m" class="mui-listpicker">\ <div data-id="picker-m" class="mui-picker">\
<div class="mui-listpicker-inner">\ <div class="mui-picker-inner">\
<ul>\ <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\ </ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\ </div>\
</div>\ </div>\
<div data-id="picker-d" class="mui-listpicker">\ <div data-id="picker-d" class="mui-picker">\
<div class="mui-listpicker-inner">\ <div class="mui-picker-inner">\
<ul>\ <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\ </ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\ </div>\
</div>\ </div>\
<div data-id="picker-h" class="mui-listpicker">\ <div data-id="picker-h" class="mui-picker">\
<div class="mui-listpicker-inner">\ <div class="mui-picker-inner">\
<ul>\ <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\ </ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\ </div>\
</div>\ </div>\
<div data-id="picker-i" class="mui-listpicker">\ <div data-id="picker-i" class="mui-picker">\
<div class="mui-listpicker-inner">\ <div class="mui-picker-inner">\
<ul>\ <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\ </ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\ </div>\
</div>\ </div>\
</div>\ </div>\
</div>'; </div>';
//plugin //plugin
var DtPicker = $.DtPicker = $.Class.extend({ var DtPicker = $.DtPicker = $.Class.extend({
init: function(options) { init: function(options) {
var self = this; var self = this;
var _picker = $.dom(domBuffer)[0]; var _picker = $.dom(domBuffer)[0];
document.body.appendChild(_picker); document.body.appendChild(_picker);
$('[data-id*="picker"]', _picker).listpicker(); $('[data-id*="picker"]', _picker).picker();
var ui = self.ui = { var ui = self.ui = {
picker: _picker, picker: _picker,
mask: $.createMask(), mask: $.createMask(),
...@@ -85,6 +111,13 @@ ...@@ -85,6 +111,13 @@
self.hide(); self.hide();
}, false); }, false);
self._create(options); 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() { getSelected: function() {
var self = this; var self = this;
...@@ -92,11 +125,11 @@ ...@@ -92,11 +125,11 @@
var type = self.options.type; var type = self.options.type;
var selected = { var selected = {
type: type, type: type,
y: ui.y.getSelectedItem(), y: ui.y.picker.getSelectedItem(),
m: ui.m.getSelectedItem(), m: ui.m.picker.getSelectedItem(),
d: ui.d.getSelectedItem(), d: ui.d.picker.getSelectedItem(),
h: ui.h.getSelectedItem(), h: ui.h.picker.getSelectedItem(),
i: ui.i.getSelectedItem(), i: ui.i.picker.getSelectedItem(),
toString: function() { toString: function() {
return this.value; return this.value;
} }
...@@ -129,11 +162,11 @@ ...@@ -129,11 +162,11 @@
var self = this; var self = this;
var ui = self.ui; var ui = self.ui;
var parsedValue = self._parseValue(value); var parsedValue = self._parseValue(value);
ui.y.setSelectedValue(parsedValue.y, true); ui.y.picker.setSelectedValue(parsedValue.y, 0);
ui.m.setSelectedValue(parsedValue.m, true); ui.m.picker.setSelectedValue(parsedValue.m, 0);
ui.d.setSelectedValue(parsedValue.d, true); ui.d.picker.setSelectedValue(parsedValue.d, 0);
ui.h.setSelectedValue(parsedValue.h, true); ui.h.picker.setSelectedValue(parsedValue.h, 0);
ui.i.setSelectedValue(parsedValue.i, true); ui.i.picker.setSelectedValue(parsedValue.i, 0);
}, },
isLeapYear: function(year) { isLeapYear: function(year) {
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0); return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
...@@ -182,8 +215,8 @@ ...@@ -182,8 +215,8 @@
}); });
} }
} }
ui.y.setItems(yArray); ui.y.picker.setItems(yArray);
//ui.y.setSelectedValue(current); //ui.y.picker.setSelectedValue(current);
}, },
_createMonth: function(current) { _createMonth: function(current) {
var self = this; var self = this;
...@@ -202,8 +235,8 @@ ...@@ -202,8 +235,8 @@
}); });
} }
} }
ui.m.setItems(mArray); ui.m.picker.setItems(mArray);
//ui.m.setSelectedValue(current); //ui.m.picker.setSelectedValue(current);
}, },
_createDay: function(current) { _createDay: function(current) {
var self = this; var self = this;
...@@ -214,7 +247,7 @@ ...@@ -214,7 +247,7 @@
if (options.customData.d) { if (options.customData.d) {
dArray = options.customData.d; dArray = options.customData.d;
} else { } 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++) { for (var d = 1; d <= maxDay; d++) {
var val = self._fill(d); var val = self._fill(d);
dArray.push({ dArray.push({
...@@ -223,9 +256,9 @@ ...@@ -223,9 +256,9 @@
}); });
} }
} }
ui.d.setItems(dArray); ui.d.picker.setItems(dArray);
current = current || ui.d.getSelectedValue(); current = current || ui.d.picker.getSelectedValue();
//ui.d.setSelectedValue(current); //ui.d.picker.setSelectedValue(current);
}, },
_createHours: function(current) { _createHours: function(current) {
var self = this; var self = this;
...@@ -244,8 +277,8 @@ ...@@ -244,8 +277,8 @@
}); });
} }
} }
ui.h.setItems(hArray); ui.h.picker.setItems(hArray);
//ui.h.setSelectedValue(current); //ui.h.picker.setSelectedValue(current);
}, },
_createMinutes: function(current) { _createMinutes: function(current) {
var self = this; var self = this;
...@@ -264,8 +297,8 @@ ...@@ -264,8 +297,8 @@
}); });
} }
} }
ui.i.setItems(iArray); ui.i.picker.setItems(iArray);
//ui.i.setSelectedValue(current); //ui.i.picker.setSelectedValue(current);
}, },
_setLabels: function() { _setLabels: function() {
var self = this; var self = this;
...@@ -336,6 +369,11 @@ ...@@ -336,6 +369,11 @@
ui.mask.show(); ui.mask.show();
document.body.classList.add($.className('dtpicker-active-for-page')); document.body.classList.add($.className('dtpicker-active-for-page'));
ui.picker.classList.add($.className('active')); ui.picker.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
}, },
hide: function() { hide: function() {
var self = this; var self = this;
...@@ -344,6 +382,8 @@ ...@@ -344,6 +382,8 @@
ui.picker.classList.remove($.className('active')); ui.picker.classList.remove($.className('active'));
ui.mask.close(); ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page')); document.body.classList.remove($.className('dtpicker-active-for-page'));
//处理物理返回键
$.back=self.__back;
}, },
dispose: function() { dispose: function() {
var self = this; var self = this;
......
examples/hello-mui/js/mui.picker.all.js 0 → 100644
View file @ 3901e0c2
This diff is collapsed.
examples/hello-mui/js/mui.picker.js 0 → 100644
View file @ 3901e0c2
This diff is collapsed.
examples/hello-mui/js/mui.picker.min.js 0 → 100644
View file @ 3901e0c2
This diff is collapsed.
examples/hello-mui/js/mui.poppicker.js
View file @ 3901e0c2
/** /**
* 弹出选择列表插件 * 弹出选择列表插件
* 此组件依赖 listpcker ，请在页面中先引入 mui.listpicker.css + mui.listpicker.js * 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
* varstion 1.0.1 * varstion 1.0.1
* by Houfeng * by Houfeng
* Houfeng@DCloud.io * Houfeng@DCloud.io
...@@ -8,6 +8,22 @@ ...@@ -8,6 +8,22 @@
(function($, document) { (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">\ var panelBuffer = '<div class="mui-poppicker">\
<div class="mui-poppicker-header">\ <div class="mui-poppicker-header">\
<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\ <button class="mui-btn mui-poppicker-btn-cancel">取消</button>\
...@@ -18,10 +34,12 @@ ...@@ -18,10 +34,12 @@
</div>\ </div>\
</div>'; </div>';
var pickerBuffer = '<div class="mui-listpicker">\ var pickerBuffer = '<div class="mui-picker">\
<div class="mui-listpicker-inner">\ <div class="mui-picker-inner">\
<ul>\ <div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\ </ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\ </div>\
</div>'; </div>';
...@@ -54,25 +72,32 @@ ...@@ -54,25 +72,32 @@
self.mask[0].addEventListener('tap', function() { self.mask[0].addEventListener('tap', function() {
self.hide(); self.hide();
}, false); }, 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 self = this;
var layer = self.options.layer || 1; var layer = self.options.layer || 1;
var width = (100 / layer) + '%'; var width = (100 / layer) + '%';
self.pickers = []; self.pickers = [];
for (var i = 1; i <= layer; i++) { for (var i = 1; i <= layer; i++) {
var picker = $.dom(pickerBuffer)[0]; var pickerElement = $.dom(pickerBuffer)[0];
picker.style.width = width; pickerElement.style.width = width;
self.body.appendChild(picker); self.body.appendChild(pickerElement);
$(picker).listpicker(); var picker = $(pickerElement).picker();
self.pickers.push(picker); self.pickers.push(picker);
picker.addEventListener('change', function(event) { pickerElement.addEventListener('change', function(event) {
var nextPicker = this.nextSibling; var nextPickerElement = this.nextSibling;
if (nextPicker && nextPicker.listpickerId) { if (nextPickerElement && nextPickerElement.picker) {
var eventData = event.detail || {}; var eventData = event.detail || {};
var preItem = eventData.item || {}; var preItem = eventData.item || {};
nextPicker.setItems(preItem.children); nextPickerElement.picker.setItems(preItem.children);
} }
}, false); }, false);
} }
...@@ -100,6 +125,11 @@ ...@@ -100,6 +125,11 @@
self.mask.show(); self.mask.show();
document.body.classList.add($.className('poppicker-active-for-page')); document.body.classList.add($.className('poppicker-active-for-page'));
self.panel.classList.add($.className('active')); self.panel.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
}, },
//隐藏 //隐藏
hide: function() { hide: function() {
...@@ -108,6 +138,8 @@ ...@@ -108,6 +138,8 @@
self.panel.classList.remove($.className('active')); self.panel.classList.remove($.className('active'));
self.mask.close(); self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page')); document.body.classList.remove($.className('poppicker-active-for-page'));
//处理物理返回键
$.back=self.__back;
}, },
dispose: function() { dispose: function() {
var self = this; var self = this;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment