Skip to content

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

更新Hello mui

parent 1f3f986c
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
/**
* 选择列表插件
* varstion 2.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, window, document, undefined) {
var MAX_EXCEED = 30;
var VISIBLE_RANGE = 90;
var DEFAULT_ITEM_HEIGHT = 40;
var BLUR_WIDTH = 10;
var rad2deg = $.rad2deg = function(rad) {
return rad / (Math.PI / 180);
};
var deg2rad = $.deg2rad = function(deg) {
return deg * (Math.PI / 180);
};
var platform = navigator.platform.toLowerCase();
var userAgent = navigator.userAgent.toLowerCase();
var isIos = userAgent.indexOf('iphone') > -1 && platform == 'iphone';
var Picker = $.Picker = function(holder, options) {
var self = this;
self.holder = holder;
self.options = options || {};
self.init();
self.initInertiaParams();
self.calcElementItemPostion(true);
self.bindEvent();
};
Picker.prototype.findElementItems = function() {
var self = this;
self.elementItems = [].slice.call(self.holder.querySelectorAll('li'));
return self.elementItems;
};
Picker.prototype.init = function() {
var self = this;
self.list = self.holder.querySelector('ul');
self.findElementItems();
self.height = self.holder.offsetHeight;
self.r = self.height / 2 - BLUR_WIDTH;
self.d = self.r * 2;
self.itemHeight = self.elementItems.length > 0 ? self.elementItems[0].offsetHeight : DEFAULT_ITEM_HEIGHT;
self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 0.8));
self.hightlightRange = self.itemAngle / 2;
self.visibleRange = VISIBLE_RANGE;
self.beginAngle = 0;
self.beginExceed = self.beginAngle - MAX_EXCEED;
self.list.angle = self.beginAngle;
if (isIos) {
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
};
Picker.prototype.calcElementItemPostion = function(andGenerateItms) {
var self = this;
if (andGenerateItms) {
self.items = [];
}
self.elementItems.forEach(function(item) {
var index = self.elementItems.indexOf(item);
self.endAngle = self.itemAngle * index;
item.angle = self.endAngle;
item.style.webkitTransformOrigin = "center center -" + self.r + "px";
item.style.webkitTransform = "translateZ(" + self.r + "px) rotateX(" + (-self.endAngle) + "deg)";
if (andGenerateItms) {
var dataItem = {};
dataItem.text = item.innerHTML || '';
dataItem.value = item.getAttribute('data-value') || dataItem.text;
self.items.push(dataItem);
}
});
self.endExceed = self.endAngle + MAX_EXCEED;
self.calcElementItemVisibility(self.beginAngle);
};
Picker.prototype.calcAngle = function(c) {
var self = this;
var a = b = parseFloat(self.r);
//直径的整倍数部分直接乘以 180
c = Math.abs(c); //只算角度不关心正否值
var intDeg = parseInt(c / self.d) * 180;
c = c % self.d;
//余弦
var cosC = (a * a + b * b - c * c) / (2 * a * b);
var angleC = intDeg + rad2deg(Math.acos(cosC));
return angleC;
};
Picker.prototype.calcElementItemVisibility = function(angle) {
var self = this;
self.elementItems.forEach(function(item) {
var difference = Math.abs(item.angle - angle);
if (difference < self.hightlightRange) {
item.classList.add('highlight');
} else if (difference < self.visibleRange) {
item.classList.add('visible');
item.classList.remove('highlight');
} else {
item.classList.remove('highlight');
item.classList.remove('visible');
}
});
};
Picker.prototype.setAngle = function(angle) {
var self = this;
self.list.angle = angle;
self.list.style.webkitTransform = "perspective(1000px) rotateY(0deg) rotateX(" + angle + "deg)";
self.calcElementItemVisibility(angle);
};
Picker.prototype.bindEvent = function() {
var self = this;
var lastAngle = 0;
var startY = null;
self.holder.addEventListener('touchstart', function(event) {
event.preventDefault();
self.list.style.webkitTransition = '';
startY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
lastAngle = self.list.angle;
self.updateInertiaParams(event, true);
}, false);
self.holder.addEventListener('touchend', function(event) {
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener('touchcancel', function(event) {
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener('touchmove', function(event) {
event.preventDefault();
var endY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
var dragRange = endY - startY;
var dragAngle = self.calcAngle(dragRange);
var newAngle = dragRange > 0 ? lastAngle - dragAngle : lastAngle + dragAngle;
if (newAngle > self.endExceed) {
newAngle = self.endExceed
}
if (newAngle < self.beginExceed) {
newAngle = self.beginExceed
}
self.setAngle(newAngle);
self.updateInertiaParams(event);
}, false);
//--
self.list.addEventListener('tap', function(event) {
elementItem = event.target;
if (elementItem.tagName == 'LI') {
self.setSelectedIndex(self.elementItems.indexOf(elementItem), 200);
}
}, false);
};
Picker.prototype.initInertiaParams = function() {
var self = this;
self.lastMoveTime = 0;
self.lastMoveStart = 0;
self.stopInertiaMove = false;
};
Picker.prototype.updateInertiaParams = function(event, isStart) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
if (isStart) {
self.lastMoveStart = point.pageY;
self.lastMoveTime = event.timeStamp || Date.now();
self.startAngle = self.list.angle;
} else {
var nowTime = event.timeStamp || Date.now();
if (nowTime - self.lastMoveTime > 300) {
self.lastMoveTime = nowTime;
self.lastMoveStart = point.pageY;
}
}
self.stopInertiaMove = true;
};
Picker.prototype.startInertiaScroll = function(event) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
/**
* 缓动代码
*/
var nowTime = event.timeStamp || Date.now();
var v = (point.pageY - self.lastMoveStart) / (nowTime - self.lastMoveTime); //最后一段时间手指划动速度
var dir = v > 0 ? -1 : 1; //加速度方向
var deceleration = dir * 0.0006 * -1;
var duration = Math.abs(v / deceleration); // 速度消减至0所需时间
var dist = v * duration / 2; //最终移动多少
var startAngle = self.list.angle;
var distAngle = self.calcAngle(dist) * dir;
//----
var srcDistAngle = distAngle;
if (startAngle + distAngle < self.beginExceed) {
distAngle = self.beginExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
if (startAngle + distAngle > self.endExceed) {
distAngle = self.endExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
//----
if (distAngle == 0) {
self.endScroll();
return;
}
self.scrollDistAngle(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.scrollDistAngle = function(nowTime, startAngle, distAngle, duration) {
var self = this;
self.stopInertiaMove = false;
(function(nowTime, startAngle, distAngle, duration) {
var frameInterval = 13;
var stepCount = duration / frameInterval;
var stepIndex = 0;
(function inertiaMove() {
if (self.stopInertiaMove) return;
var newAngle = self.quartEaseOut(stepIndex, startAngle, distAngle, stepCount);
self.setAngle(newAngle);
stepIndex++;
if (stepIndex > stepCount - 1 || newAngle < self.beginExceed || newAngle > self.endExceed) {
self.endScroll();
return;
}
setTimeout(inertiaMove, frameInterval);
})();
})(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.quartEaseOut = function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};
Picker.prototype.endScroll = function() {
var self = this;
if (self.list.angle < self.beginAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.beginAngle);
} else if (self.list.angle > self.endAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.endAngle);
} else {
var index = parseInt((self.list.angle / self.itemAngle).toFixed(0));
self.list.style.webkitTransition = "100ms ease-out";
self.setAngle(self.itemAngle * index);
}
self.triggerChange();
};
Picker.prototype.triggerChange = function(force) {
var self = this;
setTimeout(function() {
var index = self.getSelectedIndex();
var item = self.items[index];
if ($.trigger && (index != self.lastIndex || force)) {
$.trigger(self.holder, 'change', {
"index": index,
"item": item
});
//console.log('change:' + index);
}
self.lastIndex = index;
}, 0);
};
Picker.prototype.correctAngle = function(angle) {
var self = this;
if (angle < self.beginAngle) {
return self.beginAngle;
} else if (angle > self.endAngle) {
return self.endAngle;
} else {
return angle;
}
};
Picker.prototype.setItems = function(items) {
var self = this;
self.items = items || [];
var buffer = [];
self.items.forEach(function(item) {
if (item !== null && item !== undefined) {
buffer.push('<li>' + (item.text || item) + '</li>');
}
});
self.list.innerHTML = buffer.join('');
self.findElementItems();
self.calcElementItemPostion();
self.setAngle(self.correctAngle(self.list.angle));
self.triggerChange(true);
};
Picker.prototype.getItems = function() {
var self = this;
return self.items;
};
Picker.prototype.getSelectedIndex = function() {
var self = this;
return parseInt((self.list.angle / self.itemAngle).toFixed(0));
};
Picker.prototype.setSelectedIndex = function(index, duration) {
var self = this;
self.list.style.webkitTransition = '';
var angle = self.correctAngle(self.itemAngle * index);
if (duration && duration > 0) {
var distAngle = angle - self.list.angle;
self.scrollDistAngle(Date.now(), self.list.angle, distAngle, duration);
} else {
self.setAngle(angle);
}
self.triggerChange();
};
Picker.prototype.getSelectedItem = function() {
var self = this;
return self.items[self.getSelectedIndex()];
};
Picker.prototype.getSelectedValue = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).value;
};
Picker.prototype.getSelectedText = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).text;
};
Picker.prototype.setSelectedValue = function(value, duration) {
var self = this;
for (var index in self.items) {
var item = self.items[index];
if (item.value == value) {
self.setSelectedIndex(index, duration);
return;
}
}
};
if ($.fn) {
$.fn.picker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (element.picker) return;
if (options) {
element.picker = new Picker(element, options);
} else {
var optionsText = element.getAttribute('data-picker-options');
var _options = optionsText ? JSON.parse(optionsText) : {};
element.picker = new Picker(element, _options);
}
});
return this[0] ? this[0].picker : null;
};
//自动初始化
$.ready(function() {
$('.mui-picker').picker();
});
}
})(this.mui || this, window, document, undefined);
//end
/**
* 弹出选择列表插件
* 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(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>\
<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\
<div class="mui-poppicker-clear"></div>\
</div>\
<div class="mui-poppicker-body">\
</div>\
</div>';
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>';
//定义弹出选择器类
var PopPicker = $.PopPicker = $.Class.extend({
//构造函数
init: function(options) {
var self = this;
self.options = options || {};
self.options.buttons = self.options.buttons || ['取消', '确定'];
self.panel = $.dom(panelBuffer)[0];
document.body.appendChild(self.panel);
self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');
self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');
self.body = self.panel.querySelector('.mui-poppicker-body');
self.mask = $.createMask();
self.cancel.innerText = self.options.buttons[0];
self.ok.innerText = self.options.buttons[1];
self.cancel.addEventListener('tap', function(event) {
self.hide();
}, false);
self.ok.addEventListener('tap', function(event) {
if (self.callback) {
var rs = self.callback(self.getSelectedItems());
if (rs !== false) {
self.hide();
}
}
}, false);
self.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._createPicker();
//防止滚动穿透
self.panel.addEventListener('touchstart', function(event) {
event.preventDefault();
}, false);
self.panel.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
},
_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 pickerElement = $.dom(pickerBuffer)[0];
pickerElement.style.width = width;
self.body.appendChild(pickerElement);
var picker = $(pickerElement).picker();
self.pickers.push(picker);
pickerElement.addEventListener('change', function(event) {
var nextPickerElement = this.nextSibling;
if (nextPickerElement && nextPickerElement.picker) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPickerElement.picker.setItems(preItem.children);
}
}, false);
}
},
//填充数据
setData: function(data) {
var self = this;
data = data || [];
self.pickers[0].setItems(data);
},
//获取选中的项（数组）
getSelectedItems: function() {
var self = this;
var items = [];
for (var i in self.pickers) {
var picker = self.pickers[i];
items.push(picker.getSelectedItem() || {});
}
return items;
},
//显示
show: function(callback) {
var self = this;
self.callback = callback;
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() {
var self = this;
if (self.disposed) return;
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;
self.hide();
setTimeout(function() {
self.panel.parentNode.removeChild(self.panel);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
})(mui, document);
/**
* 日期时间插件
* varstion 1.0.5
* by Houfeng
* Houfeng@DCloud.io
*/
(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>\
<button data-id="btn-ok" class="mui-btn mui-btn-blue">确定</button>\
</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-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-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-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-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-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).picker();
var ui = self.ui = {
picker: _picker,
mask: $.createMask(),
ok: $('[data-id="btn-ok"]', _picker)[0],
cancel: $('[data-id="btn-cancel"]', _picker)[0],
y: $('[data-id="picker-y"]', _picker)[0],
m: $('[data-id="picker-m"]', _picker)[0],
d: $('[data-id="picker-d"]', _picker)[0],
h: $('[data-id="picker-h"]', _picker)[0],
i: $('[data-id="picker-i"]', _picker)[0],
labels: $('[data-id*="title-"]', _picker),
};
ui.cancel.addEventListener('tap', function() {
self.hide();
}, false);
ui.ok.addEventListener('tap', function() {
var rs = self.callback(self.getSelected());
if (rs !== false) {
self.hide();
}
}, false);
ui.y.addEventListener('change', function() {
self._createDay();
}, false);
ui.m.addEventListener('change', function() {
self._createDay();
}, false);
ui.mask[0].addEventListener('tap', function() {
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;
var ui = self.ui;
var type = self.options.type;
var selected = {
type: type,
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;
}
};
switch (type) {
case 'datetime':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value + ':' + selected.i.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text + ':' + selected.i.text;
break;
case 'date':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text;
break;
case 'time':
selected.value = selected.h.value + ':' + selected.i.value;
selected.text = selected.h.text + ':' + selected.i.text;
break;
case 'month':
selected.value = selected.y.value + '-' + selected.m.value;
selected.text = selected.y.text + '-' + selected.m.text;
break;
case 'hour':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text;
break;
}
return selected;
},
setSelectedValue: function(value) {
var self = this;
var ui = self.ui;
var parsedValue = self._parseValue(value);
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);
},
_inArray: function(array, item) {
for (var index in array) {
var _item = array[index];
if (_item === item) return true;
}
return false;
},
getDayNum: function(year, month) {
var self = this;
if (self._inArray([1, 3, 5, 7, 8, 10, 12], month)) {
return 31;
} else if (self._inArray([4, 6, 9, 11], month)) {
return 30;
} else if (self.isLeapYear(year)) {
return 29;
} else {
return 28;
}
},
_fill: function(num) {
num = num.toString();
if (num.length < 2) {
num = 0 + num;
}
return num;
},
_createYear: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成年列表
var yArray = [];
if (options.customData.y) {
yArray = options.customData.y;
} else {
var yBegin = options.beginYear;
var yEnd = options.endYear;
for (var y = yBegin; y <= yEnd; y++) {
yArray.push({
text: y + '',
value: y
});
}
}
ui.y.picker.setItems(yArray);
//ui.y.picker.setSelectedValue(current);
},
_createMonth: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成月列表
var mArray = [];
if (options.customData.m) {
mArray = options.customData.m;
} else {
for (var m = 1; m <= 12; m++) {
var val = self._fill(m);
mArray.push({
text: val,
value: val
});
}
}
ui.m.picker.setItems(mArray);
//ui.m.picker.setSelectedValue(current);
},
_createDay: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成日列表
var dArray = [];
if (options.customData.d) {
dArray = options.customData.d;
} else {
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({
text: val,
value: val
});
}
}
ui.d.picker.setItems(dArray);
current = current || ui.d.picker.getSelectedValue();
//ui.d.picker.setSelectedValue(current);
},
_createHours: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成时列表
var hArray = [];
if (options.customData.h) {
hArray = options.customData.h;
} else {
for (var h = 0; h <= 23; h++) {
var val = self._fill(h);
hArray.push({
text: val,
value: val
});
}
}
ui.h.picker.setItems(hArray);
//ui.h.picker.setSelectedValue(current);
},
_createMinutes: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成分列表
var iArray = [];
if (options.customData.i) {
iArray = options.customData.i;
} else {
for (var i = 0; i <= 59; i++) {
var val = self._fill(i);
iArray.push({
text: val,
value: val
});
}
}
ui.i.picker.setItems(iArray);
//ui.i.picker.setSelectedValue(current);
},
_setLabels: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.labels.each(function(i, label) {
label.innerText = options.labels[i];
});
},
_setButtons: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.cancel.innerText = options.buttons[0];
ui.ok.innerText = options.buttons[1];
},
_parseValue: function(value) {
var self = this;
var rs = {};
if (value) {
var parts = value.replace(":", "-").replace(" ", "-").split("-");
rs.y = parts[0];
rs.m = parts[1];
rs.d = parts[2];
rs.h = parts[3];
rs.i = parts[4];
} else {
var now = new Date();
rs.y = now.getFullYear();
rs.m = now.getMonth() + 1;
rs.d = now.getDate();
rs.h = now.getHours();
rs.i = now.getMinutes();
}
return rs;
},
_create: function(options) {
var self = this;
options = options || {};
options.labels = options.labels || ['年', '月', '日', '时', '分'];
options.buttons = options.buttons || ['取消', '确定'];
options.type = options.type || 'datetime';
options.customData = options.customData || {};
self.options = options;
var now = new Date();
options.beginYear = options.beginYear || (now.getFullYear() - 5);
options.endYear = options.endYear || (now.getFullYear() + 5);
var ui = self.ui;
//设定label
self._setLabels();
self._setButtons();
//设定类型
ui.picker.setAttribute('data-type', options.type);
//生成
self._createYear();
self._createMonth();
self._createDay();
self._createHours();
self._createMinutes();
//设定默认值
self.setSelectedValue(options.value);
},
//显示
show: function(callback) {
var self = this;
var ui = self.ui;
self.callback = callback || $.noop;
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;
if (self.disposed) return;
var ui = self.ui;
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;
self.hide();
setTimeout(function() {
self.ui.picker.parentNode.removeChild(self.ui.picker);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
})(mui, document);
\ No newline at end of file
examples/hello-mui/js/mui.picker.js 0 → 100644
View file @ 3901e0c2
/**
* 选择列表插件
* varstion 2.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, window, document, undefined) {
var MAX_EXCEED = 30;
var VISIBLE_RANGE = 90;
var DEFAULT_ITEM_HEIGHT = 40;
var BLUR_WIDTH = 10;
var rad2deg = $.rad2deg = function(rad) {
return rad / (Math.PI / 180);
};
var deg2rad = $.deg2rad = function(deg) {
return deg * (Math.PI / 180);
};
var platform = navigator.platform.toLowerCase();
var userAgent = navigator.userAgent.toLowerCase();
var isIos = userAgent.indexOf('iphone') > -1 && platform == 'iphone';
var Picker = $.Picker = function(holder, options) {
var self = this;
self.holder = holder;
self.options = options || {};
self.init();
self.initInertiaParams();
self.calcElementItemPostion(true);
self.bindEvent();
};
Picker.prototype.findElementItems = function() {
var self = this;
self.elementItems = [].slice.call(self.holder.querySelectorAll('li'));
return self.elementItems;
};
Picker.prototype.init = function() {
var self = this;
self.list = self.holder.querySelector('ul');
self.findElementItems();
self.height = self.holder.offsetHeight;
self.r = self.height / 2 - BLUR_WIDTH;
self.d = self.r * 2;
self.itemHeight = self.elementItems.length > 0 ? self.elementItems[0].offsetHeight : DEFAULT_ITEM_HEIGHT;
self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 0.8));
self.hightlightRange = self.itemAngle / 2;
self.visibleRange = VISIBLE_RANGE;
self.beginAngle = 0;
self.beginExceed = self.beginAngle - MAX_EXCEED;
self.list.angle = self.beginAngle;
if (isIos) {
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
};
Picker.prototype.calcElementItemPostion = function(andGenerateItms) {
var self = this;
if (andGenerateItms) {
self.items = [];
}
self.elementItems.forEach(function(item) {
var index = self.elementItems.indexOf(item);
self.endAngle = self.itemAngle * index;
item.angle = self.endAngle;
item.style.webkitTransformOrigin = "center center -" + self.r + "px";
item.style.webkitTransform = "translateZ(" + self.r + "px) rotateX(" + (-self.endAngle) + "deg)";
if (andGenerateItms) {
var dataItem = {};
dataItem.text = item.innerHTML || '';
dataItem.value = item.getAttribute('data-value') || dataItem.text;
self.items.push(dataItem);
}
});
self.endExceed = self.endAngle + MAX_EXCEED;
self.calcElementItemVisibility(self.beginAngle);
};
Picker.prototype.calcAngle = function(c) {
var self = this;
var a = b = parseFloat(self.r);
//直径的整倍数部分直接乘以 180
c = Math.abs(c); //只算角度不关心正否值
var intDeg = parseInt(c / self.d) * 180;
c = c % self.d;
//余弦
var cosC = (a * a + b * b - c * c) / (2 * a * b);
var angleC = intDeg + rad2deg(Math.acos(cosC));
return angleC;
};
Picker.prototype.calcElementItemVisibility = function(angle) {
var self = this;
self.elementItems.forEach(function(item) {
var difference = Math.abs(item.angle - angle);
if (difference < self.hightlightRange) {
item.classList.add('highlight');
} else if (difference < self.visibleRange) {
item.classList.add('visible');
item.classList.remove('highlight');
} else {
item.classList.remove('highlight');
item.classList.remove('visible');
}
});
};
Picker.prototype.setAngle = function(angle) {
var self = this;
self.list.angle = angle;
self.list.style.webkitTransform = "perspective(1000px) rotateY(0deg) rotateX(" + angle + "deg)";
self.calcElementItemVisibility(angle);
};
Picker.prototype.bindEvent = function() {
var self = this;
var lastAngle = 0;
var startY = null;
self.holder.addEventListener('touchstart', function(event) {
event.preventDefault();
self.list.style.webkitTransition = '';
startY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
lastAngle = self.list.angle;
self.updateInertiaParams(event, true);
}, false);
self.holder.addEventListener('touchend', function(event) {
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener('touchcancel', function(event) {
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener('touchmove', function(event) {
event.preventDefault();
var endY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
var dragRange = endY - startY;
var dragAngle = self.calcAngle(dragRange);
var newAngle = dragRange > 0 ? lastAngle - dragAngle : lastAngle + dragAngle;
if (newAngle > self.endExceed) {
newAngle = self.endExceed
}
if (newAngle < self.beginExceed) {
newAngle = self.beginExceed
}
self.setAngle(newAngle);
self.updateInertiaParams(event);
}, false);
//--
self.list.addEventListener('tap', function(event) {
elementItem = event.target;
if (elementItem.tagName == 'LI') {
self.setSelectedIndex(self.elementItems.indexOf(elementItem), 200);
}
}, false);
};
Picker.prototype.initInertiaParams = function() {
var self = this;
self.lastMoveTime = 0;
self.lastMoveStart = 0;
self.stopInertiaMove = false;
};
Picker.prototype.updateInertiaParams = function(event, isStart) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
if (isStart) {
self.lastMoveStart = point.pageY;
self.lastMoveTime = event.timeStamp || Date.now();
self.startAngle = self.list.angle;
} else {
var nowTime = event.timeStamp || Date.now();
if (nowTime - self.lastMoveTime > 300) {
self.lastMoveTime = nowTime;
self.lastMoveStart = point.pageY;
}
}
self.stopInertiaMove = true;
};
Picker.prototype.startInertiaScroll = function(event) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
/**
* 缓动代码
*/
var nowTime = event.timeStamp || Date.now();
var v = (point.pageY - self.lastMoveStart) / (nowTime - self.lastMoveTime); //最后一段时间手指划动速度
var dir = v > 0 ? -1 : 1; //加速度方向
var deceleration = dir * 0.0006 * -1;
var duration = Math.abs(v / deceleration); // 速度消减至0所需时间
var dist = v * duration / 2; //最终移动多少
var startAngle = self.list.angle;
var distAngle = self.calcAngle(dist) * dir;
//----
var srcDistAngle = distAngle;
if (startAngle + distAngle < self.beginExceed) {
distAngle = self.beginExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
if (startAngle + distAngle > self.endExceed) {
distAngle = self.endExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
//----
if (distAngle == 0) {
self.endScroll();
return;
}
self.scrollDistAngle(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.scrollDistAngle = function(nowTime, startAngle, distAngle, duration) {
var self = this;
self.stopInertiaMove = false;
(function(nowTime, startAngle, distAngle, duration) {
var frameInterval = 13;
var stepCount = duration / frameInterval;
var stepIndex = 0;
(function inertiaMove() {
if (self.stopInertiaMove) return;
var newAngle = self.quartEaseOut(stepIndex, startAngle, distAngle, stepCount);
self.setAngle(newAngle);
stepIndex++;
if (stepIndex > stepCount - 1 || newAngle < self.beginExceed || newAngle > self.endExceed) {
self.endScroll();
return;
}
setTimeout(inertiaMove, frameInterval);
})();
})(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.quartEaseOut = function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};
Picker.prototype.endScroll = function() {
var self = this;
if (self.list.angle < self.beginAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.beginAngle);
} else if (self.list.angle > self.endAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.endAngle);
} else {
var index = parseInt((self.list.angle / self.itemAngle).toFixed(0));
self.list.style.webkitTransition = "100ms ease-out";
self.setAngle(self.itemAngle * index);
}
self.triggerChange();
};
Picker.prototype.triggerChange = function(force) {
var self = this;
setTimeout(function() {
var index = self.getSelectedIndex();
var item = self.items[index];
if ($.trigger && (index != self.lastIndex || force)) {
$.trigger(self.holder, 'change', {
"index": index,
"item": item
});
//console.log('change:' + index);
}
self.lastIndex = index;
}, 0);
};
Picker.prototype.correctAngle = function(angle) {
var self = this;
if (angle < self.beginAngle) {
return self.beginAngle;
} else if (angle > self.endAngle) {
return self.endAngle;
} else {
return angle;
}
};
Picker.prototype.setItems = function(items) {
var self = this;
self.items = items || [];
var buffer = [];
self.items.forEach(function(item) {
if (item !== null && item !== undefined) {
buffer.push('<li>' + (item.text || item) + '</li>');
}
});
self.list.innerHTML = buffer.join('');
self.findElementItems();
self.calcElementItemPostion();
self.setAngle(self.correctAngle(self.list.angle));
self.triggerChange(true);
};
Picker.prototype.getItems = function() {
var self = this;
return self.items;
};
Picker.prototype.getSelectedIndex = function() {
var self = this;
return parseInt((self.list.angle / self.itemAngle).toFixed(0));
};
Picker.prototype.setSelectedIndex = function(index, duration) {
var self = this;
self.list.style.webkitTransition = '';
var angle = self.correctAngle(self.itemAngle * index);
if (duration && duration > 0) {
var distAngle = angle - self.list.angle;
self.scrollDistAngle(Date.now(), self.list.angle, distAngle, duration);
} else {
self.setAngle(angle);
}
self.triggerChange();
};
Picker.prototype.getSelectedItem = function() {
var self = this;
return self.items[self.getSelectedIndex()];
};
Picker.prototype.getSelectedValue = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).value;
};
Picker.prototype.getSelectedText = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).text;
};
Picker.prototype.setSelectedValue = function(value, duration) {
var self = this;
for (var index in self.items) {
var item = self.items[index];
if (item.value == value) {
self.setSelectedIndex(index, duration);
return;
}
}
};
if ($.fn) {
$.fn.picker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (element.picker) return;
if (options) {
element.picker = new Picker(element, options);
} else {
var optionsText = element.getAttribute('data-picker-options');
var _options = optionsText ? JSON.parse(optionsText) : {};
element.picker = new Picker(element, _options);
}
});
return this[0] ? this[0].picker : null;
};
//自动初始化
$.ready(function() {
$('.mui-picker').picker();
});
}
})(this.mui || this, window, document, undefined);
//end
\ No newline at end of file
examples/hello-mui/js/mui.picker.min.js 0 → 100644
View file @ 3901e0c2
/**
* 选择列表插件
* varstion 2.0.0
* by Houfeng
* Houfeng@DCloud.io
**/
!function(e,t,i,a){var n=30,r=90,s=40,c=10,l=e.rad2deg=function(e){return e/(Math.PI/180)},o=(e.deg2rad=function(e){return e*(Math.PI/180)},navigator.platform.toLowerCase()),d=navigator.userAgent.toLowerCase(),u=d.indexOf("iphone")>-1&&"iphone"==o,p=e.Picker=function(e,t){var i=this;i.holder=e,i.options=t||{},i.init(),i.initInertiaParams(),i.calcElementItemPostion(!0),i.bindEvent()};p.prototype.findElementItems=function(){var e=this;return e.elementItems=[].slice.call(e.holder.querySelectorAll("li")),e.elementItems},p.prototype.init=function(){var e=this;e.list=e.holder.querySelector("ul"),e.findElementItems(),e.height=e.holder.offsetHeight,e.r=e.height/2-c,e.d=2*e.r,e.itemHeight=e.elementItems.length>0?e.elementItems[0].offsetHeight:s,e.itemAngle=parseInt(e.calcAngle(.8*e.itemHeight)),e.hightlightRange=e.itemAngle/2,e.visibleRange=r,e.beginAngle=0,e.beginExceed=e.beginAngle-n,e.list.angle=e.beginAngle,u&&(e.list.style.webkitTransformOrigin="center center "+e.r+"px")},p.prototype.calcElementItemPostion=function(e){var t=this;e&&(t.items=[]),t.elementItems.forEach(function(i){var a=t.elementItems.indexOf(i);if(t.endAngle=t.itemAngle*a,i.angle=t.endAngle,i.style.webkitTransformOrigin="center center -"+t.r+"px",i.style.webkitTransform="translateZ("+t.r+"px) rotateX("+-t.endAngle+"deg)",e){var n={};n.text=i.innerHTML||"",n.value=i.getAttribute("data-value")||n.text,t.items.push(n)}}),t.endExceed=t.endAngle+n,t.calcElementItemVisibility(t.beginAngle)},p.prototype.calcAngle=function(e){var t=this,i=b=parseFloat(t.r);e=Math.abs(e);var a=180*parseInt(e/t.d);e%=t.d;var n=(i*i+b*b-e*e)/(2*i*b),r=a+l(Math.acos(n));return r},p.prototype.calcElementItemVisibility=function(e){var t=this;t.elementItems.forEach(function(i){var a=Math.abs(i.angle-e);a<t.hightlightRange?i.classList.add("highlight"):a<t.visibleRange?(i.classList.add("visible"),i.classList.remove("highlight")):(i.classList.remove("highlight"),i.classList.remove("visible"))})},p.prototype.setAngle=function(e){var t=this;t.list.angle=e,t.list.style.webkitTransform="perspective(1000px) rotateY(0deg) rotateX("+e+"deg)",t.calcElementItemVisibility(e)},p.prototype.bindEvent=function(){var e=this,t=0,i=null;e.holder.addEventListener("touchstart",function(a){a.preventDefault(),e.list.style.webkitTransition="",i=(a.changedTouches?a.changedTouches[0]:a).pageY,t=e.list.angle,e.updateInertiaParams(a,!0)},!1),e.holder.addEventListener("touchend",function(t){t.preventDefault(),e.startInertiaScroll(t)},!1),e.holder.addEventListener("touchcancel",function(t){t.preventDefault(),e.startInertiaScroll(t)},!1),e.holder.addEventListener("touchmove",function(a){a.preventDefault();var n=(a.changedTouches?a.changedTouches[0]:a).pageY,r=n-i,s=e.calcAngle(r),c=r>0?t-s:t+s;c>e.endExceed&&(c=e.endExceed),c<e.beginExceed&&(c=e.beginExceed),e.setAngle(c),e.updateInertiaParams(a)},!1),e.list.addEventListener("tap",function(t){elementItem=t.target,"LI"==elementItem.tagName&&e.setSelectedIndex(e.elementItems.indexOf(elementItem),200)},!1)},p.prototype.initInertiaParams=function(){var e=this;e.lastMoveTime=0,e.lastMoveStart=0,e.stopInertiaMove=!1},p.prototype.updateInertiaParams=function(e,t){var i=this,a=e.changedTouches?e.changedTouches[0]:e;if(t)i.lastMoveStart=a.pageY,i.lastMoveTime=e.timeStamp||Date.now(),i.startAngle=i.list.angle;else{var n=e.timeStamp||Date.now();n-i.lastMoveTime>300&&(i.lastMoveTime=n,i.lastMoveStart=a.pageY)}i.stopInertiaMove=!0},p.prototype.startInertiaScroll=function(e){var t=this,i=e.changedTouches?e.changedTouches[0]:e,a=e.timeStamp||Date.now(),n=(i.pageY-t.lastMoveStart)/(a-t.lastMoveTime),r=n>0?-1:1,s=6e-4*r*-1,c=Math.abs(n/s),l=n*c/2,o=t.list.angle,d=t.calcAngle(l)*r,u=d;return o+d<t.beginExceed&&(d=t.beginExceed-o,c=c*(d/u)*.6),o+d>t.endExceed&&(d=t.endExceed-o,c=c*(d/u)*.6),0==d?void t.endScroll():void t.scrollDistAngle(a,o,d,c)},p.prototype.scrollDistAngle=function(e,t,i,a){var n=this;n.stopInertiaMove=!1,function(e,t,i,a){var r=13,s=a/r,c=0;!function l(){if(!n.stopInertiaMove){var e=n.quartEaseOut(c,t,i,s);return n.setAngle(e),c++,c>s-1||e<n.beginExceed||e>n.endExceed?void n.endScroll():void setTimeout(l,r)}}()}(e,t,i,a)},p.prototype.quartEaseOut=function(e,t,i,a){return-i*((e=e/a-1)*e*e*e-1)+t},p.prototype.endScroll=function(){var e=this;if(e.list.angle<e.beginAngle)e.list.style.webkitTransition="150ms ease-out",e.setAngle(e.beginAngle);else if(e.list.angle>e.endAngle)e.list.style.webkitTransition="150ms ease-out",e.setAngle(e.endAngle);else{var t=parseInt((e.list.angle/e.itemAngle).toFixed(0));e.list.style.webkitTransition="100ms ease-out",e.setAngle(e.itemAngle*t)}e.triggerChange()},p.prototype.triggerChange=function(t){var i=this;setTimeout(function(){var a=i.getSelectedIndex(),n=i.items[a];e.trigger&&(a!=i.lastIndex||t)&&e.trigger(i.holder,"change",{index:a,item:n}),i.lastIndex=a},0)},p.prototype.correctAngle=function(e){var t=this;return e<t.beginAngle?t.beginAngle:e>t.endAngle?t.endAngle:e},p.prototype.setItems=function(e){var t=this;t.items=e||[];var i=[];t.items.forEach(function(e){null!==e&&e!==a&&i.push("<li>"+(e.text||e)+"</li>")}),t.list.innerHTML=i.join(""),t.findElementItems(),t.calcElementItemPostion(),t.setAngle(t.correctAngle(t.list.angle)),t.triggerChange(!0)},p.prototype.getItems=function(){var e=this;return e.items},p.prototype.getSelectedIndex=function(){var e=this;return parseInt((e.list.angle/e.itemAngle).toFixed(0))},p.prototype.setSelectedIndex=function(e,t){var i=this;i.list.style.webkitTransition="";var a=i.correctAngle(i.itemAngle*e);if(t&&t>0){var n=a-i.list.angle;i.scrollDistAngle(Date.now(),i.list.angle,n,t)}else i.setAngle(a);i.triggerChange()},p.prototype.getSelectedItem=function(){var e=this;return e.items[e.getSelectedIndex()]},p.prototype.getSelectedValue=function(){var e=this;return(e.items[e.getSelectedIndex()]||{}).value},p.prototype.getSelectedText=function(){var e=this;return(e.items[e.getSelectedIndex()]||{}).text},p.prototype.setSelectedValue=function(e,t){var i=this;for(var a in i.items){var n=i.items[a];if(n.value==e)return void i.setSelectedIndex(a,t)}},e.fn&&(e.fn.picker=function(e){return this.each(function(t,i){if(!i.picker)if(e)i.picker=new p(i,e);else{var a=i.getAttribute("data-picker-options"),n=a?JSON.parse(a):{};i.picker=new p(i,n)}}),this[0]?this[0].picker:null},e.ready(function(){e(".mui-picker").picker()}))}(this.mui||this,window,document,void 0),function(e,t){e.dom=function(i){return"string"!=typeof i?i instanceof Array||i[0]&&i.length?[].slice.call(i):[i]:(e.__create_dom_div__||(e.__create_dom_div__=t.createElement("div")),e.__create_dom_div__.innerHTML=i,[].slice.call(e.__create_dom_div__.childNodes))};var i='<div class="mui-poppicker"> <div class="mui-poppicker-header"> <button class="mui-btn mui-poppicker-btn-cancel">取消</button> <button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button> <div class="mui-poppicker-clear"></div> </div> <div class="mui-poppicker-body"> </div> </div>',a='<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>';e.PopPicker=e.Class.extend({init:function(a){var n=this;n.options=a||{},n.options.buttons=n.options.buttons||["取消","确定"],n.panel=e.dom(i)[0],t.body.appendChild(n.panel),n.ok=n.panel.querySelector(".mui-poppicker-btn-ok"),n.cancel=n.panel.querySelector(".mui-poppicker-btn-cancel"),n.body=n.panel.querySelector(".mui-poppicker-body"),n.mask=e.createMask(),n.cancel.innerText=n.options.buttons[0],n.ok.innerText=n.options.buttons[1],n.cancel.addEventListener("tap",function(e){n.hide()},!1),n.ok.addEventListener("tap",function(e){if(n.callback){var t=n.callback(n.getSelectedItems());t!==!1&&n.hide()}},!1),n.mask[0].addEventListener("tap",function(){n.hide()},!1),n._createPicker(),n.panel.addEventListener("touchstart",function(e){e.preventDefault()},!1),n.panel.addEventListener("touchmove",function(e){e.preventDefault()},!1)},_createPicker:function(){var t=this,i=t.options.layer||1,n=100/i+"%";t.pickers=[];for(var r=1;i>=r;r++){var s=e.dom(a)[0];s.style.width=n,t.body.appendChild(s);var c=e(s).picker();t.pickers.push(c),s.addEventListener("change",function(e){var t=this.nextSibling;if(t&&t.picker){var i=e.detail||{},a=i.item||{};t.picker.setItems(a.children)}},!1)}},setData:function(e){var t=this;e=e||[],t.pickers[0].setItems(e)},getSelectedItems:function(){var e=this,t=[];for(var i in e.pickers){var a=e.pickers[i];t.push(a.getSelectedItem()||{})}return t},show:function(i){var a=this;a.callback=i,a.mask.show(),t.body.classList.add(e.className("poppicker-active-for-page")),a.panel.classList.add(e.className("active")),a.__back=e.back,e.back=function(){a.hide()}},hide:function(){var i=this;i.disposed||(i.panel.classList.remove(e.className("active")),i.mask.close(),t.body.classList.remove(e.className("poppicker-active-for-page")),e.back=i.__back)},dispose:function(){var e=this;e.hide(),setTimeout(function(){e.panel.parentNode.removeChild(e.panel);for(var t in e)e[t]=null,delete e[t];e.disposed=!0},300)}})}(mui,document),function(e,t){e.dom=function(i){return"string"!=typeof i?i instanceof Array||i[0]&&i.length?[].slice.call(i):[i]:(e.__create_dom_div__||(e.__create_dom_div__=t.createElement("div")),e.__create_dom_div__.innerHTML=i,[].slice.call(e.__create_dom_div__.childNodes))};var i='<div class="mui-dtpicker" data-type="datetime"> <div class="mui-dtpicker-header"> <button data-id="btn-cancel" class="mui-btn">取消</button> <button data-id="btn-ok" class="mui-btn mui-btn-blue">确定</button> </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-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-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-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-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-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>';e.DtPicker=e.Class.extend({init:function(a){var n=this,r=e.dom(i)[0];t.body.appendChild(r),e('[data-id*="picker"]',r).picker();var s=n.ui={picker:r,mask:e.createMask(),ok:e('[data-id="btn-ok"]',r)[0],cancel:e('[data-id="btn-cancel"]',r)[0],y:e('[data-id="picker-y"]',r)[0],m:e('[data-id="picker-m"]',r)[0],d:e('[data-id="picker-d"]',r)[0],h:e('[data-id="picker-h"]',r)[0],i:e('[data-id="picker-i"]',r)[0],labels:e('[data-id*="title-"]',r)};s.cancel.addEventListener("tap",function(){n.hide()},!1),s.ok.addEventListener("tap",function(){var e=n.callback(n.getSelected());e!==!1&&n.hide()},!1),s.y.addEventListener("change",function(){n._createDay()},!1),s.m.addEventListener("change",function(){n._createDay()},!1),s.mask[0].addEventListener("tap",function(){n.hide()},!1),n._create(a),n.ui.picker.addEventListener("touchstart",function(e){e.preventDefault()},!1),n.ui.picker.addEventListener("touchmove",function(e){e.preventDefault()},!1)},getSelected:function(){var e=this,t=e.ui,i=e.options.type,a={type:i,y:t.y.picker.getSelectedItem(),m:t.m.picker.getSelectedItem(),d:t.d.picker.getSelectedItem(),h:t.h.picker.getSelectedItem(),i:t.i.picker.getSelectedItem(),toString:function(){return this.value}};switch(i){case"datetime":a.value=a.y.value+"-"+a.m.value+"-"+a.d.value+" "+a.h.value+":"+a.i.value,a.text=a.y.text+"-"+a.m.text+"-"+a.d.text+" "+a.h.text+":"+a.i.text;break;case"date":a.value=a.y.value+"-"+a.m.value+"-"+a.d.value,a.text=a.y.text+"-"+a.m.text+"-"+a.d.text;break;case"time":a.value=a.h.value+":"+a.i.value,a.text=a.h.text+":"+a.i.text;break;case"month":a.value=a.y.value+"-"+a.m.value,a.text=a.y.text+"-"+a.m.text;break;case"hour":a.value=a.y.value+"-"+a.m.value+"-"+a.d.value+" "+a.h.value,a.text=a.y.text+"-"+a.m.text+"-"+a.d.text+" "+a.h.text}return a},setSelectedValue:function(e){var t=this,i=t.ui,a=t._parseValue(e);i.y.picker.setSelectedValue(a.y,0),i.m.picker.setSelectedValue(a.m,0),i.d.picker.setSelectedValue(a.d,0),i.h.picker.setSelectedValue(a.h,0),i.i.picker.setSelectedValue(a.i,0)},isLeapYear:function(e){return e%4==0&&e%100!=0||e%400==0},_inArray:function(e,t){for(var i in e){var a=e[i];if(a===t)return!0}return!1},getDayNum:function(e,t){var i=this;return i._inArray([1,3,5,7,8,10,12],t)?31:i._inArray([4,6,9,11],t)?30:i.isLeapYear(e)?29:28},_fill:function(e){return e=e.toString(),e.length<2&&(e=0+e),e},_createYear:function(e){var t=this,i=t.options,a=t.ui,n=[];if(i.customData.y)n=i.customData.y;else for(var r=i.beginYear,s=i.endYear,c=r;s>=c;c++)n.push({text:c+"",value:c});a.y.picker.setItems(n)},_createMonth:function(e){var t=this,i=t.options,a=t.ui,n=[];if(i.customData.m)n=i.customData.m;else for(var r=1;12>=r;r++){var s=t._fill(r);n.push({text:s,value:s})}a.m.picker.setItems(n)},_createDay:function(e){var t=this,i=t.options,a=t.ui,n=[];if(i.customData.d)n=i.customData.d;else for(var r=t.getDayNum(parseInt(a.y.picker.getSelectedValue()),parseInt(a.m.picker.getSelectedValue())),s=1;r>=s;s++){var c=t._fill(s);n.push({text:c,value:c})}a.d.picker.setItems(n),e=e||a.d.picker.getSelectedValue()},_createHours:function(e){var t=this,i=t.options,a=t.ui,n=[];if(i.customData.h)n=i.customData.h;else for(var r=0;23>=r;r++){var s=t._fill(r);n.push({text:s,value:s})}a.h.picker.setItems(n)},_createMinutes:function(e){var t=this,i=t.options,a=t.ui,n=[];if(i.customData.i)n=i.customData.i;else for(var r=0;59>=r;r++){var s=t._fill(r);n.push({text:s,value:s})}a.i.picker.setItems(n)},_setLabels:function(){var e=this,t=e.options,i=e.ui;i.labels.each(function(e,i){i.innerText=t.labels[e]})},_setButtons:function(){var e=this,t=e.options,i=e.ui;i.cancel.innerText=t.buttons[0],i.ok.innerText=t.buttons[1]},_parseValue:function(e){var t={};if(e){var i=e.replace(":","-").replace(" ","-").split("-");t.y=i[0],t.m=i[1],t.d=i[2],t.h=i[3],t.i=i[4]}else{var a=new Date;t.y=a.getFullYear(),t.m=a.getMonth()+1,t.d=a.getDate(),t.h=a.getHours(),t.i=a.getMinutes()}return t},_create:function(e){var t=this;e=e||{},e.labels=e.labels||["年","月","日","时","分"],e.buttons=e.buttons||["取消","确定"],e.type=e.type||"datetime",e.customData=e.customData||{},t.options=e;var i=new Date;e.beginYear=e.beginYear||i.getFullYear()-5,e.endYear=e.endYear||i.getFullYear()+5;var a=t.ui;t._setLabels(),t._setButtons(),a.picker.setAttribute("data-type",e.type),t._createYear(),t._createMonth(),t._createDay(),t._createHours(),t._createMinutes(),t.setSelectedValue(e.value)},show:function(i){var a=this,n=a.ui;a.callback=i||e.noop,n.mask.show(),t.body.classList.add(e.className("dtpicker-active-for-page")),n.picker.classList.add(e.className("active")),a.__back=e.back,e.back=function(){a.hide()}},hide:function(){var i=this;if(!i.disposed){var a=i.ui;a.picker.classList.remove(e.className("active")),a.mask.close(),t.body.classList.remove(e.className("dtpicker-active-for-page")),e.back=i.__back}},dispose:function(){var e=this;e.hide(),setTimeout(function(){e.ui.picker.parentNode.removeChild(e.ui.picker);for(var t in e)e[t]=null,delete e[t];e.disposed=!0},300)}})}(mui,document);
\ No newline at end of file
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