Skip to content

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

增加indexed list示例

parent 9ebb8ab4
Hide whitespace changes
Inline Side-by-side
Showing with 889 additions and 12 deletions
examples/hello-mui/css/mui.indexedlist.css 0 → 100644
View file @ b5534d5a
.mui-group-list {
position: relative;
border-top: solid 1px #e3e3e3;
border-bottom: solid 1px #e3e3e3;
overflow: hidden;
background-color: #fafafa;
height: 300px;
cursor: default;
}
.mui-group-list-inner {
margin: 0px;
padding: 0px;
overflow-y: auto;
border: none;
}
.mui-group-list-inner::-webkit-scrollbar {
width: 0px;
height: 0px;
visibility: hidden;
}
.mui-group-list-empty-alert,
.mui-group-list-inner.empty ul {
display: none;
}
.mui-group-list-inner.empty .mui-group-list-empty-alert {
display: block;
}
.mui-group-list-empty-alert {
padding: 30px 15px;
text-align: center;
color: #ccc;
padding-right: 45px;
}
.mui-ios .mui-group-list-inner {
width: calc(100% + 10px);
}
.mui-group-list-group,
.mui-group-list-item {
padding-right: 45px;
}
.mui-ios .mui-group-list-group,
.mui-ios .mui-group-list-item,
.mui-ios .mui-group-list-empty-alert {
padding-right: 55px;
}
.mui-group-list-group {
background-color: #f7f7f7;
}
.mui-group-list-group {
padding-top: 3px;
padding-bottom: 3px;
}
.mui-group-list-search {
border-bottom: solid 1px #e3e3e3;
z-index: 15;
}
.mui-group-list-search.mui-search:before {
margin-top: -10px;
}
.mui-group-list-search input {
border-radius: 0px;
margin: 0px;
background-color: #fafafa;
}
.mui-group-list-bar {
width: 30px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
height: 100%;
z-index: 10;
right: 0px;
-webkit-transition: .2s;
}
.mui-group-list-bar a {
display: block;
text-align: center;
font-size: 11px;
padding: 0px;
margin: 0px;
line-height: 15px;
color: #aaa;
}
.mui-group-list-bar.active {
background-color: rgba(0, 0, 0, 0.2);
}
.mui-group-list-bar.active a {
color: #333;
}
.mui-group-list-bar.active a.active {
color: #007aff;
}
.mui-group-list-alert {
position: absolute;
z-index: 20;
background-color: rgba(0, 0, 0, 0.5);
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
border-radius: 40px;
text-align: center;
line-height: 80px;
font-size: 35px;
color: #fff;
display: none;
-webkit-transition: .2s;
}
.mui-group-list-alert.active {
display: block;
}
\ No newline at end of file
examples/hello-mui/css/mui.indexedlist.js 0 → 100644
View file @ b5534d5a
/**
* 分组列表
* 类似联系人应用中的联系人列表，可以按首字母分组
* 右侧的字母定位工具条，可以快速定位列表位置
* varstion 1.0.0
* by Houfeng
* Houfeng@DCloud.io
**/
(function($, window, document) {
var classSelector = function(name) {
return '.' + $.className(name);
}
var GroupList = $.GroupList = $.Class.extend({
/**
* 通过 element 和 options 构造 GroupList 实例
**/
init: function(holder, options) {
var self = this;
self.options = options || {};
self.box = holder;
if (!self.box) {
throw "实例 GroupList 时需要指定 element";
}
self.createDom();
self.findElements();
self.caleLayout();
self.bindEvent();
},
createDom: function() {
var self = this;
self.el = self.el || {};
//styleForSearch 用于搜索，此方式能在数据较多时获取很好的性能
self.el.styleForSearch = document.createElement('style');
(document.head || document.body).appendChild(self.el.styleForSearch);
},
findElements: function() {
var self = this;
self.el = self.el || {};
self.el.search = self.box.querySelector(classSelector('group-list-search'));
self.el.searchInput = self.box.querySelector(classSelector('group-list-search-input'));
self.el.searchClear = self.box.querySelector(classSelector('group-list-search') + ' ' + classSelector('icon-clear'));
self.el.bar = self.box.querySelector(classSelector('group-list-bar'));
self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('group-list-bar') + ' a'));
self.el.inner = self.box.querySelector(classSelector('group-list-inner'));
self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('group-list-item')));
self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('group-list-inner') + ' li'));
self.el.alert = self.box.querySelector(classSelector('group-list-alert'));
},
caleLayout: function() {
var self = this;
var withoutSearchHeight = (self.box.offsetHeight - self.el.search.offsetHeight) + 'px';
self.el.bar.style.height = withoutSearchHeight;
self.el.inner.style.height = withoutSearchHeight;
var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + 'px';
self.el.barItems.forEach(function(item) {
item.style.height = barItemHeight;
item.style.lineHeight = barItemHeight;
});
},
scrollTo: function(group) {
var self = this;
var groupElement = self.el.inner.querySelector('[data-group="' + group + '"]');
if (!groupElement || (self.hiddenGroups && self.hiddenGroups.indexOf(groupElement) > -1)) {
return;
}
self.el.inner.scrollTop = groupElement.offsetTop;
},
bindBarEvent: function() {
var self = this;
var pointElement = null;
var findStart = function(event) {
if (pointElement) {
pointElement.classList.remove('active');
pointElement = null;
}
self.el.bar.classList.add('active');
var point = event.changedTouches ? event.changedTouches[0] : event;
pointElement = document.elementFromPoint(point.pageX, point.pageY);
if (pointElement) {
var group = pointElement.innerText;
if (group && group.length == 1) {
pointElement.classList.add('active');
self.el.alert.innerText = group;
self.el.alert.classList.add('active');
self.scrollTo(group);
}
}
event.preventDefault();
};
var findEnd = function(event) {
self.el.alert.classList.remove('active');
self.el.bar.classList.remove('active');
if (pointElement) {
pointElement.classList.remove('active');
pointElement = null;
}
};
self.el.bar.addEventListener('touchmove', function(event) {
findStart(event);
}, false);
self.el.bar.addEventListener('touchstart', function(event) {
findStart(event);
}, false);
document.body.addEventListener('touchend', function(event) {
findEnd(event);
}, false);
document.body.addEventListener('touchcancel', function(event) {
findEnd(event);
}, false);
},
search: function(keyword) {
var self = this;
keyword = (keyword || '').toLowerCase();
var selectorBuffer = [];
var groupIndex = -1;
var itemCount = 0;
var liArray = self.el.liArray;
var itemTotal = liArray.length;
self.hiddenGroups = [];
var checkGroup = function(currentIndex, last) {
if (itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) {
selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
self.hiddenGroups.push(liArray[groupIndex]);
};
groupIndex = currentIndex;
itemCount = 0;
}
liArray.forEach(function(item) {
var currentIndex = liArray.indexOf(item);
if (item.classList.contains($.className('group-list-group'))) {
checkGroup(currentIndex, false);
} else {
var text = (item.innerText || '').toLowerCase();
var value = (item.getAttribute('data-value') || '').toLowerCase();
var tags = (item.getAttribute('data-tags') || '').toLowerCase();
if (keyword && text.indexOf(keyword) < 0 &&
value.indexOf(keyword) < 0 &&
tags.indexOf(keyword) < 0) {
selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
itemCount++;
}
if (currentIndex >= itemTotal - 1) {
checkGroup(currentIndex, true);
}
}
});
if (selectorBuffer.length >= itemTotal) {
self.el.inner.classList.add('empty');
} else if (selectorBuffer.length > 0) {
self.el.inner.classList.remove('empty');
self.el.styleForSearch.innerText = selectorBuffer.join(', ') + "{display:none;}";
} else {
self.el.inner.classList.remove('empty');
self.el.styleForSearch.innerText = "";
}
},
bindSearchEvent: function() {
var self = this;
self.el.searchInput.addEventListener('input', function() {
var keyword = this.value;
self.search(keyword);
}, false);
$(self.el.search).on('tap', classSelector('icon-clear'), function() {
self.search('');
}, false);
},
bindEvent: function() {
var self = this;
self.bindBarEvent();
self.bindSearchEvent();
}
});
})(mui, window, document);
\ No newline at end of file
examples/hello-mui/examples/indexed-list-select.html 0 → 100644
View file @ b5534d5a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/mui.indexedlist.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-bar-nav .mui-btn {
padding: 4px 8px;
}
</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">选择机场</h1>
<button id='done' class="mui-btn mui-pull-right mui-btn-blue">完成</button>
</header>
<div class="mui-content">
<div id='list' class="mui-group-list">
<div class="mui-group-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-group-list-search-input" placeholder="搜索机场">
</div>
<div class="mui-group-list-bar">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
<div class="mui-group-list-alert"></div>
<div class="mui-group-list-inner">
<div class="mui-group-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-group-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>阿克苏机场</li>
<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>阿拉山口机场</li>
<li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>阿勒泰机场</li>
<li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>阿里昆莎机场</li>
<li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>安庆天柱山机场</li>
<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>澳门国际机场</li>
<li data-group="B" class="mui-table-view-divider mui-group-list-group">B</li>
<li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>保山机场</li>
<li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>包头机场</li>
<li data-value="BHY" data-tags="BeiHaiFuCheng" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>北海福成机场</li>
<li data-value="NAY" data-tags="BeiJingNanYuan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>北京南苑机场</li>
<li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>北京首都国际机场</li>
<li data-group="C" class="mui-table-view-divider mui-group-list-group">C</li>
<li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>长白山机场</li>
<li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>长春龙嘉国际机场</li>
<li data-value="CGD" data-tags="ChangDeTaoHuaYuan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>常德桃花源机场</li>
<li data-value="BPX" data-tags="ChangDuBangDa" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>昌都邦达机场</li>
<li data-value="CSX" data-tags="ChangShaHuangHuaGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>长沙黄花国际机场</li>
<li data-value="CIH" data-tags="ChangZhiWangCun" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>长治王村机场</li>
<li data-value="CZX" data-tags="ChangZhouBenNiu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>常州奔牛机场</li>
<li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>成都双流国际机场</li>
<li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>赤峰机场</li>
<li data-group="D" class="mui-table-view-divider mui-group-list-group">D</li>
<li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>大理机场</li>
<li data-value="DLC" data-tags="DaLianZhouShuiZiGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>大连周水子国际机场</li>
<li data-value="DQA" data-tags="DaQingSaErTu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>大庆萨尔图机场</li>
<li data-value="DAT" data-tags="DaTongDongWangZhuang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>大同东王庄机场</li>
<li data-value="DAX" data-tags="DaZhouHeShi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>达州河市机场</li>
<li data-value="DDG" data-tags="DanDongLangTou" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>丹东浪头机场</li>
<li data-value="LUM" data-tags="DeHongMangShi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>德宏芒市机场</li>
<li data-value="DIG" data-tags="DiQingXiangGeLiLa" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>迪庆香格里拉机场</li>
<li data-value="DOY" data-tags="DongYing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>东营机场</li>
<li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>敦煌机场</li>
<li data-group="E" class="mui-table-view-divider mui-group-list-group">E</li>
<li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>鄂尔多斯机场</li>
<li data-value="ENH" data-tags="EnShiXuJiaPing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>恩施许家坪机场</li>
<li data-value="ERL" data-tags="ErLianHaoTeSaiWuSuGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>二连浩特赛乌苏国际机场</li>
<li data-group="F" class="mui-table-view-divider mui-group-list-group">F</li>
<li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>阜阳西关机场</li>
<li data-value="FOC" data-tags="FuZhouChangLeGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>福州长乐国际机场</li>
<li data-group="G" class="mui-table-view-divider mui-group-list-group">G</li>
<li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>赣州黄金机场</li>
<li data-value="GOQ" data-tags="GeErMu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>格尔木机场</li>
<li data-value="GYU" data-tags="GuYuanLiuPanShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>固原六盘山机场</li>
<li data-value="GYS" data-tags="GuangYuanPanLong" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>广元盘龙机场</li>
<li data-value="CAN" data-tags="GuangZhouBaiYunGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>广州白云国际机场</li>
<li data-value="KWL" data-tags="GuiLinLiangJiangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>桂林两江国际机场</li>
<li data-value="KWE" data-tags="GuiYangLongDongBaoGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>贵阳龙洞堡国际机场</li>
<li data-group="H" class="mui-table-view-divider mui-group-list-group">H</li>
<li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>哈尔滨太平国际机场</li>
<li data-value="HMI" data-tags="HaMi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>哈密机场</li>
<li data-value="HAK" data-tags="HaiKouMeiLanGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>海口美兰国际机场</li>
<li data-value="HLD" data-tags="HaiLaErDongShanGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>海拉尔东山国际机场</li>
<li data-value="HDG" data-tags="HanDan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>邯郸机场</li>
<li data-value="HZG" data-tags="HanZhong" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>汉中机场</li>
<li data-value="HGH" data-tags="HangZhouXiaoShanGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>杭州萧山国际机场</li>
<li data-value="HFE" data-tags="HeFeiLuoGangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>合肥骆岗国际机场</li>
<li data-value="HTN" data-tags="HeTian" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>和田机场</li>
<li data-value="HEK" data-tags="HeiHe" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>黑河机场</li>
<li data-value="HET" data-tags="HuHeHaoTeBaiTaGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>呼和浩特白塔国际机场</li>
<li data-value="HIA" data-tags="HuaiAnLianShui" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>淮安涟水机场</li>
<li data-value="TXN" data-tags="HuangShanTunXiGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>黄山屯溪国际机场</li>
<li data-group="J" class="mui-table-view-divider mui-group-list-group">J</li>
<li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>济南遥墙国际机场</li>
<li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>济宁曲阜机场</li>
<li data-value="JXA" data-tags="JiXiXingKaiHu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>鸡西兴凯湖机场</li>
<li data-value="JMU" data-tags="JiaMuSiDongJiao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>佳木斯东郊机场</li>
<li data-value="JGN" data-tags="JiaYuGuan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>嘉峪关机场</li>
<li data-value="JNZ" data-tags="JinZhouXiaoLingZi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>锦州小岭子机场</li>
<li data-value="JDZ" data-tags="JingDeZhen" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>景德镇机场</li>
<li data-value="JGS" data-tags="JingGangShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>井冈山机场</li>
<li data-value="JIU" data-tags="JiuJiangLuShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>九江庐山机场</li>
<li data-value="JZH" data-tags="JiuZhaiHuangLong" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>九寨黄龙机场</li>
<li data-group="K" class="mui-table-view-divider mui-group-list-group">K</li>
<li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>喀什机场</li>
<li data-value="KRY" data-tags="KeLaMaYi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>克拉玛依机场</li>
<li data-value="KCA" data-tags="KuCheGuiZi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>库车龟兹机场</li>
<li data-value="KRL" data-tags="KuErLe" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>库尔勒机场</li>
<li data-value="KMG" data-tags="KunMingWuJiaBaGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>昆明巫家坝国际机场</li>
<li data-group="L" class="mui-table-view-divider mui-group-list-group">L</li>
<li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>拉萨贡嘎机场</li>
<li data-value="LHW" data-tags="LanZhouZhongChuan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>兰州中川机场</li>
<li data-value="LJG" data-tags="LiJiangSanYi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>丽江三义机场</li>
<li data-value="HZH" data-tags="LiPing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>黎平机场</li>
<li data-value="LYG" data-tags="LianYunGangBaiTaBu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>连云港白塔埠机场</li>
<li data-value="LNJ" data-tags="LinCang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>临沧机场</li>
<li data-value="LYI" data-tags="LinYi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>临沂机场</li>
<li data-value="LZY" data-tags="LinZhiMiLin" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>林芝米林机场</li>
<li data-value="LZH" data-tags="LiuZhouBaiLian" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>柳州白莲机场</li>
<li data-value="LCX" data-tags="LongYanGuanZhiShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>龙岩冠豸山机场</li>
<li data-value="LZO" data-tags="LuZhouLanTian" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>泸州蓝田机场</li>
<li data-value="LYA" data-tags="LuoYangBeiJiao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>洛阳北郊机场</li>
<li data-group="M" class="mui-table-view-divider mui-group-list-group">M</li>
<li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>满洲里西郊机场</li>
<li data-value="MIG" data-tags="MianYangNanJiao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>绵阳南郊机场</li>
<li data-value="OHE" data-tags="MoHeGuLian" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>漠河古莲机场</li>
<li data-value="MDG" data-tags="MuDanJiangHaiLang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>牡丹江海浪机场</li>
<li data-group="N" class="mui-table-view-divider mui-group-list-group">N</li>
<li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>南昌昌北国际机场</li>
<li data-value="NAO" data-tags="NanChongGaoPing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>南充高坪机场</li>
<li data-value="NKG" data-tags="NanJingLuKouGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>南京禄口国际机场</li>
<li data-value="NNG" data-tags="NanNingWuXu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>南宁吴圩机场</li>
<li data-value="NTG" data-tags="NanTongXingDong" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>南通兴东机场</li>
<li data-value="NNY" data-tags="NanYangJiangYing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>南阳姜营机场</li>
<li data-value="NGB" data-tags="NingBoLiSheGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>宁波栎社国际机场</li>
<li data-group="P" class="mui-table-view-divider mui-group-list-group">P</li>
<li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>普洱思茅机场</li>
<li data-group="Q" class="mui-table-view-divider mui-group-list-group">Q</li>
<li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>齐齐哈尔三家子机场</li>
<li data-value="SHP" data-tags="QinHuangDaoShanHaiGuan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>秦皇岛山海关机场</li>
<li data-value="TAO" data-tags="QingDaoLiuTingGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>青岛流亭国际机场</li>
<li data-value="JUZ" data-tags="QuZhou" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>衢州机场</li>
<li data-value="JJN" data-tags="QuanZhouJinJiang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>泉州晋江机场</li>
<li data-group="R" class="mui-table-view-divider mui-group-list-group">R</li>
<li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>日喀则和平机场</li>
<li data-group="S" class="mui-table-view-divider mui-group-list-group">S</li>
<li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>三亚凤凰国际机场</li>
<li data-value="SWA" data-tags="ShanTouWaiSha" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>汕头外砂机场</li>
<li data-value="SHA" data-tags="ShangHaiHongQiaoGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>上海虹桥国际机场</li>
<li data-value="PVG" data-tags="ShangHaiPuDongGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>上海浦东国际机场</li>
<li data-value="SZX" data-tags="ShenChouBaoAnGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>深圳宝安国际机场</li>
<li data-value="SHE" data-tags="ShenYangTaoXianGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>沈阳桃仙国际机场</li>
<li data-value="SJW" data-tags="ShiJiaZhuangZhengDingGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>石家庄正定国际机场</li>
<li data-value="WUX" data-tags="SuNanShuoFangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>苏南硕放国际机场</li>
<li data-group="T" class="mui-table-view-divider mui-group-list-group">T</li>
<li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>塔城机场</li>
<li data-value="TYN" data-tags="TaiYuanWuSuGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>太原武宿国际机场</li>
<li data-value="HYN" data-tags="TaiZhouLuQiao-HuangYanJiChang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>台州路桥机场 (黄岩机场)</li>
<li data-value="TVS" data-tags="TangShanSanNvHe" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>唐山三女河机场</li>
<li data-value="TCZ" data-tags="TengChongTuoFeng" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>腾冲驼峰机场</li>
<li data-value="TSN" data-tags="TianJinBinHaiGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>天津滨海国际机场</li>
<li data-value="TGO" data-tags="TongLiao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>通辽机场</li>
<li data-value="TEN" data-tags="TongRenFengHuang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>铜仁凤凰机场</li>
<li data-group="W" class="mui-table-view-divider mui-group-list-group">W</li>
<li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>万州五桥机场</li>
<li data-value="WEF" data-tags="WeiFang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>潍坊机场</li>
<li data-value="WEH" data-tags="WeiHaiDaShuiBo" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>威海大水泊机场</li>
<li data-value="WNH" data-tags="WenShanPuZheHei" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>文山普者黑机场</li>
<li data-value="WNZ" data-tags="WenZhouYongQiangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>温州永强国际机场</li>
<li data-value="WUA" data-tags="WuHai" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>乌海机场</li>
<li data-value="WUH" data-tags="WuHanTianHeGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>武汉天河国际机场</li>
<li data-value="HLH" data-tags="WuLanHaoTe" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>乌兰浩特机场</li>
<li data-value="URC" data-tags="WuLuMuQiDiWoBaoGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>乌鲁木齐地窝堡国际机场</li>
<li data-value="WUS" data-tags="WuYiShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>武夷山机场</li>
<li data-value="WUZ" data-tags="WuZhouChangZhouDao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>梧州长洲岛机场</li>
<li data-group="X" class="mui-table-view-divider mui-group-list-group">X</li>
<li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>西安咸阳国际机场</li>
<li data-value="XIC" data-tags="XiChangQingShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>西昌青山机场</li>
<li data-value="XIL" data-tags="XiLinHaoTe" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>锡林浩特机场</li>
<li data-value="XNN" data-tags="XiNingCaoJiaBao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>西宁曹家堡机场</li>
<li data-value="JHG" data-tags="XiShuangBanNaGaSa" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>西双版纳嘎洒机场</li>
<li data-value="XMN" data-tags="XiaMenGaoQiGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>厦门高崎国际机场</li>
<li data-value="HKG" data-tags="XiangGangGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>香港国际机场</li>
<li data-value="XFN" data-tags="XiangYangLiuJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>襄阳刘集机场</li>
<li data-value="ACX" data-tags="XingYi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>兴义机场</li>
<li data-value="XUZ" data-tags="XuZhouGuanYin" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>徐州观音机场</li>
<li data-group="Y" class="mui-table-view-divider mui-group-list-group">Y</li>
<li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>延安二十里堡机场</li>
<li data-value="YNZ" data-tags="YanCheng" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>盐城机场</li>
<li data-value="YNJ" data-tags="YanJiChaoYangChuan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>延吉朝阳川机场</li>
<li data-value="YNT" data-tags="YanTaiLaiShanGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>烟台莱山国际机场</li>
<li data-value="YBP" data-tags="YiBinCaiBa" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>宜宾菜坝机场</li>
<li data-value="YIH" data-tags="YiChangSanXia" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>宜昌三峡机场</li>
<li data-value="LDS" data-tags="YiChunLinDu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>伊春林都机场</li>
<li data-value="YIN" data-tags="YiNing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>伊宁机场</li>
<li data-value="YIW" data-tags="YiWu" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>义乌机场</li>
<li data-value="INC" data-tags="YinChuanHeDong" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>银川河东机场</li>
<li data-value="LLF" data-tags="YongZhouLingLing" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>永州零陵机场</li>
<li data-value="UYN" data-tags="YuLinYuYang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>榆林榆阳机场</li>
<li data-value="YUS" data-tags="YuShuBaTang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>玉树巴塘机场</li>
<li data-value="YCU" data-tags="YunChengZhangXiao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>运城张孝机场</li>
<li data-group="Z" class="mui-table-view-divider mui-group-list-group">Z</li>
<li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>湛江机场</li>
<li data-value="ZAT" data-tags="ZhaoTong" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>昭通机场</li>
<li data-value="CGO" data-tags="ZhengZhouXinZhengGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>郑州新郑国际机场</li>
<li data-value="HJJ" data-tags="ZhiJiang" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>芷江机场</li>
<li data-value="CKG" data-tags="ZhongQingJiangBeiGuoJi" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>重庆江北国际机场</li>
<li data-value="ZHY" data-tags="ZhongWeiXiangShan" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>中卫香山机场</li>
<li data-value="HSN" data-tags="ZhouShanZhuJiaJian" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>舟山朱家尖机场</li>
<li data-value="ZUH" data-tags="ZhuHaiSanZao" class="mui-table-view-cell mui-group-list-item mui-checkbox mui-left"><input type="checkbox"/>珠海三灶机场</li>
</ul>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.indexedlist.js"></script>
<!--<script src="../js/mui.grouplist.testdata.js"></script>-->
<script type="text/javascript" charset="utf-8">
mui.init();
mui.ready(function() {
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('list');
var done = document.getElementById('done');
//calc hieght
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//create
window.groupList = new mui.GroupList(list);
//done event
done.addEventListener('tap',function(){
var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
var checkedValues = [];
checkboxArray.forEach(function(box){
if(box.checked){
// checkedValues.push(box.parentNode.getAttribute('data-value'));
checkedValues.push(box.parentNode.innerText);
}
});
mui.alert('你选择了: '+checkedValues);
},false);
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/indexed-list.html 0 → 100644
View file @ b5534d5a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/mui.indexedlist.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
</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">indexed list（索引列表）</h1>
</header>
<div class="mui-content">
<div id='list' class="mui-group-list">
<div class="mui-group-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-group-list-search-input" placeholder="搜索机场">
</div>
<div class="mui-group-list-bar">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
<div class="mui-group-list-alert"></div>
<div class="mui-group-list-inner">
<div class="mui-group-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-group-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-group-list-item">阿克苏机场</li>
<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-group-list-item">阿拉山口机场</li>
<li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-group-list-item">阿勒泰机场</li>
<li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-group-list-item">阿里昆莎机场</li>
<li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-group-list-item">安庆天柱山机场</li>
<li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-group-list-item">澳门国际机场</li>
<li data-group="B" class="mui-table-view-divider mui-group-list-group">B</li>
<li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-group-list-item">保山机场</li>
<li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-group-list-item">包头机场</li>
<li data-value="BHY" data-tags="BeiHaiFuCheng" class="mui-table-view-cell mui-group-list-item">北海福成机场</li>
<li data-value="NAY" data-tags="BeiJingNanYuan" class="mui-table-view-cell mui-group-list-item">北京南苑机场</li>
<li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-group-list-item">北京首都国际机场</li>
<li data-group="C" class="mui-table-view-divider mui-group-list-group">C</li>
<li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-group-list-item">长白山机场</li>
<li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-group-list-item">长春龙嘉国际机场</li>
<li data-value="CGD" data-tags="ChangDeTaoHuaYuan" class="mui-table-view-cell mui-group-list-item">常德桃花源机场</li>
<li data-value="BPX" data-tags="ChangDuBangDa" class="mui-table-view-cell mui-group-list-item">昌都邦达机场</li>
<li data-value="CSX" data-tags="ChangShaHuangHuaGuoJi" class="mui-table-view-cell mui-group-list-item">长沙黄花国际机场</li>
<li data-value="CIH" data-tags="ChangZhiWangCun" class="mui-table-view-cell mui-group-list-item">长治王村机场</li>
<li data-value="CZX" data-tags="ChangZhouBenNiu" class="mui-table-view-cell mui-group-list-item">常州奔牛机场</li>
<li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-table-view-cell mui-group-list-item">成都双流国际机场</li>
<li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-group-list-item">赤峰机场</li>
<li data-group="D" class="mui-table-view-divider mui-group-list-group">D</li>
<li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-group-list-item">大理机场</li>
<li data-value="DLC" data-tags="DaLianZhouShuiZiGuoJi" class="mui-table-view-cell mui-group-list-item">大连周水子国际机场</li>
<li data-value="DQA" data-tags="DaQingSaErTu" class="mui-table-view-cell mui-group-list-item">大庆萨尔图机场</li>
<li data-value="DAT" data-tags="DaTongDongWangZhuang" class="mui-table-view-cell mui-group-list-item">大同东王庄机场</li>
<li data-value="DAX" data-tags="DaZhouHeShi" class="mui-table-view-cell mui-group-list-item">达州河市机场</li>
<li data-value="DDG" data-tags="DanDongLangTou" class="mui-table-view-cell mui-group-list-item">丹东浪头机场</li>
<li data-value="LUM" data-tags="DeHongMangShi" class="mui-table-view-cell mui-group-list-item">德宏芒市机场</li>
<li data-value="DIG" data-tags="DiQingXiangGeLiLa" class="mui-table-view-cell mui-group-list-item">迪庆香格里拉机场</li>
<li data-value="DOY" data-tags="DongYing" class="mui-table-view-cell mui-group-list-item">东营机场</li>
<li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-group-list-item">敦煌机场</li>
<li data-group="E" class="mui-table-view-divider mui-group-list-group">E</li>
<li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-group-list-item">鄂尔多斯机场</li>
<li data-value="ENH" data-tags="EnShiXuJiaPing" class="mui-table-view-cell mui-group-list-item">恩施许家坪机场</li>
<li data-value="ERL" data-tags="ErLianHaoTeSaiWuSuGuoJi" class="mui-table-view-cell mui-group-list-item">二连浩特赛乌苏国际机场</li>
<li data-group="F" class="mui-table-view-divider mui-group-list-group">F</li>
<li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-group-list-item">阜阳西关机场</li>
<li data-value="FOC" data-tags="FuZhouChangLeGuoJi" class="mui-table-view-cell mui-group-list-item">福州长乐国际机场</li>
<li data-group="G" class="mui-table-view-divider mui-group-list-group">G</li>
<li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-group-list-item">赣州黄金机场</li>
<li data-value="GOQ" data-tags="GeErMu" class="mui-table-view-cell mui-group-list-item">格尔木机场</li>
<li data-value="GYU" data-tags="GuYuanLiuPanShan" class="mui-table-view-cell mui-group-list-item">固原六盘山机场</li>
<li data-value="GYS" data-tags="GuangYuanPanLong" class="mui-table-view-cell mui-group-list-item">广元盘龙机场</li>
<li data-value="CAN" data-tags="GuangZhouBaiYunGuoJi" class="mui-table-view-cell mui-group-list-item">广州白云国际机场</li>
<li data-value="KWL" data-tags="GuiLinLiangJiangGuoJi" class="mui-table-view-cell mui-group-list-item">桂林两江国际机场</li>
<li data-value="KWE" data-tags="GuiYangLongDongBaoGuoJi" class="mui-table-view-cell mui-group-list-item">贵阳龙洞堡国际机场</li>
<li data-group="H" class="mui-table-view-divider mui-group-list-group">H</li>
<li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-group-list-item">哈尔滨太平国际机场</li>
<li data-value="HMI" data-tags="HaMi" class="mui-table-view-cell mui-group-list-item">哈密机场</li>
<li data-value="HAK" data-tags="HaiKouMeiLanGuoJi" class="mui-table-view-cell mui-group-list-item">海口美兰国际机场</li>
<li data-value="HLD" data-tags="HaiLaErDongShanGuoJi" class="mui-table-view-cell mui-group-list-item">海拉尔东山国际机场</li>
<li data-value="HDG" data-tags="HanDan" class="mui-table-view-cell mui-group-list-item">邯郸机场</li>
<li data-value="HZG" data-tags="HanZhong" class="mui-table-view-cell mui-group-list-item">汉中机场</li>
<li data-value="HGH" data-tags="HangZhouXiaoShanGuoJi" class="mui-table-view-cell mui-group-list-item">杭州萧山国际机场</li>
<li data-value="HFE" data-tags="HeFeiLuoGangGuoJi" class="mui-table-view-cell mui-group-list-item">合肥骆岗国际机场</li>
<li data-value="HTN" data-tags="HeTian" class="mui-table-view-cell mui-group-list-item">和田机场</li>
<li data-value="HEK" data-tags="HeiHe" class="mui-table-view-cell mui-group-list-item">黑河机场</li>
<li data-value="HET" data-tags="HuHeHaoTeBaiTaGuoJi" class="mui-table-view-cell mui-group-list-item">呼和浩特白塔国际机场</li>
<li data-value="HIA" data-tags="HuaiAnLianShui" class="mui-table-view-cell mui-group-list-item">淮安涟水机场</li>
<li data-value="TXN" data-tags="HuangShanTunXiGuoJi" class="mui-table-view-cell mui-group-list-item">黄山屯溪国际机场</li>
<li data-group="J" class="mui-table-view-divider mui-group-list-group">J</li>
<li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-group-list-item">济南遥墙国际机场</li>
<li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-group-list-item">济宁曲阜机场</li>
<li data-value="JXA" data-tags="JiXiXingKaiHu" class="mui-table-view-cell mui-group-list-item">鸡西兴凯湖机场</li>
<li data-value="JMU" data-tags="JiaMuSiDongJiao" class="mui-table-view-cell mui-group-list-item">佳木斯东郊机场</li>
<li data-value="JGN" data-tags="JiaYuGuan" class="mui-table-view-cell mui-group-list-item">嘉峪关机场</li>
<li data-value="JNZ" data-tags="JinZhouXiaoLingZi" class="mui-table-view-cell mui-group-list-item">锦州小岭子机场</li>
<li data-value="JDZ" data-tags="JingDeZhen" class="mui-table-view-cell mui-group-list-item">景德镇机场</li>
<li data-value="JGS" data-tags="JingGangShan" class="mui-table-view-cell mui-group-list-item">井冈山机场</li>
<li data-value="JIU" data-tags="JiuJiangLuShan" class="mui-table-view-cell mui-group-list-item">九江庐山机场</li>
<li data-value="JZH" data-tags="JiuZhaiHuangLong" class="mui-table-view-cell mui-group-list-item">九寨黄龙机场</li>
<li data-group="K" class="mui-table-view-divider mui-group-list-group">K</li>
<li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-group-list-item">喀什机场</li>
<li data-value="KRY" data-tags="KeLaMaYi" class="mui-table-view-cell mui-group-list-item">克拉玛依机场</li>
<li data-value="KCA" data-tags="KuCheGuiZi" class="mui-table-view-cell mui-group-list-item">库车龟兹机场</li>
<li data-value="KRL" data-tags="KuErLe" class="mui-table-view-cell mui-group-list-item">库尔勒机场</li>
<li data-value="KMG" data-tags="KunMingWuJiaBaGuoJi" class="mui-table-view-cell mui-group-list-item">昆明巫家坝国际机场</li>
<li data-group="L" class="mui-table-view-divider mui-group-list-group">L</li>
<li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-group-list-item">拉萨贡嘎机场</li>
<li data-value="LHW" data-tags="LanZhouZhongChuan" class="mui-table-view-cell mui-group-list-item">兰州中川机场</li>
<li data-value="LJG" data-tags="LiJiangSanYi" class="mui-table-view-cell mui-group-list-item">丽江三义机场</li>
<li data-value="HZH" data-tags="LiPing" class="mui-table-view-cell mui-group-list-item">黎平机场</li>
<li data-value="LYG" data-tags="LianYunGangBaiTaBu" class="mui-table-view-cell mui-group-list-item">连云港白塔埠机场</li>
<li data-value="LNJ" data-tags="LinCang" class="mui-table-view-cell mui-group-list-item">临沧机场</li>
<li data-value="LYI" data-tags="LinYi" class="mui-table-view-cell mui-group-list-item">临沂机场</li>
<li data-value="LZY" data-tags="LinZhiMiLin" class="mui-table-view-cell mui-group-list-item">林芝米林机场</li>
<li data-value="LZH" data-tags="LiuZhouBaiLian" class="mui-table-view-cell mui-group-list-item">柳州白莲机场</li>
<li data-value="LCX" data-tags="LongYanGuanZhiShan" class="mui-table-view-cell mui-group-list-item">龙岩冠豸山机场</li>
<li data-value="LZO" data-tags="LuZhouLanTian" class="mui-table-view-cell mui-group-list-item">泸州蓝田机场</li>
<li data-value="LYA" data-tags="LuoYangBeiJiao" class="mui-table-view-cell mui-group-list-item">洛阳北郊机场</li>
<li data-group="M" class="mui-table-view-divider mui-group-list-group">M</li>
<li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-group-list-item">满洲里西郊机场</li>
<li data-value="MIG" data-tags="MianYangNanJiao" class="mui-table-view-cell mui-group-list-item">绵阳南郊机场</li>
<li data-value="OHE" data-tags="MoHeGuLian" class="mui-table-view-cell mui-group-list-item">漠河古莲机场</li>
<li data-value="MDG" data-tags="MuDanJiangHaiLang" class="mui-table-view-cell mui-group-list-item">牡丹江海浪机场</li>
<li data-group="N" class="mui-table-view-divider mui-group-list-group">N</li>
<li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-group-list-item">南昌昌北国际机场</li>
<li data-value="NAO" data-tags="NanChongGaoPing" class="mui-table-view-cell mui-group-list-item">南充高坪机场</li>
<li data-value="NKG" data-tags="NanJingLuKouGuoJi" class="mui-table-view-cell mui-group-list-item">南京禄口国际机场</li>
<li data-value="NNG" data-tags="NanNingWuXu" class="mui-table-view-cell mui-group-list-item">南宁吴圩机场</li>
<li data-value="NTG" data-tags="NanTongXingDong" class="mui-table-view-cell mui-group-list-item">南通兴东机场</li>
<li data-value="NNY" data-tags="NanYangJiangYing" class="mui-table-view-cell mui-group-list-item">南阳姜营机场</li>
<li data-value="NGB" data-tags="NingBoLiSheGuoJi" class="mui-table-view-cell mui-group-list-item">宁波栎社国际机场</li>
<li data-group="P" class="mui-table-view-divider mui-group-list-group">P</li>
<li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-group-list-item">普洱思茅机场</li>
<li data-group="Q" class="mui-table-view-divider mui-group-list-group">Q</li>
<li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-group-list-item">齐齐哈尔三家子机场</li>
<li data-value="SHP" data-tags="QinHuangDaoShanHaiGuan" class="mui-table-view-cell mui-group-list-item">秦皇岛山海关机场</li>
<li data-value="TAO" data-tags="QingDaoLiuTingGuoJi" class="mui-table-view-cell mui-group-list-item">青岛流亭国际机场</li>
<li data-value="JUZ" data-tags="QuZhou" class="mui-table-view-cell mui-group-list-item">衢州机场</li>
<li data-value="JJN" data-tags="QuanZhouJinJiang" class="mui-table-view-cell mui-group-list-item">泉州晋江机场</li>
<li data-group="R" class="mui-table-view-divider mui-group-list-group">R</li>
<li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-group-list-item">日喀则和平机场</li>
<li data-group="S" class="mui-table-view-divider mui-group-list-group">S</li>
<li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-group-list-item">三亚凤凰国际机场</li>
<li data-value="SWA" data-tags="ShanTouWaiSha" class="mui-table-view-cell mui-group-list-item">汕头外砂机场</li>
<li data-value="SHA" data-tags="ShangHaiHongQiaoGuoJi" class="mui-table-view-cell mui-group-list-item">上海虹桥国际机场</li>
<li data-value="PVG" data-tags="ShangHaiPuDongGuoJi" class="mui-table-view-cell mui-group-list-item">上海浦东国际机场</li>
<li data-value="SZX" data-tags="ShenChouBaoAnGuoJi" class="mui-table-view-cell mui-group-list-item">深圳宝安国际机场</li>
<li data-value="SHE" data-tags="ShenYangTaoXianGuoJi" class="mui-table-view-cell mui-group-list-item">沈阳桃仙国际机场</li>
<li data-value="SJW" data-tags="ShiJiaZhuangZhengDingGuoJi" class="mui-table-view-cell mui-group-list-item">石家庄正定国际机场</li>
<li data-value="WUX" data-tags="SuNanShuoFangGuoJi" class="mui-table-view-cell mui-group-list-item">苏南硕放国际机场</li>
<li data-group="T" class="mui-table-view-divider mui-group-list-group">T</li>
<li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-group-list-item">塔城机场</li>
<li data-value="TYN" data-tags="TaiYuanWuSuGuoJi" class="mui-table-view-cell mui-group-list-item">太原武宿国际机场</li>
<li data-value="HYN" data-tags="TaiZhouLuQiao-HuangYanJiChang" class="mui-table-view-cell mui-group-list-item">台州路桥机场 (黄岩机场)</li>
<li data-value="TVS" data-tags="TangShanSanNvHe" class="mui-table-view-cell mui-group-list-item">唐山三女河机场</li>
<li data-value="TCZ" data-tags="TengChongTuoFeng" class="mui-table-view-cell mui-group-list-item">腾冲驼峰机场</li>
<li data-value="TSN" data-tags="TianJinBinHaiGuoJi" class="mui-table-view-cell mui-group-list-item">天津滨海国际机场</li>
<li data-value="TGO" data-tags="TongLiao" class="mui-table-view-cell mui-group-list-item">通辽机场</li>
<li data-value="TEN" data-tags="TongRenFengHuang" class="mui-table-view-cell mui-group-list-item">铜仁凤凰机场</li>
<li data-group="W" class="mui-table-view-divider mui-group-list-group">W</li>
<li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-group-list-item">万州五桥机场</li>
<li data-value="WEF" data-tags="WeiFang" class="mui-table-view-cell mui-group-list-item">潍坊机场</li>
<li data-value="WEH" data-tags="WeiHaiDaShuiBo" class="mui-table-view-cell mui-group-list-item">威海大水泊机场</li>
<li data-value="WNH" data-tags="WenShanPuZheHei" class="mui-table-view-cell mui-group-list-item">文山普者黑机场</li>
<li data-value="WNZ" data-tags="WenZhouYongQiangGuoJi" class="mui-table-view-cell mui-group-list-item">温州永强国际机场</li>
<li data-value="WUA" data-tags="WuHai" class="mui-table-view-cell mui-group-list-item">乌海机场</li>
<li data-value="WUH" data-tags="WuHanTianHeGuoJi" class="mui-table-view-cell mui-group-list-item">武汉天河国际机场</li>
<li data-value="HLH" data-tags="WuLanHaoTe" class="mui-table-view-cell mui-group-list-item">乌兰浩特机场</li>
<li data-value="URC" data-tags="WuLuMuQiDiWoBaoGuoJi" class="mui-table-view-cell mui-group-list-item">乌鲁木齐地窝堡国际机场</li>
<li data-value="WUS" data-tags="WuYiShan" class="mui-table-view-cell mui-group-list-item">武夷山机场</li>
<li data-value="WUZ" data-tags="WuZhouChangZhouDao" class="mui-table-view-cell mui-group-list-item">梧州长洲岛机场</li>
<li data-group="X" class="mui-table-view-divider mui-group-list-group">X</li>
<li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-group-list-item">西安咸阳国际机场</li>
<li data-value="XIC" data-tags="XiChangQingShan" class="mui-table-view-cell mui-group-list-item">西昌青山机场</li>
<li data-value="XIL" data-tags="XiLinHaoTe" class="mui-table-view-cell mui-group-list-item">锡林浩特机场</li>
<li data-value="XNN" data-tags="XiNingCaoJiaBao" class="mui-table-view-cell mui-group-list-item">西宁曹家堡机场</li>
<li data-value="JHG" data-tags="XiShuangBanNaGaSa" class="mui-table-view-cell mui-group-list-item">西双版纳嘎洒机场</li>
<li data-value="XMN" data-tags="XiaMenGaoQiGuoJi" class="mui-table-view-cell mui-group-list-item">厦门高崎国际机场</li>
<li data-value="HKG" data-tags="XiangGangGuoJi" class="mui-table-view-cell mui-group-list-item">香港国际机场</li>
<li data-value="XFN" data-tags="XiangYangLiuJi" class="mui-table-view-cell mui-group-list-item">襄阳刘集机场</li>
<li data-value="ACX" data-tags="XingYi" class="mui-table-view-cell mui-group-list-item">兴义机场</li>
<li data-value="XUZ" data-tags="XuZhouGuanYin" class="mui-table-view-cell mui-group-list-item">徐州观音机场</li>
<li data-group="Y" class="mui-table-view-divider mui-group-list-group">Y</li>
<li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-group-list-item">延安二十里堡机场</li>
<li data-value="YNZ" data-tags="YanCheng" class="mui-table-view-cell mui-group-list-item">盐城机场</li>
<li data-value="YNJ" data-tags="YanJiChaoYangChuan" class="mui-table-view-cell mui-group-list-item">延吉朝阳川机场</li>
<li data-value="YNT" data-tags="YanTaiLaiShanGuoJi" class="mui-table-view-cell mui-group-list-item">烟台莱山国际机场</li>
<li data-value="YBP" data-tags="YiBinCaiBa" class="mui-table-view-cell mui-group-list-item">宜宾菜坝机场</li>
<li data-value="YIH" data-tags="YiChangSanXia" class="mui-table-view-cell mui-group-list-item">宜昌三峡机场</li>
<li data-value="LDS" data-tags="YiChunLinDu" class="mui-table-view-cell mui-group-list-item">伊春林都机场</li>
<li data-value="YIN" data-tags="YiNing" class="mui-table-view-cell mui-group-list-item">伊宁机场</li>
<li data-value="YIW" data-tags="YiWu" class="mui-table-view-cell mui-group-list-item">义乌机场</li>
<li data-value="INC" data-tags="YinChuanHeDong" class="mui-table-view-cell mui-group-list-item">银川河东机场</li>
<li data-value="LLF" data-tags="YongZhouLingLing" class="mui-table-view-cell mui-group-list-item">永州零陵机场</li>
<li data-value="UYN" data-tags="YuLinYuYang" class="mui-table-view-cell mui-group-list-item">榆林榆阳机场</li>
<li data-value="YUS" data-tags="YuShuBaTang" class="mui-table-view-cell mui-group-list-item">玉树巴塘机场</li>
<li data-value="YCU" data-tags="YunChengZhangXiao" class="mui-table-view-cell mui-group-list-item">运城张孝机场</li>
<li data-group="Z" class="mui-table-view-divider mui-group-list-group">Z</li>
<li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-group-list-item">湛江机场</li>
<li data-value="ZAT" data-tags="ZhaoTong" class="mui-table-view-cell mui-group-list-item">昭通机场</li>
<li data-value="CGO" data-tags="ZhengZhouXinZhengGuoJi" class="mui-table-view-cell mui-group-list-item">郑州新郑国际机场</li>
<li data-value="HJJ" data-tags="ZhiJiang" class="mui-table-view-cell mui-group-list-item">芷江机场</li>
<li data-value="CKG" data-tags="ZhongQingJiangBeiGuoJi" class="mui-table-view-cell mui-group-list-item">重庆江北国际机场</li>
<li data-value="ZHY" data-tags="ZhongWeiXiangShan" class="mui-table-view-cell mui-group-list-item">中卫香山机场</li>
<li data-value="HSN" data-tags="ZhouShanZhuJiaJian" class="mui-table-view-cell mui-group-list-item">舟山朱家尖机场</li>
<li data-value="ZUH" data-tags="ZhuHaiSanZao" class="mui-table-view-cell mui-group-list-item">珠海三灶机场</li>
</ul>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.indexedlist.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.ready(function() {
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('list');
//calc hieght
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//create
window.groupList = new mui.GroupList(list);
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/list.html
View file @ b5534d5a
......@@ -358,6 +358,23 @@
image viewer（图片预览）
</a>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
indexed list（索引列表）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type = "common" href="examples/indexed-list.html">
展示模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type = "common" href="examples/indexed-list-select.html">
选择模式
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/lazyload-image.html">
lazyload（懒加载）
......@@ -395,18 +412,16 @@
//Android平台暂时使用slide-in-right动画
aniShow = "slide-in-right"
}
//初始化，并预加载webview模式的选项卡
mui.init({
preloadPages: [{
url: 'examples/tab-webview-main.html'
},
{
//初始化，并预加载webview模式的选项卡
function preload () {
mui.preload({url:'examples/tab-webview-main.html'});
mui.preload({
url:"examples/pullrefresh_main.html",
styles:{
popGesture:'hide'
}
}]
});
});
}
var templates = {};
var getTemplate = function(name, header, content) {
var template = templates[name];
......@@ -459,10 +474,36 @@
getTemplate('default', 'examples/template.html');
};
mui.plusReady(function() {
//初始化模板
initTemplates(); //预加载所有模板
//关闭splash页面；
plus.navigator.closeSplashscreen();
//读取本地存储，检查是否为首次启动
var showGuide = plus.storage.getItem("lauchFlag");
if(showGuide){
//有值，说明已经显示过了，无需显示；
//关闭splash页面；
plus.navigator.closeSplashscreen();
//初始化模板
initTemplates();
//预加载
preload();
}else{
//显示启动导航
mui.openWindow({
id:'guilde',
url:'examples/guide.html',
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
//延迟的原因：优先打开启动导航页面，避免资源争夺
setTimeout(function () {
//初始化模板
initTemplates();
//预加载
preload();
},200);
}
});
//主列表点击事件
mui('#list').on('tap', 'a', function() {
......
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