修改筛选条件的样式

app/css/app.css

/*.mui-table-view-cell .mui-media-body{padding-bottom:10px; border-bottom:1px solid #CCCCCC;}*/
.mui-input-group .mui-input-row:last-child:after{ background: none;}
.mui-popover{ border-radius:0;}
a{text-decoration:none;color:#007aff}a:active{color:#0062cc}
.mui-btn.mui-active:enabled,.mui-btn:enabled:active,button.mui-active:enabled,button:enabled:active,input[type=button].mui-active:enabled,input[type=button]:enabled:active,input[type=reset].mui-active:enabled,input[type=reset]:enabled:active,input[type=submit].mui-active:enabled,input[type=submit]:enabled:active{color:#fff;background-color:#FF9900}
/*///////////////common公共样式///////////////////////*/
.frmactive2{color:#fff;background-color:#ccc; border:1px solid transparent;}
.frmactive{color:#fff;background-color:#FF9900; border:1px solid #FF9900;}
.frmactiveok{color:#fff;background-color:#FF9900; border:1px solid #FF9900;}
.exitbtn{ border:none; margin: 0; color:#FF0000; border-radius: 0;}
.exitbtn{ border:none; margin: 0; color:#FF0000; font-size: 14px; border-radius: 0;}
.pompmsg{ font-size: 12px; color: #CCCCCC;}
/*///////////////common公共样式///////////////////////*/
/*.searchbox{position: relative;}
.searchbox .searchtxt{ position: absolute; height: 30px; top:50%; margin-top:-13px; border-radius: 6px; border:1px transparent solid; padding:0 30px; line-height: 20px; font-size: 14px;}
*/
.searchbox .mui-placeholder .mui-icon-search{font-size:20px; color: #999999;}
.searchbox .mui-placeholder .mui-icon-search{font-size:18px; color: #999999;}
.mui-search input[type=search].searchtxt{background: #FFFFFF;}
.mui-search .mui-placeholder{ font-size: 14px; top:2px }
.maintitbox .maintit{ line-height: 40px; font-size: 16px; text-align: center; color: #FF9900; border-bottom: 1px solid #F0F0F0;}
.conblock{ background: #FFFFFF; margin:10px 0;}
.mui-grid-view.gridbg{ background: #FFFFFF; border: none;}
.mui-grid-view.gridbg .mui-table-view-cell{ border:none;}
.mui-grid-view.gridbg .mui-table-view-cell{ border:none; padding: 10px 4px;}
.mui-grid-view.gridbg .mui-table-view-cell .mui-media-body{ font-size: 12px;}
/*热门领域*/
.fieldicon{ overflow: hidden;width:40px; height:40px;margin: auto;}
/*我的关注*/
.fixbox{ background: #FFFFFF;}
.fixbox .fixbtn{ padding:0; margin: 0; overflow: hidden;}
.fixbox .fixbtn li{ list-style: none; float: left; padding:10px; border:1px solid #F0F0F0; width:50%;text-align: center;}
.fixbox .fixbtn li{ list-style: none; float: left; padding:6px 10px; border:1px solid #F0F0F0; width:50%;text-align: center;font-size: 14px;height: 32px;}
.fixbox .fixbtn li.liactive{ color: #FF9900;border-bottom-color: #FF9900;}
.childlist{ display: none;}
/*合作历史及评价*/
/***********************专家信息修改*******************/
/***********************搜索*******************/
.searchbox2{background: #FFFFFF; border-radius: 6px; height: 30px;  margin:8px 0;overflow: hidden;}
.searchbox2 .searchselect{width: 20%; position:relative;}
.searchbox2 .searchselect .mui-select{width:100%; padding:8% 10%; padding-left:18%;margin: auto; background: none;}
.searchbox2 .searchselect em{position: absolute; right:30%; top:-8%; font-size: 16px; width: 0; height: 0; z-index: 0;}
.searchbox2 .searchtxt2{width: 80%;height: 22px; margin: 4px 0; line-height: 20px; border: none; border-radius: 0; border-left:1px solid #CCCCCC; font-size:14px;}
.searchbox2{width:92%;background: #FFFFFF; border-radius: 6px; height: 30px;  margin:8px 0;/*overflow: hidden;*/}
.searchbox2 .searchselect{width: 24%; position:relative;}
/*.searchbox2 .searchselect .mui-select{width:100%; padding:8% 10%; padding-left:18%;margin: auto; background: none;}*/
.searchbox2 .searchselect em{position: absolute; right:30%; top:-8%; font-size: 16px;color:#999999; width: 0; height: 0; z-index: 0;}
.searchbox2 .searchtxt2{width: 76%;height: 22px; margin: 6px 0; line-height: 20px; border: none; border-radius: 0; border-left:1px solid #CCCCCC; font-size:13px;}
.simuselect{position:relative;}
.ulbox{ padding: 0 16px;font-size: 13px;color:#999999;line-height: 32px;cursor:pointer; position:relative;} 
.lishow{ padding:0; margin:0;background:#fff;overflow: hidden; border-radius:2px;position:absolute; top:30px;right:0px; width:100%;box-shadow: 0px 0px 3px #ccc inset;z-index: 9999;display:none;} 
.lishow li{list-style: none; font-size: 13px;line-height:30px; list-style:none; padding:2px 16px; margin-top:1px;cursor: pointer;} 
.lishow li:hover{ background:#f0f0f0;} 
.historybox{ background: #FFFFFF; padding-bottom:20px;}
.filterblock{padding:0; margin: 0; margin-top:2px ; background:#FFFFFF;overflow: hidden;}
.filterblock li{list-style:none; float: left; border-right:1px solid #F0F0F0;} 
.filterblock li em{ font-size:18px; margin:0 2px;}
.filterlist{ padding:0; margin: 0; border:none; border-radius:0;padding:6px 6px 6px 12px;font-size: 12px;}
.filterlist{ padding:0; margin: 0; border:none; border-radius:0;padding:6px 6px 6px 12px;font-size: 13px;height: 32px;}
/*筛选条件*/
.popoverbox2 {border-radius:4px;width:0;height:0;width:100%;height:200px;font-size: 14px; }
.popoverbox2 .mui-popover-arrow{left:50%; margin-left:-12px;}
.popoverbox2 .mui-table-view{padding:4px;border-radius: 0; overflow: hidden;}
.popoverbox2 .mui-table-view-cell{float:left;padding:8px 16px; width:40%; margin:2px 2%;border-radius:2px;}
.popoverbox2 .mui-table-view-cell>a:not(.mui-btn){position: relative;}
.popoverbox2 .mui-table-view-cell .mui-navigate-right:after { position:absolute;right: 0; color:#FF9900;font-size: 24px;}
.popoverbox2 .mui-table-view .mui-table-view-cell:last-child,.popoverbox2 .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn){border-radius:4px;}
.popoverbox2 .mui-table-view .mui-table-view-cell:first-child,.popoverbox2 .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn){border-radius:4px;}
.popoverbox2 .mui-table-view .mui-table-view-cell{border-radius:4px; overflow: hidden; }
.popoverbox2 .mui-table-view .mui-table-view-cell>a:not(.mui-btn).mui-active{background:#FF9900; color: #FFFFFF;}
/*城市选择级联*/
.menublock{ position: relative; }
.menuposition{border-radius:4px; position: absolute; height:300px;width:100%; font-size: 14px;}
.menuposition .mui-popover-arrow{left:50%; margin-left:-12px;}
.menuposition.mui-table-view{border-radius: 0; overflow: auto;}
.menuposition .mui-row.mui-fullscreen>[class*="mui-col-"] {height:100%;}
.menuposition .mui-col-xs-4,.menuposition .mui-control-content {border-radius: 6px;overflow-y: auto;height: 100%;}
.menuposition .mui-segmented-control .mui-control-item {line-height: 44px;width: 100%;}
.menuposition .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {border-bottom: 1px solid #e8e8e8;}.menuposition .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {background-color: #FFFFFF;color:#FF9900;}
	
/***********************搜索*******************/
/*********************** 咨询*******************/
.filterblock2{padding:0; margin: 0; margin-top:2px ; background:#FFFFFF;overflow: hidden;}
.filterblock2 li{list-style:none; position: relative; float: left; border-right:1px solid #F0F0F0;border-bottom:1px solid #F0F0F0;} 
.filterblock2 li select{  margin:0 2px;}
.filterlist2{ padding:0; margin: 0; border:none; border-radius:0;padding:6px;font-size: 13px;}
.filterlist2{ padding:0; margin: 0; border:none; border-radius:0;padding:6px;font-size: 13px;height: 32px;}
.coutopicbox{ position: relative; background: #F0F0F0; margin-bottom: 10px; width:110%; margin-left:-16px; padding:4%; overflow: hidden;}
.coutopicbox .coutheme{ max-width: 60%;}
.evabox span{ font-size: 12px;}
.evabox .levelbox .mui-icon{ font-size: 14px; line-height: 14px; border:1px solid red;}
/*咨询列表下拉菜单*/
.popoverbox {border-radius: 6px;width:0;height:0;min-width: 90px;min-height:110px;font-size: 13px;}
.popoverbox .mui-popover-arrow{top: -22px;width: 22px;height: 22px;}
.popoverbox .mui-table-view-cell{padding:8px 14px;}
.popoverbox {border-radius: 6px;width:0;height:0;min-width: 100px;min-height:110px;font-size: 13px; }
.popoverbox .mui-popover-arrow{top: -22px;width: 22px;height: 22px; left:50%; margin-left:-12px;}
.popoverbox .mui-table-view-cell{padding:8px 14px;/* text-align: center;*/}
.popoverbox .mui-table-view-cell>a:not(.mui-btn){ margin-right:-12%;position: relative;}
.popoverbox .mui-table-view-cell .mui-navigate-right:after { position:absolute;right: 0; color:#FF9900;font-size: 24px;}
.mui-popover4{ width: 130px;  }
/*********************** 咨询*******************/

app/html/attentions.html

    	<!-- 主界面具体展示内容 -->
		<div class="fixbox">
			<ul class="fixbtn" id="fixbtn">
				<li class="liactive">专家</li><!--当前选中状态    'liactive'-->
				<li>资源</li>
				<li index="0" class="liactive">专家</li><!--当前选中状态    'liactive'-->
				<li index="1">资源</li>
			</ul>
		</div>
		<div class="alllist">
		        </ul>
			</div>
		</div>
		<a id="scrollToTop" class="backTop hide"> <span class="mui-icon mui-icon-arrowup"></span> </a>
		<!--<a id="scrollToTop" class="backTop hide"> <span class="mui-icon mui-icon-arrowup"></span> </a>-->
    </div>
    <script src="../js/public/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init()
		mui.init();
		//------------------------------
		//菜单tab切换
		mui("#fixbtn").on("tap","li",function(){
			var checkedindex=this.getAttribute("index");
			var checkedcontent_arr=document.getElementsByClassName("childlist");
			var libtn_arr = document.getElementById("fixbtn").getElementsByTagName("li");
			mui.toast(checkedindex);
			if(checkedindex==0){
				libtn_arr[0].classList.add("liactive");
				libtn_arr[1].classList.remove("liactive");
				checkedcontent_arr[1].style.display = 'none';
				checkedcontent_arr[0].style.display = 'block';
			}else{
				libtn_arr[1].classList.add("liactive");
				libtn_arr[0].classList.remove("liactive");
				checkedcontent_arr[0].style.display = 'none';
				checkedcontent_arr[1].style.display = 'block';
			}
		})
		//-----------------------------
		
	</script>      	 
</body>
</html>

app/html/consultlist.html

    	<div class="filterbox2">
			<ul class="filterblock2">
				<li style="width:22%;">
					<a href="#middlePopover1" class="mui-btn mui-btn-block mui-btn-outlined filterlist2">全部<em class="mui-icon mui-icon-arrowdown"></em></a>
					<a href="#middlePopover1" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>全部</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
				<li style="width:22%;">
					<a href="#middlePopover2" class="mui-btn mui-btn-block mui-btn-outlined filterlist2">咨询方向<em class="mui-icon mui-icon-arrowdown"></em></a>
					<a href="#middlePopover2" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>咨询方向</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
				<li style="width:22%;">
					<a href="#middlePopover3" class="mui-btn mui-btn-block mui-btn-outlined filterlist2">咨询状态<em class="mui-icon mui-icon-arrowdown"></em></a>
					<a href="#middlePopover3" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>咨询状态</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
				<li style="width:34%;">
					<a href="#middlePopover4" class="mui-btn mui-btn-block mui-btn-outlined filterlist2" >按最后回复排序<em class="mui-icon mui-icon-arrowdown"></em></a>
					<a href="#middlePopover4" class="mui-btn mui-btn-block mui-btn-outlined filterlist2" ><span>按最后回复排序</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
			</ul>
		</div>
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">技术咨询</a></li>
						<li class="mui-table-view-cell"><a href="#">资源咨询</a></li>
						<li class="mui-table-view-cell"><a href="#">其它事务</a></li>
					<ul class="mui-table-view mui-table-view-radio">
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">技术咨询</a></li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">资源咨询</a></li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">其它事务</a></li>
					</ul>
				</div>
			</div>
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">进行中</a></li>
						<li class="mui-table-view-cell"><a href="#">待评价</a></li>
						<li class="mui-table-view-cell"><a href="#">已完成</a></li>
					<ul class="mui-table-view mui-table-view-radio">
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">进行中</a></li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">待评价</a></li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">已完成</a></li>
					</ul>
				</div>
			</div>
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">按最后回复排序</a></li>
						<li class="mui-table-view-cell"><a href="#">按发起时间排序</a></li>
						<li class="mui-table-view-cell"><a href="#">按完成时间排序</a></li>
					<ul class="mui-table-view mui-table-view-radio">
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">按最后回复排序</a></li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">按发起时间排序</a></li>
						<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">按完成时间排序</a></li>
					</ul>
				</div>
			</div>

app/html/proinforupdate.html

		    </div>
		     <div class="mui-input-group mainbox">
				<div class="maincon">
			       <div class="infocontit">合作资源<a class="updatebox mui-clearfix" href=".html"><em class="updatebtn mui-pull-left"></em><span class="mui-pull-left">点击修改</span></a></div> 
			       <div class="infocontit">合作资源<a class="addinfobox mui-clearfix" style="right:1% ;" href="resinforupdate.html"><em class="addinfobtn mui-pull-left"></em><span class="mui-pull-left">点击添加</span></a></div> 
			       <div class="infocon">
				       <ul class="mui-table-view resinfo">
				            <li class="mui-table-view-cell mui-media">
				                <a class="proinfor" href="resinforbrow.html">
				                <a class="proinfor" href="resinforupdate.html">
				                    <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
				                    <div class="mui-media-body">
				                        <span class="listtit">资源名称</span>	
				                        <span class="listtit">资源名称<div class="updatebox" style="top:6px;right:6px;"><em class="updatebtn"></em></div></span>	
				                        <p class="listtit2">应用用途XXXXXXX</p>
				                    	<p class="listtit3 resbrief">
				                    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan
				                </a>
				            </li>
				            <li class="mui-table-view-cell mui-media">
				                <a class="proinfor" href="resinforbrow.html">
				                <a class="proinfor" href="resinforupdate.html">
				                    <img class="mui-media-object mui-pull-left resimg" src="../images/default-resource.jpg">
				                    <div class="mui-media-body">
				                        <span class="listtit">资源名称</span>	
				                        <span class="listtit">资源名称<div class="updatebox" style="top:8px;right:6px;"><em class="updatebtn"></em></div></span>	
				                        <p class="listtit2">应用用途XXXXXXX</p>
				                    	<p class="listtit3 resbrief">
				                    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan

app/html/resinforupdate.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/app.css" rel="stylesheet" />
		<style>
			body{background: #FFFFFF;}
			.mui-content{ background: #FFFFFF;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav toptitbox">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
		    <h1 class="mui-title toptit">合作资源</h1>
		    <span class="mui-pull-right topsave">保存</span>
		</header>
		
		<!-- 主页面内容容器 -->
    	<div class="mui-content">
    		<!-- 主界面具体展示内容 -->
    		<div class="mui-input-group marginbox resoubox">
    			<table>
	            	<tr>
	                	<td>
	                		<div class="resouimgbox">
								<img src="../images/default-resource.jpg"/>
							</div>
	                        <div class="resouinfoword">
	                        	<div class="resouinfobox">
									<div class="maincon" style="margin: 0;padding:0;">
										<ul class="basicinfo" style="margin: 0;padding:0;">
											<li><label>资源名称</label></li>
											<li class="basicfrm"><input type="text" name="comname" class="mui-input-clear frmtype"></li>
											<li><label>应用用途</label></li>
											<li class="basicfrm">
												<div class="textareabox" contenteditable="true"></div> 
											</li>
											<li><label>学术领域</label></li>
											<li class="basicfrm">
												<div class="textareabox" contenteditable="true"></div> 
											</li>
											<li><label>应用行业</label></li>
											<li class="basicfrm">
												<div class="textareabox" contenteditable="true"></div> 
											</li>
											<li><label>详细描述</label></li>
											<li class="basicfrm">
												<div class="textareabox" contenteditable="true"></div> 
											</li>
											<li><label>合作备注</label></li>
											<li class="basicfrm">
												<div class="textareabox" contenteditable="true"></div> 
											</li>
										</ul>
								        <div class="mui-input-group">
											<button class="mui-btn mui-btn-block frmbtn exitbtn">删除此合作资源</button>
									    </div>
							        </div>
								</div>
	                         </div>
	                     </td>
	                 </tr>
	           </table>
		    </div>
			
        </div>
		
		
		<script src=" ../js/public/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>
</html>

app/html/search-pro.html

	<!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav toptitbox">
    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
        <div class="searchbox2">
        <div class="searchbox2 mui-pull-right">
        	<div class="mui-pull-left searchselect">
	        	<select class="mui-select">
	        		<option>专家</option>
	        		<option>资源</option>
	        	</select>
	        	<div class="simuselect">
                	<div class="ulbox lookwho" id="div_select">专家</div> 
					<ul id="li_show" class="lishow"> 
					    <li>专家</li> 
					    <li>资源</li> 
					</ul>
				</div>
	        	<em class="mui-icon mui-icon-arrowdown"></em>
		    </div>
		    <input type="text" class="mui-input-clear mui-pull-left searchtxt2" placeholder="搜索专家、设备资源">
		    <input type="text" class="mui-input-clear mui-pull-right searchtxt2" placeholder="搜索专家、设备资源">
        </div>
	</header>
	
    <!-- 主页面内容容器 -->
    <div class="mui-content">
    <div class="mui-content menublock">
    	<!-- 主界面具体展示内容 -->
		<div class="filterbox">
			<ul class="filterblock">
				<li>
					<button id='showCityPicker' class="mui-btn mui-btn-block filterlist" type='button'>
						<span id='cityResult' class="ui-alert">河北省</span>
						<em class="mui-icon mui-icon-arrowdown"></em>
					</button>
					
				<li style="width:36%;">
					<a href="#middlePopovercity" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>全国</span><em class="mui-icon mui-icon-arrowdown"></em></a>	
				</li>
				<li>
					<button class="mui-btn mui-btn-block filterlist" type='button'>学术领域<em class="mui-icon mui-icon-arrowdown"></em></button>
				<li style="width:25%;">
					<a href="#middlePopoveracad" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>学术领域</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
				<li>
					<button class="mui-btn mui-btn-block filterlist" type='button'>应用行业<em class="mui-icon mui-icon-arrowdown"></em></button>
				<li style="width:25%;">
					<a href="#middlePopoveruse" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>应用行业</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
			</ul>
		</div>
	            </li>
	        </ul>
		</div>
		<a id="scrollToTop" class="backTop hide"> <span class="mui-icon mui-icon-arrowup"></span> </a>
		<div class=" mui-row mui-popover mui-fullscreen menuposition" id="middlePopovercity">
			<div class="mui-col-xs-4">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-8" style="border-left: 1px solid #d6d6d6; background-color: #FFFFFF;">
				<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>
		<div id="middlePopoveracad" class="mui-popover popoverbox2">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
						<li class="mui-table-view-cell"><a href="#">材料失效与保护</a></li>
						<li class="mui-table-view-cell"><a href="#">材料表面与界面</a></li>
						<li class="mui-table-view-cell"><a href="#">黑色金属及其合金</a></li>
						<li class="mui-table-view-cell"><a href="#">金属材料</a></li>
						<li class="mui-table-view-cell"><a href="#">有色金属及其合金</a></li>
						<li class="mui-table-view-cell"><a href="#">材料检测与分析技术</a></li>
						<li class="mui-table-view-cell"><a href="#">材料失效与保护</a></li>
						<li class="mui-table-view-cell"><a href="#">材料表面与界面</a></li>
						<li class="mui-table-view-cell"><a href="#">黑色金属及其合金</a></li>
						<li class="mui-table-view-cell"><a href="#">金属材料</a></li>
						<li class="mui-table-view-cell"><a href="#">有色金属及其合金</a></li>
						<li class="mui-table-view-cell"><a href="#">材料检测与分析技术</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="middlePopoveruse" class="mui-popover popoverbox2">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
						<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
						<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
					</ul>
				</div>
			</div>
		</div>
		
    </div>
    <script src="../js/public/mui.min.js"></script>
    <script src="../js/public/mui.picker.min.js"></script>
	<script src="../js/public/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/public/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		(function($, doc) {
				$.init();
				$.ready(function() {
					//-----------------------------------------
					//级联示例
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('showCityPicker');
					var cityResult = doc.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							cityResult.innerText = items[0].text ;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
				});
			})(mui, document);
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			//-------------------------------
			//筛选添加弹出菜单
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
			
			//搜专家搜资源的下拉选择框
			var showblock = document.getElementById("li_show"); 
			var selectblock = document.getElementById("div_select");
			selectblock.addEventListener('tap',function(){
				showmenu();
			});
			
			mui("#li_show").on('tap','li',function(){
				//liindex = this.getAttribute("index");
				selectThis(this.innerHTML);
			});
			
			function selectThis(value){
				selectblock.innerHTML=value; 
				showblock.style.display = 'none'; 
				} 
				
			function showmenu(){ 
			   showblock.style.display = 'block'; 
			} 
        	//-----city--------------------------
			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>	
	</script>      	 
</body>
</html>

app/html/search-res.html

	<!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav toptitbox">
    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
        <div class="searchbox2">
        <div class="searchbox2 mui-pull-right">
        	<div class="mui-pull-left searchselect">
	        	<select class="mui-select">
	        		<option>专家</option>
	        		<option>资源</option>
	        	</select>
	        	<div class="simuselect">
                	<div class="ulbox lookwho" id="div_select">专家</div> 
					<ul id="li_show" class="lishow"> 
					    <li>专家</li> 
					    <li>资源</li> 
					</ul>
				</div>
	        	<em class="mui-icon mui-icon-arrowdown"></em>
		    </div>
		    <input type="text" class="mui-input-clear mui-pull-left searchtxt2" placeholder="搜索专家、设备资源">
		    <input type="text" class="mui-input-clear mui-pull-right searchtxt2" placeholder="搜索专家、设备资源">
        </div>
	</header>
	
					</button>
					
				</li>
				<li>
					<button id='showAcadPicker' class="mui-btn mui-btn-block filterlist" type='button'>
						<span id='acadResult' class="ui-alert">学术领域</span>
						<em class="mui-icon mui-icon-arrowdown"></em>
					</button>
				<li style="width:25%;">
					<a href="#middlePopoveracad" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>学术领域</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
				<li>
					<button class="mui-btn mui-btn-block filterlist" type='button'>
						应用行业
						<em class="mui-icon mui-icon-arrowdown"></em>
					</button>
				<li style="width:25%;">
					<a href="#middlePopoveruse" class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span>应用行业</span><em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
			</ul>
		</div>
	            </li>
	        </ul>
		</div>
		<a id="scrollToTop" class="backTop hide"> <span class="mui-icon mui-icon-arrowup"></span> </a>
		
		<div id="middlePopoveracad" class="mui-popover popoverbox2">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
						<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
						<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
						<li class="mui-table-view-cell"><a href="#">全部</a></li>
						<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
						<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
						<li class="mui-table-view-cell"><a href="#">全部</a></li>
						<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
						<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
						<li class="mui-table-view-cell"><a href="#">全部</a></li>
						<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
						<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="middlePopoveruse" class="mui-popover popoverbox2">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a class="mui-active" href="#">不限</a></li>
						<li class="mui-table-view-cell"><a href="#">我的需求</a></li>
						<li class="mui-table-view-cell"><a href="#">收到咨询</a></li>
					</ul>
				</div>
			</div>
		</div>
    </div>
    <script src="../js/public/mui.min.js"></script>
    <script src="../js/public/mui.picker.min.js"></script>
	<script src="../js/public/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/public/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		(function($, doc) {
				$.init();
				$.ready(function() {
					//-----------------------------------------
					//级联示例
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('showCityPicker');
					var cityResult = doc.getElementById('cityResult');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							cityResult.innerText = items[1].text ;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
					
					//级联示例
					var acadPicker = new $.PopPicker();
					acadPicker.setData([{
						value: 'ywj',
						text: '1'
					}, {
						value: 'aaa',
						text: '2'
					}, {
						value: 'lj',
						text: '3'
					}, {
						value: 'ymt',
						text: '4'
					}, {
						value: 'shq',
						text: '5'
					}, {
						value: 'zhbh',
						text: '6'
					}, {
						value: 'zhy',
						text: '7'
					}, {
						value: 'gyf',
						text: '8'
					}, {
						value: 'zhz',
						text: '9'
					}, {
						value: 'gezh', 
						text: '10'
					}]);
					var showAcadPickerButton = doc.getElementById('showAcadPicker');
					var acadResult = doc.getElementById('acadResult');
					showAcadPickerButton.addEventListener('tap', function(event) {
						acadPicker.show(function(items) {
							acadResult.innerText = items[0].text;
							//acadResult.innerText = JSON.stringify(items[0]);
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//-----------------------------------------
				});
			})(mui, document);
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		//-------------------------------
		//筛选添加弹出菜单
		mui('.mui-scroll-wrapper').scroll();
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		//-------------------------------------------
		//搜专家搜资源的下拉选择框
		var showblock = document.getElementById("li_show"); 
		var selectblock = document.getElementById("div_select");
		selectblock.addEventListener('tap',function(){
			showmenu();
		});
		
		mui("#li_show").on('tap','li',function(){
			//liindex = this.getAttribute("index");
			selectThis(this.innerHTML);
		});
		
		function selectThis(value){
			selectblock.innerHTML=value; 
			showblock.style.display = 'none'; 
			} 
			
		function showmenu(){ 
		   showblock.style.display = 'block'; 
		} 
	</script>    	 
</body>
</html>