项目要求：点击页面按钮，打开通讯录。这个通讯录不是真实的手机通讯录，而是本地的通讯录，后台录入的通讯。点击用户信息，能获取用户的姓名和手机号。
前台页面：
<div class="mui-input-row">
<label>巡查人员</label>
<input type="hidden" name="user" id="user" class="jz-input mui-input-clear" placeholder="">
<span style="width:64%;position: absolute; top: 5px;" onclick="opentx()" id="gettongxun" >打开通讯录</span>
</div>
JS打开
function opentx(){
//iframe层
layer.open({
index:'oif',
type: 2,
title: '通讯录',
shadeClose: true,
shade: 0.8,
area: ['80%', '70%'],
content: "/common/tongxun" //iframe的url
});
}通讯页面：
<!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="{$tpl}index/css/mui.min.css" rel="stylesheet" />
<link href="{$tpl}tongxun/css/mui.indexedlist.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 10px 0;
vertical-align: middle;
}
.oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
width: 50px;
height: 50px;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name,
.oa-contact-position {
float: left;
}
</style>
</head>
<body>
<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 mui-table-view-striped mui-table-view-condensed">
{loop table="tongxun" as="v"}
<li data-value="ZHA" data-tags="{fun pinyin($v['name'])}" class="mui-table-view-cell mui-indexed-list-item">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div onclick="choose('{$v['name']}',{$v['id']})" class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">{$v['name']}</h4>
<span class="oa-contact-position mui-h6"></span>
</div>
<p class="oa-contact-address mui-h6">
{$v['tel']}
</p>
</div>
</div>
</div>
</li>
{/loop}
</ul>
</div>
</div>
</div>
<script src="{$tpl}index/js/mui.min.js"></script>
<script src="{$tpl}tongxun/js/mui.indexedlist.js"></script>
<script src="{$tpl}index/js/jquery-1.12.4.min.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) + 'px';
//create
window.indexedList = new mui.IndexedList(list);
});
function choose(a,id){
console.log(a);
window.parent.$('#gettongxun').text(a);
window.parent.$('#user').val(id);
window.parent.close_f();
}
</script>
</body>
</html>
