Skip to content

M
mui
Commit 26a9d00e authored by MoGaven's avatar MoGaven
Browse files
Options

Merge remote-tracking branch 'dcloudio/master'

parents 05d5bb5c 0cd36275
Show whitespace changes
Inline Side-by-side
Showing with 2747 additions and 453 deletions
dist/css/mui.css
View file @ 26a9d00e
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -574,6 +574,29 @@ p
color: #8f8f94;
}
.mui-row:before, .mui-row:after
{
display: table;
content: ' ';
}
.mui-row:after
{
clear: both;
}
.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
{
position: relative;
min-height: 1px;
}
.mui-row > [class*='mui-col-']
{
float: left;
}
.mui-col-xs-12
{
width: 100%;
......@@ -1867,14 +1890,14 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
border-bottom: 0;
border-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:first-child
.mui-card .mui-table-view .mui-table-view-divider:first-child, .mui-card .mui-table-view .mui-table-view-cell:first-child
{
top: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:last-child
.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child
{
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
......@@ -2548,20 +2571,36 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
.mui-grid-view.mui-grid-9
{
padding: 1px 0 1px 0;
padding-right: 0;
margin: 0;
padding: 0;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
background-color: #f2f2f2;
}
.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
{
display: table;
content: ' ';
}
.mui-grid-view.mui-grid-9:after
{
clear: both;
}
.mui-grid-view.mui-grid-9:after
{
position: static;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell
{
margin: -1px 0 0 -1px;
margin: 0;
padding: 11px 15px;
vertical-align: top;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
{
......@@ -3232,6 +3271,20 @@ select:focus
-webkit-touch-callout: none;
}
.mui-segmented-control.mui-segmented-control-vertical
{
border-collapse: collapse;
border-width: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
{
display: block;
border-bottom: 1px solid #c8c7cc;
border-left-width: 0;
}
.mui-segmented-control.mui-scroll-wrapper
{
height: 38px;
......@@ -3287,6 +3340,14 @@ select:focus
border: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item
{
color: inherit;
......
dist/css/mui.min.css
View file @ 26a9d00e
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 26a9d00e
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -1593,7 +1593,7 @@ var mui = (function(document, undefined) {
return;
}
var target = session.target;
if (!target || (target.disabled || target.classList.contains('mui-disabled'))) {
if (!target || (target.disabled || (target.classList && target.classList.contains('mui-disabled')))) {
return;
}
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
......@@ -1758,6 +1758,7 @@ var mui = (function(document, undefined) {
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
......@@ -1925,7 +1926,7 @@ var mui = (function(document, undefined) {
* @returns {Object}
*/
$.showOptions = function(options) {
return $.extend(defaultShow, options);
return $.extend(true,{},defaultShow, options);
};
/**
* 窗口默认配置
......@@ -3192,28 +3193,28 @@ var mui = (function(document, undefined) {
this.stopped = false;
this.options = $.extend(true, {
scrollY: true,//是否竖向滚动
scrollX: false,//是否横向滚动
startX: 0,//初始化时滚动至x
startY: 0,//初始化时滚动至y
indicators: true,//是否显示滚动条
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
momentum: true,
snap: false,//图片轮播，拖拽式选项卡
snap: false, //图片轮播，拖拽式选项卡
bounce: true,//是否启用回弹
bounceTime: 300,//回弹动画时间
bounceEasing: ease.circular.style,//回弹动画曲线
bounce: true, //是否启用回弹
bounceTime: 300, //回弹动画时间
bounceEasing: ease.circular.style, //回弹动画曲线
directionLockThreshold: 5,
parallaxElement: false,//视差元素
parallaxElement: false, //视差元素
parallaxRatio: 0.5
}, options);
......@@ -3439,14 +3440,15 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition && this.moved) {
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
this.resetPosition(); //reset
// this.resetPosition(); //reset
$.trigger(this.scroller, 'scrollend', this);
// e.stopPropagation();
e.preventDefault();
......@@ -4086,7 +4088,6 @@ var mui = (function(document, undefined) {
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
e.preventDefault();
this._super(e);
},
_drag: function(e) {
......@@ -4899,13 +4900,24 @@ var mui = (function(document, undefined) {
this.options = $.extend(true, {
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1
opacity: 0.1,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
}, options);
document.body.classList.add('mui-fullscreen'); //fullscreen
this.refresh();
this.initEvent();
}
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
......@@ -4954,10 +4966,7 @@ var mui = (function(document, undefined) {
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
......@@ -4974,6 +4983,7 @@ var mui = (function(document, undefined) {
}
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
if (this.classList.contains(CLASS_ACTIVE)) {
if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
this.offCanvas = this.offCanvasRight;
......@@ -5012,7 +5022,7 @@ var mui = (function(document, undefined) {
}
}
}
if (this.offCanvas) {
if (this.offCanvas && this.scroller) {
this.startX = this.lastX;
this.isDragging = true;
......@@ -5787,6 +5797,7 @@ var mui = (function(document, undefined) {
var CLASS_CONTROL_ITEM = 'mui-control-item';
var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
var CLASS_SEGMENTED_CONTROL_VERTICAL = 'mui-segmented-control-vertical';
var CLASS_CONTROL_CONTENT = 'mui-control-content';
var CLASS_TAB_BAR = 'mui-bar-tab';
var CLASS_TAB_ITEM = 'mui-tab-item';
......@@ -5794,7 +5805,11 @@ var mui = (function(document, undefined) {
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
//vertical 如果preventDefault会导致无法滚动
} else {
event.preventDefault(); //stop hash change
}
// if (target.hash) {
return target;
// }
......@@ -5844,7 +5859,6 @@ var mui = (function(document, undefined) {
if (!targetTab.hash) {
return;
}
targetBody = document.getElementById(targetTab.hash.replace('#', ''));
if (!targetBody) {
......@@ -6476,17 +6490,21 @@ var mui = (function(document, undefined) {
var input = cell.querySelector('input[type=radio]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
} else if (classList.contains('mui-checkbox')) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
}
};
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
......@@ -6958,16 +6976,15 @@ var mui = (function(document, undefined) {
var inputClassName = 'mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__numbox_inited) return;
self.holder.__numbox_inited = true;
//避免重复初始化结束
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
......@@ -6977,6 +6994,9 @@ var mui = (function(document, undefined) {
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
......@@ -6993,6 +7013,9 @@ var mui = (function(document, undefined) {
self.checkValue();
});
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
......@@ -7015,28 +7038,38 @@ var mui = (function(document, undefined) {
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
new Numbox(element, options);
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
new Numbox(element, options);
element.numbox = new Numbox(element, options);
}
});
return this;
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
\ No newline at end of file
dist/js/mui.min.js
View file @ 26a9d00e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.css
View file @ 26a9d00e
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -574,6 +574,29 @@ p
color: #8f8f94;
}
.mui-row:before, .mui-row:after
{
display: table;
content: ' ';
}
.mui-row:after
{
clear: both;
}
.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
{
position: relative;
min-height: 1px;
}
.mui-row > [class*='mui-col-']
{
float: left;
}
.mui-col-xs-12
{
width: 100%;
......@@ -1867,14 +1890,14 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
border-bottom: 0;
border-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:first-child
.mui-card .mui-table-view .mui-table-view-divider:first-child, .mui-card .mui-table-view .mui-table-view-cell:first-child
{
top: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:last-child
.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child
{
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
......@@ -2548,20 +2571,36 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
.mui-grid-view.mui-grid-9
{
padding: 1px 0 1px 0;
padding-right: 0;
margin: 0;
padding: 0;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
background-color: #f2f2f2;
}
.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
{
display: table;
content: ' ';
}
.mui-grid-view.mui-grid-9:after
{
clear: both;
}
.mui-grid-view.mui-grid-9:after
{
position: static;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell
{
margin: -1px 0 0 -1px;
margin: 0;
padding: 11px 15px;
vertical-align: top;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
{
......@@ -3232,6 +3271,20 @@ select:focus
-webkit-touch-callout: none;
}
.mui-segmented-control.mui-segmented-control-vertical
{
border-collapse: collapse;
border-width: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
{
display: block;
border-bottom: 1px solid #c8c7cc;
border-left-width: 0;
}
.mui-segmented-control.mui-scroll-wrapper
{
height: 38px;
......@@ -3287,6 +3340,14 @@ select:focus
border: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item
{
color: inherit;
......
examples/hello-mui/css/mui.dtpicker.css
View file @ 26a9d00e
......@@ -44,8 +44,8 @@
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #eee;
background-color: #fff;
/*border-top: solid 1px #eee;
background-color: #fff;*/
}
.mui-ios .mui-dtpicker-body {
-webkit-perspective: 1200px;
......@@ -60,9 +60,10 @@
padding: 8px;
text-align: center;
border-top: solid 1px #ddd;
background-color: #fafafa;
background-color: #f0f0f0;
border-bottom: solid 1px #ccc;
}
.mui-dtpicker .mui-listpicker {
.mui-dtpicker .mui-picker {
width: 20%;
height: 100%;
margin: 0px;
......@@ -71,17 +72,17 @@
}
/*年月日时分*/
[data-type="datetime"] .mui-listpicker,
[data-type="datetime"] .mui-picker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 20%;
}
[data-type="datetime"] [data-id="picker-h"],
[data-type="datetime"] [data-id="title-h"] {
border-left: dotted 1px #ddd;
border-left: dotted 1px #ccc;
}
/*年月日*/
[data-type="date"] .mui-listpicker,
[data-type="date"] .mui-picker,
[data-type="date"] .mui-dtpicker-title h5 {
width: 33.3%;
}
......@@ -93,7 +94,7 @@
}
/*年月日时*/
[data-type="hour"] .mui-listpicker,
[data-type="hour"] .mui-picker,
[data-type="hour"] .mui-dtpicker-title h5 {
width: 25%;
}
......@@ -103,11 +104,11 @@
}
[data-type="hour"] [data-id="picker-h"],
[data-type="hour"] [data-id="title-h"] {
border-left: dotted 1px #ddd;
border-left: dotted 1px #ccc;
}
/*时分*/
[data-type="time"] .mui-listpicker,
[data-type="time"] .mui-picker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 50%;
}
......@@ -121,7 +122,7 @@
}
/*年月*/
[data-type="month"] .mui-listpicker,
[data-type="month"] .mui-picker,
[data-type="month"] .mui-dtpicker-title h5 {
width: 50%;
}
......
examples/hello-mui/css/mui.min.css
View file @ 26a9d00e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.picker.all.css 0 → 100644
View file @ 26a9d00e
/**
* 选择列表插件
* 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 @ 26a9d00e
/**
* 选择列表插件
* 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 @ 26a9d00e
/**
* 选择列表插件
* 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 @ 26a9d00e
......@@ -13,11 +13,6 @@
.mui-poppicker.mui-active {
-webkit-transform: translateY(0px);
}
/*用于将 html body 禁止滚动条*/
.mui-poppicker-active-for-page {
overflow: hidden !important;
}
.mui-android-5-1 .mui-poppicker {
bottom: -300px;
-webkit-transition-property: bottom;
......@@ -55,14 +50,12 @@
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
}
.mui-ios .mui-poppicker-body {
-webkit-perspective: 1200px;
/*-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;*/
}
.mui-poppicker-body .mui-listpicker {
.mui-poppicker-body .mui-picker {
width: 100%;
height: 100%;
margin: 0px;
......
examples/hello-mui/examples/clouddb_wilddog.html
View file @ 26a9d00e
......@@ -61,7 +61,7 @@
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能； 在手机上新增数据后，你可以通过测试账号（账号：demo@dcloud.io/密码：12345678）登录野狗官网， 查看数据库的实时数据。
<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能。
</p>
</div>
......
examples/hello-mui/examples/dtpicker.html
View file @ 26a9d00e
......@@ -9,8 +9,9 @@
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link href="../css/mui.listpicker.css" rel="stylesheet" />
<link href="../css/mui.dtpicker.css" rel="stylesheet" />
<!--<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.dtpicker.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
<style>
html,
body,
......@@ -62,8 +63,9 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.listpicker.js"></script>
<script src="../js/mui.dtpicker.js"></script>
<!--<script src="../js/mui.picker.js"></script>
<script src="../js/mui.dtpicker.js"></script>-->
<script src="../js/mui.picker.min.js"></script>
<script>
(function($) {
$.init();
......@@ -91,17 +93,15 @@
* rs.i 分（minutes 的第二个字母），用法同年
*/
result.innerText = '选择结果: ' + rs.text;
/*
* 返回 false 可以阻止选择框的关闭
* return false;
*/
/*
* 释放组件资源，释放后将将不能再操作组件
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
*/
picker.dispose();
});
......
examples/hello-mui/examples/echarts.html
View file @ 26a9d00e
......@@ -33,6 +33,11 @@
<h1 class="mui-title">chart（EChart图表）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p style="text-indent: 22px;">
这是mui集成百度ECharts的图表示例，ECharts的详细用法及 API 请参考其官方网站: <a id='echarts' data-url='http://echarts.baidu.com'>http://echarts.baidu.com</a>
</p>
</div>
<div class="mui-content-padded">
<h5>柱图示例</h5>
<div class="chart" id="barChart"></div>
......@@ -134,6 +139,10 @@
lineChart.setOption(getOption('line'));
var pieChart = echarts.init(byId('pieChart'));
pieChart.setOption(getOption('pie'));
byId("echarts").addEventListener('tap',function(){
var url = this.getAttribute('data-url');
plus.runtime.openURL(url);
},false);
</script>
</body>
......
examples/hello-mui/examples/indexed-list-select.html
View file @ 26a9d00e
......@@ -17,8 +17,8 @@
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-bar-nav .mui-btn {
padding: 4px 8px;
#done.mui-disabled{
color: gray;
}
</style>
</head>
......@@ -27,7 +27,7 @@
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">选择机场</h1>
<button id='done' class="mui-btn mui-pull-right mui-btn-blue mui-disabled">确定</button>
<a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">完成</a>
</header>
<div class="mui-content">
<div id='list' class="mui-indexed-list">
......@@ -67,186 +67,345 @@
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>阿克苏机场</li>
<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>阿拉山口机场</li>
<li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>阿勒泰机场</li>
<li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>阿里昆莎机场</li>
<li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>安庆天柱山机场</li>
<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>澳门国际机场</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />阿克苏机场</li>
<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />阿拉山口机场</li>
<li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />阿勒泰机场</li>
<li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />阿里昆莎机场</li>
<li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />安庆天柱山机场</li>
<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />澳门国际机场</li>
<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
<li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>保山机场</li>
<li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>包头机场</li>
<li data-value="BHY" data-tags="BeiHaiFuCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>北海福成机场</li>
<li data-value="NAY" data-tags="BeiJingNanYuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>北京南苑机场</li>
<li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>北京首都国际机场</li>
<li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />保山机场</li>
<li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />包头机场</li>
<li data-value="BHY" data-tags="BeiHaiFuCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />北海福成机场</li>
<li data-value="NAY" data-tags="BeiJingNanYuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />北京南苑机场</li>
<li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />北京首都国际机场</li>
<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
<li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>长白山机场</li>
<li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>长春龙嘉国际机场</li>
<li data-value="CGD" data-tags="ChangDeTaoHuaYuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>常德桃花源机场</li>
<li data-value="BPX" data-tags="ChangDuBangDa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>昌都邦达机场</li>
<li data-value="CSX" data-tags="ChangShaHuangHuaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>长沙黄花国际机场</li>
<li data-value="CIH" data-tags="ChangZhiWangCun" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>长治王村机场</li>
<li data-value="CZX" data-tags="ChangZhouBenNiu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>常州奔牛机场</li>
<li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>成都双流国际机场</li>
<li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>赤峰机场</li>
<li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />长白山机场</li>
<li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />长春龙嘉国际机场</li>
<li data-value="CGD" data-tags="ChangDeTaoHuaYuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />常德桃花源机场</li>
<li data-value="BPX" data-tags="ChangDuBangDa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />昌都邦达机场</li>
<li data-value="CSX" data-tags="ChangShaHuangHuaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />长沙黄花国际机场</li>
<li data-value="CIH" data-tags="ChangZhiWangCun" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />长治王村机场</li>
<li data-value="CZX" data-tags="ChangZhouBenNiu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />常州奔牛机场</li>
<li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />成都双流国际机场</li>
<li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />赤峰机场</li>
<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
<li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>大理机场</li>
<li data-value="DLC" data-tags="DaLianZhouShuiZiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>大连周水子国际机场</li>
<li data-value="DQA" data-tags="DaQingSaErTu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>大庆萨尔图机场</li>
<li data-value="DAT" data-tags="DaTongDongWangZhuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>大同东王庄机场</li>
<li data-value="DAX" data-tags="DaZhouHeShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>达州河市机场</li>
<li data-value="DDG" data-tags="DanDongLangTou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>丹东浪头机场</li>
<li data-value="LUM" data-tags="DeHongMangShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>德宏芒市机场</li>
<li data-value="DIG" data-tags="DiQingXiangGeLiLa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>迪庆香格里拉机场</li>
<li data-value="DOY" data-tags="DongYing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>东营机场</li>
<li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>敦煌机场</li>
<li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />大理机场</li>
<li data-value="DLC" data-tags="DaLianZhouShuiZiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />大连周水子国际机场</li>
<li data-value="DQA" data-tags="DaQingSaErTu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />大庆萨尔图机场</li>
<li data-value="DAT" data-tags="DaTongDongWangZhuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />大同东王庄机场</li>
<li data-value="DAX" data-tags="DaZhouHeShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />达州河市机场</li>
<li data-value="DDG" data-tags="DanDongLangTou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />丹东浪头机场</li>
<li data-value="LUM" data-tags="DeHongMangShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />德宏芒市机场</li>
<li data-value="DIG" data-tags="DiQingXiangGeLiLa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />迪庆香格里拉机场</li>
<li data-value="DOY" data-tags="DongYing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />东营机场</li>
<li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />敦煌机场</li>
<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
<li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>鄂尔多斯机场</li>
<li data-value="ENH" data-tags="EnShiXuJiaPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>恩施许家坪机场</li>
<li data-value="ERL" data-tags="ErLianHaoTeSaiWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>二连浩特赛乌苏国际机场</li>
<li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />鄂尔多斯机场</li>
<li data-value="ENH" data-tags="EnShiXuJiaPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />恩施许家坪机场</li>
<li data-value="ERL" data-tags="ErLianHaoTeSaiWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />二连浩特赛乌苏国际机场</li>
<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
<li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>阜阳西关机场</li>
<li data-value="FOC" data-tags="FuZhouChangLeGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>福州长乐国际机场</li>
<li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />阜阳西关机场</li>
<li data-value="FOC" data-tags="FuZhouChangLeGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />福州长乐国际机场</li>
<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
<li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>赣州黄金机场</li>
<li data-value="GOQ" data-tags="GeErMu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>格尔木机场</li>
<li data-value="GYU" data-tags="GuYuanLiuPanShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>固原六盘山机场</li>
<li data-value="GYS" data-tags="GuangYuanPanLong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>广元盘龙机场</li>
<li data-value="CAN" data-tags="GuangZhouBaiYunGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>广州白云国际机场</li>
<li data-value="KWL" data-tags="GuiLinLiangJiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>桂林两江国际机场</li>
<li data-value="KWE" data-tags="GuiYangLongDongBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>贵阳龙洞堡国际机场</li>
<li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />赣州黄金机场</li>
<li data-value="GOQ" data-tags="GeErMu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />格尔木机场</li>
<li data-value="GYU" data-tags="GuYuanLiuPanShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />固原六盘山机场</li>
<li data-value="GYS" data-tags="GuangYuanPanLong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />广元盘龙机场</li>
<li data-value="CAN" data-tags="GuangZhouBaiYunGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />广州白云国际机场</li>
<li data-value="KWL" data-tags="GuiLinLiangJiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />桂林两江国际机场</li>
<li data-value="KWE" data-tags="GuiYangLongDongBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />贵阳龙洞堡国际机场</li>
<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
<li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>哈尔滨太平国际机场</li>
<li data-value="HMI" data-tags="HaMi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>哈密机场</li>
<li data-value="HAK" data-tags="HaiKouMeiLanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>海口美兰国际机场</li>
<li data-value="HLD" data-tags="HaiLaErDongShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>海拉尔东山国际机场</li>
<li data-value="HDG" data-tags="HanDan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>邯郸机场</li>
<li data-value="HZG" data-tags="HanZhong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>汉中机场</li>
<li data-value="HGH" data-tags="HangZhouXiaoShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>杭州萧山国际机场</li>
<li data-value="HFE" data-tags="HeFeiLuoGangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>合肥骆岗国际机场</li>
<li data-value="HTN" data-tags="HeTian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>和田机场</li>
<li data-value="HEK" data-tags="HeiHe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>黑河机场</li>
<li data-value="HET" data-tags="HuHeHaoTeBaiTaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>呼和浩特白塔国际机场</li>
<li data-value="HIA" data-tags="HuaiAnLianShui" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>淮安涟水机场</li>
<li data-value="TXN" data-tags="HuangShanTunXiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>黄山屯溪国际机场</li>
<li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />哈尔滨太平国际机场</li>
<li data-value="HMI" data-tags="HaMi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />哈密机场</li>
<li data-value="HAK" data-tags="HaiKouMeiLanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />海口美兰国际机场</li>
<li data-value="HLD" data-tags="HaiLaErDongShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />海拉尔东山国际机场</li>
<li data-value="HDG" data-tags="HanDan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />邯郸机场</li>
<li data-value="HZG" data-tags="HanZhong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />汉中机场</li>
<li data-value="HGH" data-tags="HangZhouXiaoShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />杭州萧山国际机场</li>
<li data-value="HFE" data-tags="HeFeiLuoGangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />合肥骆岗国际机场</li>
<li data-value="HTN" data-tags="HeTian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />和田机场</li>
<li data-value="HEK" data-tags="HeiHe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />黑河机场</li>
<li data-value="HET" data-tags="HuHeHaoTeBaiTaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />呼和浩特白塔国际机场</li>
<li data-value="HIA" data-tags="HuaiAnLianShui" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />淮安涟水机场</li>
<li data-value="TXN" data-tags="HuangShanTunXiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />黄山屯溪国际机场</li>
<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
<li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>济南遥墙国际机场</li>
<li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>济宁曲阜机场</li>
<li data-value="JXA" data-tags="JiXiXingKaiHu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>鸡西兴凯湖机场</li>
<li data-value="JMU" data-tags="JiaMuSiDongJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>佳木斯东郊机场</li>
<li data-value="JGN" data-tags="JiaYuGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>嘉峪关机场</li>
<li data-value="JNZ" data-tags="JinZhouXiaoLingZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>锦州小岭子机场</li>
<li data-value="JDZ" data-tags="JingDeZhen" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>景德镇机场</li>
<li data-value="JGS" data-tags="JingGangShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>井冈山机场</li>
<li data-value="JIU" data-tags="JiuJiangLuShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>九江庐山机场</li>
<li data-value="JZH" data-tags="JiuZhaiHuangLong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>九寨黄龙机场</li>
<li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />济南遥墙国际机场</li>
<li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />济宁曲阜机场</li>
<li data-value="JXA" data-tags="JiXiXingKaiHu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />鸡西兴凯湖机场</li>
<li data-value="JMU" data-tags="JiaMuSiDongJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />佳木斯东郊机场</li>
<li data-value="JGN" data-tags="JiaYuGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />嘉峪关机场</li>
<li data-value="JNZ" data-tags="JinZhouXiaoLingZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />锦州小岭子机场</li>
<li data-value="JDZ" data-tags="JingDeZhen" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />景德镇机场</li>
<li data-value="JGS" data-tags="JingGangShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />井冈山机场</li>
<li data-value="JIU" data-tags="JiuJiangLuShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />九江庐山机场</li>
<li data-value="JZH" data-tags="JiuZhaiHuangLong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />九寨黄龙机场</li>
<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
<li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>喀什机场</li>
<li data-value="KRY" data-tags="KeLaMaYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>克拉玛依机场</li>
<li data-value="KCA" data-tags="KuCheGuiZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>库车龟兹机场</li>
<li data-value="KRL" data-tags="KuErLe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>库尔勒机场</li>
<li data-value="KMG" data-tags="KunMingWuJiaBaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>昆明巫家坝国际机场</li>
<li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />喀什机场</li>
<li data-value="KRY" data-tags="KeLaMaYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />克拉玛依机场</li>
<li data-value="KCA" data-tags="KuCheGuiZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />库车龟兹机场</li>
<li data-value="KRL" data-tags="KuErLe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />库尔勒机场</li>
<li data-value="KMG" data-tags="KunMingWuJiaBaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />昆明巫家坝国际机场</li>
<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
<li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>拉萨贡嘎机场</li>
<li data-value="LHW" data-tags="LanZhouZhongChuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>兰州中川机场</li>
<li data-value="LJG" data-tags="LiJiangSanYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>丽江三义机场</li>
<li data-value="HZH" data-tags="LiPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>黎平机场</li>
<li data-value="LYG" data-tags="LianYunGangBaiTaBu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>连云港白塔埠机场</li>
<li data-value="LNJ" data-tags="LinCang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>临沧机场</li>
<li data-value="LYI" data-tags="LinYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>临沂机场</li>
<li data-value="LZY" data-tags="LinZhiMiLin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>林芝米林机场</li>
<li data-value="LZH" data-tags="LiuZhouBaiLian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>柳州白莲机场</li>
<li data-value="LCX" data-tags="LongYanGuanZhiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>龙岩冠豸山机场</li>
<li data-value="LZO" data-tags="LuZhouLanTian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>泸州蓝田机场</li>
<li data-value="LYA" data-tags="LuoYangBeiJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>洛阳北郊机场</li>
<li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />拉萨贡嘎机场</li>
<li data-value="LHW" data-tags="LanZhouZhongChuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />兰州中川机场</li>
<li data-value="LJG" data-tags="LiJiangSanYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />丽江三义机场</li>
<li data-value="HZH" data-tags="LiPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />黎平机场</li>
<li data-value="LYG" data-tags="LianYunGangBaiTaBu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />连云港白塔埠机场</li>
<li data-value="LNJ" data-tags="LinCang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />临沧机场</li>
<li data-value="LYI" data-tags="LinYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />临沂机场</li>
<li data-value="LZY" data-tags="LinZhiMiLin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />林芝米林机场</li>
<li data-value="LZH" data-tags="LiuZhouBaiLian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />柳州白莲机场</li>
<li data-value="LCX" data-tags="LongYanGuanZhiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />龙岩冠豸山机场</li>
<li data-value="LZO" data-tags="LuZhouLanTian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />泸州蓝田机场</li>
<li data-value="LYA" data-tags="LuoYangBeiJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />洛阳北郊机场</li>
<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
<li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>满洲里西郊机场</li>
<li data-value="MIG" data-tags="MianYangNanJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>绵阳南郊机场</li>
<li data-value="OHE" data-tags="MoHeGuLian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>漠河古莲机场</li>
<li data-value="MDG" data-tags="MuDanJiangHaiLang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>牡丹江海浪机场</li>
<li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />满洲里西郊机场</li>
<li data-value="MIG" data-tags="MianYangNanJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />绵阳南郊机场</li>
<li data-value="OHE" data-tags="MoHeGuLian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />漠河古莲机场</li>
<li data-value="MDG" data-tags="MuDanJiangHaiLang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />牡丹江海浪机场</li>
<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
<li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>南昌昌北国际机场</li>
<li data-value="NAO" data-tags="NanChongGaoPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>南充高坪机场</li>
<li data-value="NKG" data-tags="NanJingLuKouGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>南京禄口国际机场</li>
<li data-value="NNG" data-tags="NanNingWuXu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>南宁吴圩机场</li>
<li data-value="NTG" data-tags="NanTongXingDong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>南通兴东机场</li>
<li data-value="NNY" data-tags="NanYangJiangYing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>南阳姜营机场</li>
<li data-value="NGB" data-tags="NingBoLiSheGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>宁波栎社国际机场</li>
<li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />南昌昌北国际机场</li>
<li data-value="NAO" data-tags="NanChongGaoPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />南充高坪机场</li>
<li data-value="NKG" data-tags="NanJingLuKouGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />南京禄口国际机场</li>
<li data-value="NNG" data-tags="NanNingWuXu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />南宁吴圩机场</li>
<li data-value="NTG" data-tags="NanTongXingDong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />南通兴东机场</li>
<li data-value="NNY" data-tags="NanYangJiangYing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />南阳姜营机场</li>
<li data-value="NGB" data-tags="NingBoLiSheGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />宁波栎社国际机场</li>
<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
<li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>普洱思茅机场</li>
<li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />普洱思茅机场</li>
<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
<li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>齐齐哈尔三家子机场</li>
<li data-value="SHP" data-tags="QinHuangDaoShanHaiGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>秦皇岛山海关机场</li>
<li data-value="TAO" data-tags="QingDaoLiuTingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>青岛流亭国际机场</li>
<li data-value="JUZ" data-tags="QuZhou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>衢州机场</li>
<li data-value="JJN" data-tags="QuanZhouJinJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>泉州晋江机场</li>
<li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />齐齐哈尔三家子机场</li>
<li data-value="SHP" data-tags="QinHuangDaoShanHaiGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />秦皇岛山海关机场</li>
<li data-value="TAO" data-tags="QingDaoLiuTingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />青岛流亭国际机场</li>
<li data-value="JUZ" data-tags="QuZhou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />衢州机场</li>
<li data-value="JJN" data-tags="QuanZhouJinJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />泉州晋江机场</li>
<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
<li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>日喀则和平机场</li>
<li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />日喀则和平机场</li>
<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
<li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>三亚凤凰国际机场</li>
<li data-value="SWA" data-tags="ShanTouWaiSha" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>汕头外砂机场</li>
<li data-value="SHA" data-tags="ShangHaiHongQiaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>上海虹桥国际机场</li>
<li data-value="PVG" data-tags="ShangHaiPuDongGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>上海浦东国际机场</li>
<li data-value="SZX" data-tags="ShenChouBaoAnGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>深圳宝安国际机场</li>
<li data-value="SHE" data-tags="ShenYangTaoXianGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>沈阳桃仙国际机场</li>
<li data-value="SJW" data-tags="ShiJiaZhuangZhengDingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>石家庄正定国际机场</li>
<li data-value="WUX" data-tags="SuNanShuoFangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>苏南硕放国际机场</li>
<li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />三亚凤凰国际机场</li>
<li data-value="SWA" data-tags="ShanTouWaiSha" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />汕头外砂机场</li>
<li data-value="SHA" data-tags="ShangHaiHongQiaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />上海虹桥国际机场</li>
<li data-value="PVG" data-tags="ShangHaiPuDongGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />上海浦东国际机场</li>
<li data-value="SZX" data-tags="ShenChouBaoAnGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />深圳宝安国际机场</li>
<li data-value="SHE" data-tags="ShenYangTaoXianGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />沈阳桃仙国际机场</li>
<li data-value="SJW" data-tags="ShiJiaZhuangZhengDingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />石家庄正定国际机场</li>
<li data-value="WUX" data-tags="SuNanShuoFangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />苏南硕放国际机场</li>
<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
<li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>塔城机场</li>
<li data-value="TYN" data-tags="TaiYuanWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>太原武宿国际机场</li>
<li data-value="HYN" data-tags="TaiZhouLuQiao-HuangYanJiChang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>台州路桥机场 (黄岩机场)</li>
<li data-value="TVS" data-tags="TangShanSanNvHe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>唐山三女河机场</li>
<li data-value="TCZ" data-tags="TengChongTuoFeng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>腾冲驼峰机场</li>
<li data-value="TSN" data-tags="TianJinBinHaiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>天津滨海国际机场</li>
<li data-value="TGO" data-tags="TongLiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>通辽机场</li>
<li data-value="TEN" data-tags="TongRenFengHuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>铜仁凤凰机场</li>
<li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />塔城机场</li>
<li data-value="TYN" data-tags="TaiYuanWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />太原武宿国际机场</li>
<li data-value="HYN" data-tags="TaiZhouLuQiao-HuangYanJiChang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />台州路桥机场 (黄岩机场)</li>
<li data-value="TVS" data-tags="TangShanSanNvHe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />唐山三女河机场</li>
<li data-value="TCZ" data-tags="TengChongTuoFeng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />腾冲驼峰机场</li>
<li data-value="TSN" data-tags="TianJinBinHaiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />天津滨海国际机场</li>
<li data-value="TGO" data-tags="TongLiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />通辽机场</li>
<li data-value="TEN" data-tags="TongRenFengHuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />铜仁凤凰机场</li>
<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
<li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>万州五桥机场</li>
<li data-value="WEF" data-tags="WeiFang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>潍坊机场</li>
<li data-value="WEH" data-tags="WeiHaiDaShuiBo" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>威海大水泊机场</li>
<li data-value="WNH" data-tags="WenShanPuZheHei" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>文山普者黑机场</li>
<li data-value="WNZ" data-tags="WenZhouYongQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>温州永强国际机场</li>
<li data-value="WUA" data-tags="WuHai" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>乌海机场</li>
<li data-value="WUH" data-tags="WuHanTianHeGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>武汉天河国际机场</li>
<li data-value="HLH" data-tags="WuLanHaoTe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>乌兰浩特机场</li>
<li data-value="URC" data-tags="WuLuMuQiDiWoBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>乌鲁木齐地窝堡国际机场</li>
<li data-value="WUS" data-tags="WuYiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>武夷山机场</li>
<li data-value="WUZ" data-tags="WuZhouChangZhouDao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>梧州长洲岛机场</li>
<li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />万州五桥机场</li>
<li data-value="WEF" data-tags="WeiFang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />潍坊机场</li>
<li data-value="WEH" data-tags="WeiHaiDaShuiBo" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />威海大水泊机场</li>
<li data-value="WNH" data-tags="WenShanPuZheHei" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />文山普者黑机场</li>
<li data-value="WNZ" data-tags="WenZhouYongQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />温州永强国际机场</li>
<li data-value="WUA" data-tags="WuHai" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />乌海机场</li>
<li data-value="WUH" data-tags="WuHanTianHeGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />武汉天河国际机场</li>
<li data-value="HLH" data-tags="WuLanHaoTe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />乌兰浩特机场</li>
<li data-value="URC" data-tags="WuLuMuQiDiWoBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />乌鲁木齐地窝堡国际机场</li>
<li data-value="WUS" data-tags="WuYiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />武夷山机场</li>
<li data-value="WUZ" data-tags="WuZhouChangZhouDao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />梧州长洲岛机场</li>
<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
<li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>西安咸阳国际机场</li>
<li data-value="XIC" data-tags="XiChangQingShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>西昌青山机场</li>
<li data-value="XIL" data-tags="XiLinHaoTe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>锡林浩特机场</li>
<li data-value="XNN" data-tags="XiNingCaoJiaBao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>西宁曹家堡机场</li>
<li data-value="JHG" data-tags="XiShuangBanNaGaSa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>西双版纳嘎洒机场</li>
<li data-value="XMN" data-tags="XiaMenGaoQiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>厦门高崎国际机场</li>
<li data-value="HKG" data-tags="XiangGangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>香港国际机场</li>
<li data-value="XFN" data-tags="XiangYangLiuJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>襄阳刘集机场</li>
<li data-value="ACX" data-tags="XingYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>兴义机场</li>
<li data-value="XUZ" data-tags="XuZhouGuanYin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>徐州观音机场</li>
<li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />西安咸阳国际机场</li>
<li data-value="XIC" data-tags="XiChangQingShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />西昌青山机场</li>
<li data-value="XIL" data-tags="XiLinHaoTe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />锡林浩特机场</li>
<li data-value="XNN" data-tags="XiNingCaoJiaBao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />西宁曹家堡机场</li>
<li data-value="JHG" data-tags="XiShuangBanNaGaSa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />西双版纳嘎洒机场</li>
<li data-value="XMN" data-tags="XiaMenGaoQiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />厦门高崎国际机场</li>
<li data-value="HKG" data-tags="XiangGangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />香港国际机场</li>
<li data-value="XFN" data-tags="XiangYangLiuJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />襄阳刘集机场</li>
<li data-value="ACX" data-tags="XingYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />兴义机场</li>
<li data-value="XUZ" data-tags="XuZhouGuanYin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />徐州观音机场</li>
<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
<li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>延安二十里堡机场</li>
<li data-value="YNZ" data-tags="YanCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>盐城机场</li>
<li data-value="YNJ" data-tags="YanJiChaoYangChuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>延吉朝阳川机场</li>
<li data-value="YNT" data-tags="YanTaiLaiShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>烟台莱山国际机场</li>
<li data-value="YBP" data-tags="YiBinCaiBa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>宜宾菜坝机场</li>
<li data-value="YIH" data-tags="YiChangSanXia" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>宜昌三峡机场</li>
<li data-value="LDS" data-tags="YiChunLinDu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>伊春林都机场</li>
<li data-value="YIN" data-tags="YiNing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>伊宁机场</li>
<li data-value="YIW" data-tags="YiWu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>义乌机场</li>
<li data-value="INC" data-tags="YinChuanHeDong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>银川河东机场</li>
<li data-value="LLF" data-tags="YongZhouLingLing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>永州零陵机场</li>
<li data-value="UYN" data-tags="YuLinYuYang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>榆林榆阳机场</li>
<li data-value="YUS" data-tags="YuShuBaTang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>玉树巴塘机场</li>
<li data-value="YCU" data-tags="YunChengZhangXiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>运城张孝机场</li>
<li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />延安二十里堡机场</li>
<li data-value="YNZ" data-tags="YanCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />盐城机场</li>
<li data-value="YNJ" data-tags="YanJiChaoYangChuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />延吉朝阳川机场</li>
<li data-value="YNT" data-tags="YanTaiLaiShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />烟台莱山国际机场</li>
<li data-value="YBP" data-tags="YiBinCaiBa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />宜宾菜坝机场</li>
<li data-value="YIH" data-tags="YiChangSanXia" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />宜昌三峡机场</li>
<li data-value="LDS" data-tags="YiChunLinDu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />伊春林都机场</li>
<li data-value="YIN" data-tags="YiNing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />伊宁机场</li>
<li data-value="YIW" data-tags="YiWu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />义乌机场</li>
<li data-value="INC" data-tags="YinChuanHeDong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />银川河东机场</li>
<li data-value="LLF" data-tags="YongZhouLingLing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />永州零陵机场</li>
<li data-value="UYN" data-tags="YuLinYuYang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />榆林榆阳机场</li>
<li data-value="YUS" data-tags="YuShuBaTang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />玉树巴塘机场</li>
<li data-value="YCU" data-tags="YunChengZhangXiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />运城张孝机场</li>
<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
<li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>湛江机场</li>
<li data-value="ZAT" data-tags="ZhaoTong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>昭通机场</li>
<li data-value="CGO" data-tags="ZhengZhouXinZhengGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>郑州新郑国际机场</li>
<li data-value="HJJ" data-tags="ZhiJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>芷江机场</li>
<li data-value="CKG" data-tags="ZhongQingJiangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>重庆江北国际机场</li>
<li data-value="ZHY" data-tags="ZhongWeiXiangShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>中卫香山机场</li>
<li data-value="HSN" data-tags="ZhouShanZhuJiaJian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>舟山朱家尖机场</li>
<li data-value="ZUH" data-tags="ZhuHaiSanZao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left"><input type="checkbox"/>珠海三灶机场</li>
<li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />湛江机场</li>
<li data-value="ZAT" data-tags="ZhaoTong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />昭通机场</li>
<li data-value="CGO" data-tags="ZhengZhouXinZhengGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />郑州新郑国际机场</li>
<li data-value="HJJ" data-tags="ZhiJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />芷江机场</li>
<li data-value="CKG" data-tags="ZhongQingJiangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />重庆江北国际机场</li>
<li data-value="ZHY" data-tags="ZhongWeiXiangShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />中卫香山机场</li>
<li data-value="HSN" data-tags="ZhouShanZhuJiaJian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />舟山朱家尖机场</li>
<li data-value="ZUH" data-tags="ZhuHaiSanZao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
<input type="checkbox" />珠海三灶机场</li>
</ul>
</div>
</div>
......@@ -265,30 +424,30 @@
//create
window.indexedList = new mui.IndexedList(list);
//done event
done.addEventListener('tap',function(){
done.addEventListener('tap', function() {
var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
var checkedValues = [];
checkboxArray.forEach(function(box){
if(box.checked){
checkboxArray.forEach(function(box) {
if (box.checked) {
checkedValues.push(box.parentNode.innerText);
}
});
if(checkedValues.length>0){
mui.alert('你选择了: '+checkedValues);
}else{
if (checkedValues.length > 0) {
mui.alert('你选择了: ' + checkedValues);
} else {
mui.alert('你没选择任何机场');
}
},false);
}, false);
mui('.mui-indexed-list-inner').on('change', 'input', function() {
var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
var value = count?"确定("+count+")":"确定";
var value = count ? "完成(" + count + ")" : "完成";
done.innerHTML = value;
if(count){
if(done.classList.contains("mui-disabled")){
if (count) {
if (done.classList.contains("mui-disabled")) {
done.classList.remove("mui-disabled");
}
}else{
if(!done.classList.contains("mui-disabled")){
} else {
if (!done.classList.contains("mui-disabled")) {
done.classList.add("mui-disabled");
}
}
......
examples/hello-mui/examples/info.html
View file @ 26a9d00e
......@@ -48,7 +48,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为2.2.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为2.3.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/picker.html
View file @ 26a9d00e
......@@ -9,8 +9,9 @@
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link href="../css/mui.listpicker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />
<!--<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
<style>
.mui-btn {
font-size: 16px;
......@@ -60,8 +61,9 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.listpicker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/mui.picker.min.js"></script>
<!--<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>-->
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
......
examples/hello-mui/examples/setting.html
View file @ 26a9d00e
......@@ -215,7 +215,7 @@
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.2.0</i></a>
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.3.0</i></a>
</li>
</ul>
<ul class="mui-table-view">
......
examples/hello-mui/examples/tab-webview-main.html
View file @ 26a9d00e
......@@ -46,7 +46,7 @@
mui.init();
var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
var subpage_style = {
top: '46px',
top: '44px',
bottom: '50px'
};
......
examples/hello-mui/examples/tab-with-segmented-control-vertical.html 0 → 100644
View file @ 26a9d00e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-row.mui-fullscreen>[class*="mui-col-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-control-content {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
width: 100%;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
background-color: #fff;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">侧面选项卡-div模式</h1>
</header>
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
</div>
</div>
<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
<div id="item1" class="mui-control-content mui-active">
</div>
<div id="item2" class="mui-control-content">
</div>
<div id="item3" class="mui-control-content">
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
var controls = document.getElementById("segmentedControls");
var contents = document.getElementById("segmentedControlContents");
var html = [];
var i = 1,
j = 1,
m = 16, //左侧选项卡数量+1
n = 21; //每个选项卡列表数量+1
for (; i < m; i++) {
html.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');
}
controls.innerHTML = html.join('');
html = [];
for (i = 1; i < m; i++) {
html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
for (j = 1; j < n; j++) {
html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
}
html.push('</ul></div>');
}
contents.innerHTML = html.join('');
//默认选中第一个
controls.querySelector('.mui-control-item').classList.add('mui-active');
contents.querySelector('.mui-control-content').classList.add('mui-active');
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 26a9d00e
......@@ -24,7 +24,7 @@
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮式选项卡</h1>
<h1 class="mui-title">顶部选项卡-div模式</h1>
</header>
<div class="mui-content">
<div style="padding: 10px 10px;">
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 26a9d00e
......@@ -25,6 +25,10 @@
margin-top: 50px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">顶部选项卡-可左右拖动(div)</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
......
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ 26a9d00e
......@@ -21,13 +21,18 @@
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">含二级菜单的选项卡</h1>
<h1 class="mui-title">底部选项卡-二级菜单(div)</h1>
</header>
<nav class="mui-bar mui-bar-tab ">
<a class="mui-tab-item" href="#Popover_0">产品</a>
<a class="mui-tab-item" href="#Popover_1">方案</a>
<a class="mui-tab-item" href="#Popover_2">新闻</a>
</nav>
<div class="mui-content">
<div class="mui-content-padded">
<p style="text-indent: 22px;">这是包含二级菜单的底部选项卡示例，点击底部菜单，会展开显示对应的二级菜单。</p>
</div>
</div>
<div id="Popover_0" class="mui-popover mui-bar-popover">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
......
examples/hello-mui/examples/tabbar.html
View file @ 26a9d00e
......@@ -50,7 +50,7 @@
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">选项卡（Tab）-div模式</h1>
<h1 class="mui-title">底部选项卡-div模式</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
......
examples/hello-mui/js/mui.dtpicker.js
View file @ 26a9d00e
......@@ -6,6 +6,23 @@
*/
(function($, document) {
//创建 DOM
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement('div');
}
$.__create_dom_div__.innerHTML = str;
return [].slice.call($.__create_dom_div__.childNodes);
};
var domBuffer = '<div class="mui-dtpicker" data-type="datetime">\
<div class="mui-dtpicker-header">\
<button data-id="btn-cancel" class="mui-btn">取消</button>\
......@@ -13,47 +30,56 @@
</div>\
<div class="mui-dtpicker-title"><h5 data-id="title-y">年</h5><h5 data-id="title-m">月</h5><h5 data-id="title-d">日</h5><h5 data-id="title-h">时</h5><h5 data-id="title-i">分</h5></div>\
<div class="mui-dtpicker-body">\
<div data-id="picker-y" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
<div data-id="picker-y" class="mui-picker">\
<div class="mui-picker-inner">\
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\
</div>\
<div data-id="picker-m" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
<div data-id="picker-m" class="mui-picker">\
<div class="mui-picker-inner">\
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\
</div>\
<div data-id="picker-d" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
<div data-id="picker-d" class="mui-picker">\
<div class="mui-picker-inner">\
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\
</div>\
<div data-id="picker-h" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
<div data-id="picker-h" class="mui-picker">\
<div class="mui-picker-inner">\
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\
</div>\
<div data-id="picker-i" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
<div data-id="picker-i" class="mui-picker">\
<div class="mui-picker-inner">\
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\
</div>\
</div>\
</div>';
//plugin
var DtPicker = $.DtPicker = $.Class.extend({
init: function(options) {
var self = this;
var _picker = $.dom(domBuffer)[0];
document.body.appendChild(_picker);
$('[data-id*="picker"]', _picker).listpicker();
$('[data-id*="picker"]', _picker).picker();
var ui = self.ui = {
picker: _picker,
mask: $.createMask(),
......@@ -85,6 +111,13 @@
self.hide();
}, false);
self._create(options);
//防止滚动穿透
self.ui.picker.addEventListener('touchstart',function(event){
event.preventDefault();
},false);
self.ui.picker.addEventListener('touchmove',function(event){
event.preventDefault();
},false);
},
getSelected: function() {
var self = this;
......@@ -92,11 +125,11 @@
var type = self.options.type;
var selected = {
type: type,
y: ui.y.getSelectedItem(),
m: ui.m.getSelectedItem(),
d: ui.d.getSelectedItem(),
h: ui.h.getSelectedItem(),
i: ui.i.getSelectedItem(),
y: ui.y.picker.getSelectedItem(),
m: ui.m.picker.getSelectedItem(),
d: ui.d.picker.getSelectedItem(),
h: ui.h.picker.getSelectedItem(),
i: ui.i.picker.getSelectedItem(),
toString: function() {
return this.value;
}
......@@ -129,11 +162,11 @@
var self = this;
var ui = self.ui;
var parsedValue = self._parseValue(value);
ui.y.setSelectedValue(parsedValue.y, true);
ui.m.setSelectedValue(parsedValue.m, true);
ui.d.setSelectedValue(parsedValue.d, true);
ui.h.setSelectedValue(parsedValue.h, true);
ui.i.setSelectedValue(parsedValue.i, true);
ui.y.picker.setSelectedValue(parsedValue.y, 0);
ui.m.picker.setSelectedValue(parsedValue.m, 0);
ui.d.picker.setSelectedValue(parsedValue.d, 0);
ui.h.picker.setSelectedValue(parsedValue.h, 0);
ui.i.picker.setSelectedValue(parsedValue.i, 0);
},
isLeapYear: function(year) {
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
......@@ -182,8 +215,8 @@
});
}
}
ui.y.setItems(yArray);
//ui.y.setSelectedValue(current);
ui.y.picker.setItems(yArray);
//ui.y.picker.setSelectedValue(current);
},
_createMonth: function(current) {
var self = this;
......@@ -202,8 +235,8 @@
});
}
}
ui.m.setItems(mArray);
//ui.m.setSelectedValue(current);
ui.m.picker.setItems(mArray);
//ui.m.picker.setSelectedValue(current);
},
_createDay: function(current) {
var self = this;
......@@ -214,7 +247,7 @@
if (options.customData.d) {
dArray = options.customData.d;
} else {
var maxDay = self.getDayNum(parseInt(ui.y.getSelectedValue()), parseInt(ui.m.getSelectedValue()));
var maxDay = self.getDayNum(parseInt(ui.y.picker.getSelectedValue()), parseInt(ui.m.picker.getSelectedValue()));
for (var d = 1; d <= maxDay; d++) {
var val = self._fill(d);
dArray.push({
......@@ -223,9 +256,9 @@
});
}
}
ui.d.setItems(dArray);
current = current || ui.d.getSelectedValue();
//ui.d.setSelectedValue(current);
ui.d.picker.setItems(dArray);
current = current || ui.d.picker.getSelectedValue();
//ui.d.picker.setSelectedValue(current);
},
_createHours: function(current) {
var self = this;
......@@ -244,8 +277,8 @@
});
}
}
ui.h.setItems(hArray);
//ui.h.setSelectedValue(current);
ui.h.picker.setItems(hArray);
//ui.h.picker.setSelectedValue(current);
},
_createMinutes: function(current) {
var self = this;
......@@ -264,8 +297,8 @@
});
}
}
ui.i.setItems(iArray);
//ui.i.setSelectedValue(current);
ui.i.picker.setItems(iArray);
//ui.i.picker.setSelectedValue(current);
},
_setLabels: function() {
var self = this;
......@@ -336,6 +369,11 @@
ui.mask.show();
document.body.classList.add($.className('dtpicker-active-for-page'));
ui.picker.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
},
hide: function() {
var self = this;
......@@ -344,6 +382,8 @@
ui.picker.classList.remove($.className('active'));
ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page'));
//处理物理返回键
$.back=self.__back;
},
dispose: function() {
var self = this;
......
examples/hello-mui/js/mui.js
View file @ 26a9d00e
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -1593,7 +1593,7 @@ var mui = (function(document, undefined) {
return;
}
var target = session.target;
if (!target || (target.disabled || target.classList.contains('mui-disabled'))) {
if (!target || (target.disabled || (target.classList && target.classList.contains('mui-disabled')))) {
return;
}
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
......@@ -1758,6 +1758,7 @@ var mui = (function(document, undefined) {
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
......@@ -1925,7 +1926,7 @@ var mui = (function(document, undefined) {
* @returns {Object}
*/
$.showOptions = function(options) {
return $.extend(defaultShow, options);
return $.extend(true,{},defaultShow, options);
};
/**
* 窗口默认配置
......@@ -3192,28 +3193,28 @@ var mui = (function(document, undefined) {
this.stopped = false;
this.options = $.extend(true, {
scrollY: true,//是否竖向滚动
scrollX: false,//是否横向滚动
startX: 0,//初始化时滚动至x
startY: 0,//初始化时滚动至y
indicators: true,//是否显示滚动条
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
momentum: true,
snap: false,//图片轮播，拖拽式选项卡
snap: false, //图片轮播，拖拽式选项卡
bounce: true,//是否启用回弹
bounceTime: 300,//回弹动画时间
bounceEasing: ease.circular.style,//回弹动画曲线
bounce: true, //是否启用回弹
bounceTime: 300, //回弹动画时间
bounceEasing: ease.circular.style, //回弹动画曲线
directionLockThreshold: 5,
parallaxElement: false,//视差元素
parallaxElement: false, //视差元素
parallaxRatio: 0.5
}, options);
......@@ -3439,14 +3440,15 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition && this.moved) {
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
this.resetPosition(); //reset
// this.resetPosition(); //reset
$.trigger(this.scroller, 'scrollend', this);
// e.stopPropagation();
e.preventDefault();
......@@ -4086,7 +4088,6 @@ var mui = (function(document, undefined) {
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
e.preventDefault();
this._super(e);
},
_drag: function(e) {
......@@ -4899,13 +4900,24 @@ var mui = (function(document, undefined) {
this.options = $.extend(true, {
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1
opacity: 0.1,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
}, options);
document.body.classList.add('mui-fullscreen'); //fullscreen
this.refresh();
this.initEvent();
}
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
......@@ -4954,10 +4966,7 @@ var mui = (function(document, undefined) {
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
......@@ -4974,6 +4983,7 @@ var mui = (function(document, undefined) {
}
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
if (this.classList.contains(CLASS_ACTIVE)) {
if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
this.offCanvas = this.offCanvasRight;
......@@ -5012,7 +5022,7 @@ var mui = (function(document, undefined) {
}
}
}
if (this.offCanvas) {
if (this.offCanvas && this.scroller) {
this.startX = this.lastX;
this.isDragging = true;
......@@ -5787,6 +5797,7 @@ var mui = (function(document, undefined) {
var CLASS_CONTROL_ITEM = 'mui-control-item';
var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
var CLASS_SEGMENTED_CONTROL_VERTICAL = 'mui-segmented-control-vertical';
var CLASS_CONTROL_CONTENT = 'mui-control-content';
var CLASS_TAB_BAR = 'mui-bar-tab';
var CLASS_TAB_ITEM = 'mui-tab-item';
......@@ -5794,7 +5805,11 @@ var mui = (function(document, undefined) {
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
//vertical 如果preventDefault会导致无法滚动
} else {
event.preventDefault(); //stop hash change
}
// if (target.hash) {
return target;
// }
......@@ -5844,7 +5859,6 @@ var mui = (function(document, undefined) {
if (!targetTab.hash) {
return;
}
targetBody = document.getElementById(targetTab.hash.replace('#', ''));
if (!targetBody) {
......@@ -6476,17 +6490,21 @@ var mui = (function(document, undefined) {
var input = cell.querySelector('input[type=radio]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
} else if (classList.contains('mui-checkbox')) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
}
};
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
......@@ -6958,16 +6976,15 @@ var mui = (function(document, undefined) {
var inputClassName = 'mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__numbox_inited) return;
self.holder.__numbox_inited = true;
//避免重复初始化结束
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
......@@ -6977,6 +6994,9 @@ var mui = (function(document, undefined) {
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
......@@ -6993,6 +7013,9 @@ var mui = (function(document, undefined) {
self.checkValue();
});
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
......@@ -7015,28 +7038,38 @@ var mui = (function(document, undefined) {
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
new Numbox(element, options);
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
new Numbox(element, options);
element.numbox = new Numbox(element, options);
}
});
return this;
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
\ No newline at end of file
examples/hello-mui/js/mui.min.js
View file @ 26a9d00e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.picker.all.js 0 → 100644
View file @ 26a9d00e
/**
* 选择列表插件
* 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 @ 26a9d00e
/**
* 选择列表插件
* 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 @ 26a9d00e
/**
* 选择列表插件
* 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 @ 26a9d00e
/**
* 弹出选择列表插件
* 此组件依赖 listpcker ，请在页面中先引入 mui.listpicker.css + mui.listpicker.js
* 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
......@@ -8,6 +8,22 @@
(function($, document) {
//创建 DOM
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement('div');
}
$.__create_dom_div__.innerHTML = str;
return [].slice.call($.__create_dom_div__.childNodes);
};
var panelBuffer = '<div class="mui-poppicker">\
<div class="mui-poppicker-header">\
<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\
......@@ -18,10 +34,12 @@
</div>\
</div>';
var pickerBuffer = '<div class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
var pickerBuffer = '<div class="mui-picker">\
<div class="mui-picker-inner">\
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\
<ul class="mui-pciker-list">\
</ul>\
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\
</div>\
</div>';
......@@ -54,25 +72,32 @@
self.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._createListPicker();
self._createPicker();
//防止滚动穿透
self.panel.addEventListener('touchstart', function(event) {
event.preventDefault();
}, false);
self.panel.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
},
_createListPicker: function() {
_createPicker: function() {
var self = this;
var layer = self.options.layer || 1;
var width = (100 / layer) + '%';
self.pickers = [];
for (var i = 1; i <= layer; i++) {
var picker = $.dom(pickerBuffer)[0];
picker.style.width = width;
self.body.appendChild(picker);
$(picker).listpicker();
var pickerElement = $.dom(pickerBuffer)[0];
pickerElement.style.width = width;
self.body.appendChild(pickerElement);
var picker = $(pickerElement).picker();
self.pickers.push(picker);
picker.addEventListener('change', function(event) {
var nextPicker = this.nextSibling;
if (nextPicker && nextPicker.listpickerId) {
pickerElement.addEventListener('change', function(event) {
var nextPickerElement = this.nextSibling;
if (nextPickerElement && nextPickerElement.picker) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPicker.setItems(preItem.children);
nextPickerElement.picker.setItems(preItem.children);
}
}, false);
}
......@@ -100,6 +125,11 @@
self.mask.show();
document.body.classList.add($.className('poppicker-active-for-page'));
self.panel.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
},
//隐藏
hide: function() {
......@@ -108,6 +138,8 @@
self.panel.classList.remove($.className('active'));
self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page'));
//处理物理返回键
$.back=self.__back;
},
dispose: function() {
var self = this;
......
examples/hello-mui/js/mui.previewimage.js
View file @ 26a9d00e
......@@ -117,10 +117,10 @@
if (!this.groups[group]) {
this.groups[group] = [];
}
if (img.__mui_img_data) {
var src = img.getAttribute('src');
if (img.__mui_img_data && img.__mui_img_data.src === src) { //已缓存且图片未变化
this.groups[group].push(img.__mui_img_data);
} else {
var src = img.getAttribute('src');
var lazyload = img.getAttribute('data-preview-src');
if (!lazyload) {
lazyload = src;
......
examples/hello-mui/js/mui.pullToRefresh.js
View file @ 26a9d00e
......@@ -188,6 +188,7 @@
e.detail.gesture.preventDefault();
var deltaY = detail.deltaY - this.startDeltaY;
deltaY = Math.min(deltaY, 1.5 * this.options.down.height);
this.deltaY = deltaY;
this._pulling(deltaY);
var state = deltaY > this.options.down.height ? STATE_AFTERCHANGEOFFSET : STATE_BEFORECHANGEOFFSET;
if (this.state !== state) {
......@@ -201,6 +202,13 @@
}
this['_' + state](deltaY);
}
if ($.os.ios && parseFloat($.os.version) >= 8) {
var clientY = detail.gesture.touches[0].clientY;
if ((clientY + 10) > window.innerHeight || clientY < 10) {
this._dragend(e);
return;
}
}
}
},
_dragend: function(e) {
......@@ -313,7 +321,11 @@
this.pullUpTips && this.pullUpTips.classList.remove(CLASS_HIDDEN);
this.pullDownTips.classList.add(CLASS_TRANSITIONING);
this.pullDownTips.style.webkitTransform = 'translate3d(0,0,0)';
if (this.deltaY <= 0) {
this.removePullDownTips();
} else {
this.removing = true;
}
},
endPullUpToRefresh: function(finished) {
if (finished) {
......
examples/hello-mui/list.html
View file @ 26a9d00e
......@@ -296,23 +296,6 @@
range（滑块）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
segment（分段选择）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
按钮式选项卡
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
可拖动选项卡(仿Android)
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/switches.html">
switch（开关）
......@@ -325,22 +308,37 @@
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar.html">
div模式
底部选项卡-div模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/tab-webview-main.html">
webview模式
底部选项卡-webview模式
</a>
</li>
<li class="mui-table-view-cell">
<!-- <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
文字选项卡
底部选项卡-文字选项卡
</a>
</li>
</li> -->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">
含二级菜单的选项卡
底部选项卡-二级菜单(div)
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
顶部选项卡-div模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
顶部选项卡-可左右拖动(div)
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-segmented-control-vertical.html">
左侧选项卡-div模式
</a>
</li>
</ul>
......@@ -441,7 +439,12 @@
}
//初始化，并预加载webview模式的选项卡
function preload () {
mui.preload({url:'examples/tab-webview-main.html'});
mui.preload({
url:'examples/tab-webview-main.html',
styles: {
popGesture: 'hide'
}
});
mui.preload({
url:"examples/pullrefresh_main.html",
styles:{
......@@ -560,7 +563,7 @@
}
});
} else if (id && ~id.indexOf('.html')) {
if (!~id.indexOf('popovers.html')&&!~id.indexOf('tab-with-viewpagerindicator.html')&&mui.os.ios) {
if (!~id.indexOf('popovers.html')&&mui.os.ios) {
mui.openWindow({
id: id,
url: this.href,
......
examples/login/js/mui.min.js
View file @ 26a9d00e
This source diff could not be displayed because it is too large. You can view the blob instead.
js/mui.class.scroll.js
View file @ 26a9d00e
......@@ -28,28 +28,28 @@
this.stopped = false;
this.options = $.extend(true, {
scrollY: true,//是否竖向滚动
scrollX: false,//是否横向滚动
startX: 0,//初始化时滚动至x
startY: 0,//初始化时滚动至y
indicators: true,//是否显示滚动条
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
momentum: true,
snap: false,//图片轮播，拖拽式选项卡
snap: false, //图片轮播，拖拽式选项卡
bounce: true,//是否启用回弹
bounceTime: 300,//回弹动画时间
bounceEasing: ease.circular.style,//回弹动画曲线
bounce: true, //是否启用回弹
bounceTime: 300, //回弹动画时间
bounceEasing: ease.circular.style, //回弹动画曲线
directionLockThreshold: 5,
parallaxElement: false,//视差元素
parallaxElement: false, //视差元素
parallaxRatio: 0.5
}, options);
......@@ -275,14 +275,15 @@
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition && this.moved) {
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
this.resetPosition(); //reset
// this.resetPosition(); //reset
$.trigger(this.scroller, 'scrollend', this);
// e.stopPropagation();
e.preventDefault();
......
js/mui.class.scroll.pullrefresh.js
View file @ 26a9d00e
......@@ -23,7 +23,6 @@
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
e.preventDefault();
this._super(e);
},
_drag: function(e) {
......
js/mui.gestures.pinch.js
View file @ 26a9d00e
......@@ -41,6 +41,7 @@
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
......
js/mui.gestures.tap.js
View file @ 26a9d00e
......@@ -16,7 +16,7 @@
return;
}
var target = session.target;
if (!target || (target.disabled || target.classList.contains($.className('disabled')))) {
if (!target || (target.disabled || (target.classList && target.classList.contains($.className('disabled'))))) {
return;
}
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
......
js/mui.init.5+.js
View file @ 26a9d00e
......@@ -47,7 +47,7 @@
* @returns {Object}
*/
$.showOptions = function(options) {
return $.extend(defaultShow, options);
return $.extend(true,{},defaultShow, options);
};
/**
* 窗口默认配置
......
js/mui.number.js
View file @ 26a9d00e
......@@ -16,16 +16,15 @@
var inputClassName = $.className('numbox-input');
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__numbox_inited) return;
self.holder.__numbox_inited = true;
//避免重复初始化结束
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
......@@ -35,6 +34,9 @@
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
......@@ -51,6 +53,9 @@
self.checkValue();
});
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
......@@ -73,28 +78,38 @@
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
new Numbox(element, options);
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
new Numbox(element, options);
element.numbox = new Numbox(element, options);
}
});
return this;
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
\ No newline at end of file
js/mui.offcanvas.js
View file @ 26a9d00e
......@@ -30,13 +30,24 @@
this.options = $.extend(true, {
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1
opacity: 0.1,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
}, options);
document.body.classList.add($.className('fullscreen')); //fullscreen
this.refresh();
this.initEvent();
}
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
......@@ -85,10 +96,7 @@
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
......@@ -105,6 +113,7 @@
}
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
if (this.classList.contains(CLASS_ACTIVE)) {
if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
this.offCanvas = this.offCanvasRight;
......@@ -143,7 +152,7 @@
}
}
}
if (this.offCanvas) {
if (this.offCanvas && this.scroller) {
this.startX = this.lastX;
this.isDragging = true;
......
js/segmented-controllers.js
View file @ 26a9d00e
......@@ -10,6 +10,7 @@
var CLASS_CONTROL_ITEM = $.className('control-item');
var CLASS_SEGMENTED_CONTROL = $.className('segmented-control');
var CLASS_SEGMENTED_CONTROL_VERTICAL = $.className('segmented-control-vertical');
var CLASS_CONTROL_CONTENT = $.className('control-content');
var CLASS_TAB_BAR = $.className('bar-tab');
var CLASS_TAB_ITEM = $.className('tab-item');
......@@ -17,7 +18,11 @@
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
//vertical 如果preventDefault会导致无法滚动
} else {
event.preventDefault(); //stop hash change
}
// if (target.hash) {
return target;
// }
......@@ -67,7 +72,6 @@
if (!targetTab.hash) {
return;
}
targetBody = document.getElementById(targetTab.hash.replace('#', ''));
if (!targetBody) {
......
js/tableviews.js
View file @ 26a9d00e
......@@ -435,17 +435,21 @@
var input = cell.querySelector('input[type=radio]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
} else if (classList.contains($.className('checkbox'))) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
}
};
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
......
package.json
View file @ 26a9d00e
{
"name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.",
"version": "2.2.0",
"version": "2.3.0",
"keywords": [
"css",
"fonts",
......
sass/cards.scss
View file @ 26a9d00e
......@@ -34,14 +34,15 @@
border-bottom: 0;
border-radius: $border-radius;
// Rounding first divider on carded lists and remove border on the top
.#{$namespace}table-view-divider:first-child {
//fix Android 4.1.x/4.2.x 圆角列表四角不圆的bug
.#{$namespace}table-view-divider:first-child,.#{$namespace}table-view-cell:first-child {
top: 0;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
// Rounding last divider on carded table views
.#{$namespace}table-view-divider:last-child {
.#{$namespace}table-view-divider:last-child,.#{$namespace}table-view-cell:last-child {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
......
sass/grid.scss
View file @ 26a9d00e
.#{$namespace}row {
@include clearfix();
}
.#{$namespace}col-xs-1, .#{$namespace}col-sm-1, .#{$namespace}col-xs-2, .#{$namespace}col-sm-2, .#{$namespace}col-xs-3, .#{$namespace}col-sm-3, .#{$namespace}col-xs-4, .#{$namespace}col-sm-4, .#{$namespace}col-xs-5, .#{$namespace}col-sm-5, .#{$namespace}col-xs-6, .#{$namespace}col-sm-6, .#{$namespace}col-xs-7, .#{$namespace}col-sm-7, .#{$namespace}col-xs-8, .#{$namespace}col-sm-8, .#{$namespace}col-xs-9, .#{$namespace}col-sm-9, .#{$namespace}col-xs-10, .#{$namespace}col-sm-10, .#{$namespace}col-xs-11, .#{$namespace}col-sm-11, .#{$namespace}col-xs-12, .#{$namespace}col-sm-12 {
position: relative;
min-height: 1px;
}
.#{$namespace}row>[class*="#{$namespace}col-"]{
float: left;
}
.#{$namespace}col-xs-12 {
width: 100%;
}
......
sass/segmented-controls.scss
View file @ 26a9d00e
......@@ -14,7 +14,16 @@
border: 1px solid $primary-color;
border-radius: 3px;
-webkit-touch-callout: none;//(iOS平台)分段选择禁止长按弹出菜单；
&.#{$namespace}segmented-control-vertical{
border-radius:0;
border-width: 0;
border-collapse: collapse;
.#{$namespace}control-item{
display: block;
border-left-width: 0;
border-bottom: 1px solid #c8c7cc;
}
}
&.#{$namespace}scroll-wrapper{
height: 38px;
.#{$namespace}scroll{
......@@ -61,6 +70,14 @@
width:100%;
border:0;
border-radius:0;
&.#{$namespace}segmented-control-vertical{
.#{$namespace}control-item{
border-bottom: 1px solid #c8c7cc;
&.#{$namespace}active {
border-bottom: 1px solid #c8c7cc;
}
}
}
.#{$namespace}control-item {
border:0;
color: inherit;
......
sass/table-views.scss
View file @ 26a9d00e
......@@ -461,15 +461,21 @@
}
//grid-9
.#{$namespace}grid-view.#{$namespace}grid-9{
padding-right: 0;
background-color: #f2f2f2;
padding: 1px 0 1px 0;
padding: 0;
margin:0;
border-left:1px solid #EEE;
border-top:1px solid #EEE;
@include clearfix();
&:after{
position:static;
}
.#{$namespace}table-view-cell {
vertical-align: top;
padding:11px 15px;
border-left: 1px solid #EEE;
border-top: 1px solid #EEE;
margin: -1px 0 0 -1px;
margin:0;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
&.#{$namespace}active{
background-color:#eee;
}
......
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