页面的head部分需要引入4个CSS样式文件，并调用jQuery库，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/weui.min.css">
<link type="text/css" rel="stylesheet" href="css/jquery-weui.min.css">
<link type="text/css" rel="stylesheet" href="css/maillist2.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>

页面的body部分内容比较多，分为上下和左右的结构，然后多个部门放置在不同的容器里，部分代码如下：

<div id="indexPage">
	<div class="bar bar-nav weui-search-bar" id="searchBar">
	  	<form class="weui-search-bar__form">
		    <div class="weui-search-bar__box">
		      	<i class="weui-icon-search"></i>
		      	<input type="input" class="weui-search-bar__input" id="searchInput" readonly placeholder="搜索" >
		      	<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
		    </div>
	  	</form>
  		<!-- <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> -->
	</div>
	<div class="bar bar-footer pull-right">
        <!-- <span class="sels">提交</span>
        <span>取消</span> -->
        <span class="sel-btn">已选择: <strong>0</strong>人</span>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">确认</a>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">取消</a>
	</div>
	<div class="content sel-con">
	    <div class="weui-cells weui-cells_checkbox">
	    	<div class="list-item">
			  	<label class="weui-cell weui-check__label all-input">
				    <div class="weui-cell__hd">
				      	<input type="checkbox" name="checkbox" class="weui-check">
				      	<i class="weui-icon-checked"></i>
				    </div>
				    <div class="weui-cell__bd">
				      	<p>全选</p>
				    </div>
			  	</label>
	    	</div>
	    	<h3 class="list-item-tit">部门</h3>
	    	<div class="list-item1">

	    	</div>
	    	<div class="list-item2">
	    		<div class="list-item-box">
		    		<h3 class="list-item-tit">A</h3>
				  	<label class="weui-cell weui-check__label item-input">
		      			<div class="weui-cell__hd">
					      	<input type="checkbox" name="checkbox" class="weui-check" peoId="1">
					      	<i class="weui-icon-checked"></i>
					    </div>
					    <div class="weui-cell__bd touxiang">
					      	<img src="images/tx.png">
					    </div>
					    <div class="weui-cell__bd">
					      	<p>姓名1</p>
					    </div>
					    <div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
		      			<div class="weui-cell__hd">
					      	<input type="checkbox" name="checkbox" class="weui-check" peoId="13">
					      	<i class="weui-icon-checked"></i>
					    </div>
					    <div class="weui-cell__bd touxiang">
					      	<img src="images/tx.png">
					    </div>
					    <div class="weui-cell__bd">
					      	<p>姓名13</p>
					    </div>
					    <div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
		      			<div class="weui-cell__hd">
					      	<input type="checkbox" name="checkbox" class="weui-check" peoId="14">
					      	<i class="weui-icon-checked"></i>
					    </div>
					    <div class="weui-cell__bd touxiang">
					      	<img src="images/tx.png">
					    </div>
					    <div class="weui-cell__bd">
					      	<p>姓名14</p>
					    </div>
					    <div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
		      			<div class="weui-cell__hd">
					      	<input type="checkbox" name="checkbox" class="weui-check" peoId="15">
					      	<i class="weui-icon-checked"></i>
					    </div>
					    <div class="weui-cell__bd touxiang">
					      	<img src="images/tx.png">
					    </div>
					    <div class="weui-cell__bd">
					      	<p>姓名15</p>
					    </div>
					     <div class="weui-cell__ft">教学部</div>
					</label>
	    		</div>
	    		<div class="list-item-box">
		    		<h3 class="list-item-tit">B</h3>
				  	<label class="weui-cell weui-check__label item-input">
		      			<div class="weui-cell__hd">
					      	<input type="checkbox" name="checkbox" class="weui-check" peoId="16">
					      	<i class="weui-icon-checked"></i>
					    </div>
					    <div class="weui-cell__bd touxiang">
					      	<img src="images/tx.png">
					    </div>
					    <div class="weui-cell__bd">
					      	<p>姓名16</p>
					    </div>
					     <div class="weui-cell__ft">教学部</div>
					</label>
					<label class="weui-cell weui-check__label item-input">
		      			<div class="weui-cell__hd">
					      	<input type="checkbox" name="checkbox" class="weui-check" peoId="17">
					      	<i class="weui-icon-checked"></i>
					    </div>
					    <div class="weui-cell__bd touxiang">
					      	<img src="images/tx.png">
					    </div>
					    <div class="weui-cell__bd">
					      	<p>姓名17</p>
					    </div>
					    <div class="weui-cell__ft">教学部</div>
					</label>
	    		</div>
	    	</div>
		</div>
	</div>
</div>

设置好上面的各容器内容后，通过jQuery定义一些样式的变化，比如：选中、移除等的样式，代码如下：

$("#selectPage").removeClass('weui-popup__container');
        $("#selectPage .weui-popup__modal").css({
        	"-webkit-transform": "none",
        	"-moz-transform": "none",
        	"-ms-transform": "none",
        	"transform": "none"
        })
        $("#seachPage").css({
        	"z-index": 120 
        })
        $("#selectPage .weui-popup__overlay").addClass('hide');
        $(".sel-btn,.back-btn").addClass('hide');
        $(".gray-bg").css({
        	"position":"relative",
        	"width": 740,
        	"height": 600,
        	"margin": "auto"
        })
        $("#indexPage").css({
        	"width": 370
        })
        $("#selectPage").css({
        	"width": 370,
        	"position": "absolute",
        	"height": "100%",
        	"top":0,
        	"right":0
        })

最后，需要引入4个特定的JS文件，代码如下：

<script type="text/javascript" src="js/icheck.min.js"></script>
<script type="text/javascript" src="js/jquery-weui.js"></script>
<script type="text/javascript" src="js/dot.min.js"></script>
<script type="text/javascript" src="js/maillist2.js"></script>