<!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-indexed-list">
<div class="mui-indexed-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
</div>
<div class="mui-indexed-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-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<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="22-33机场" data-tags="22-33" class="mui-table-view-cell mui-indexed-list-item">22-33机场</li>
<li data-value="12-34机场" data-tags="12-34" class="mui-table-view-cell mui-indexed-list-item">12-34机场</li>
<li data-value="34-56机场" data-tags="34-56" class="mui-table-view-cell mui-indexed-list-item">34-56机场</li>
<li id="s"></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
document.getElementById("s").innerHTML += "<li id=aaa data-value=\"22-33机场\" data-tags=\"22-33\" class=\"mui-table-view-cell mui-indexed-list-item\" >22-33机场a</li>";
document.getElementById("s").innerHTML += "<li id=bbb data-value=\"12-34机场\" data-tags=\"12-34\" class=\"mui-table-view-cell mui-indexed-list-item\" >12-34机场b</li>";
document.getElementById("s").innerHTML += "<li id=ccc data-value=\"34-56机场\" data-tags=\"34-56\" class=\"mui-table-view-cell mui-indexed-list-item\" >34-56机场c</li>";
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//create
window.indexedList = new mui.IndexedList(list); // mui("#list").indexedList().findElements();
});
</script>
</body>
</html>
