jquery制作酒店房子多条件筛选代码



237 945 316



特效描述:jquery 多条件筛选 酒店房子筛选 筛选,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="style/list.css"/>
<link rel="stylesheet" type="text/css" href="style/manhuaDate.1.0.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="js/ui.tab.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript" src="js/shaixuan.js"></script>

3. HTML代码

<div style="width:980px;margin:20px auto 0 auto;">
	<div class="list-screen">
		<div class="screen-top" style="position:relative;">
			<span>目的地<input id="txtadress" type="text"/></span>
			<span>入住<input type="text" class="mh_date" readonly="true" /></span>
			<span>退房<input type="text" class="mh_date" readonly="true" /></span>
			<span>酒店位置<input type="text" class="ju-adress"  /></span>
			<span>酒店名称<input type="text" class="ju-name" /></span>
			<a href="#" id="submit-btn"/>搜索</a>
		</div>
		<div style="padding:10px 30px 10px 10px;">
			<div class="screen-address">
				<div class="list-tab">
					<div id="demo1" class="clearfix">
						<div class="jiud-name">酒店位置</div>
						<div class="ui-tab-container">
							<ul class="clearfix ui-tab-list">
								<li class="ui-tab-active">景点</li>
								<li>交通枢纽</li>
								<li>地铁周边</li>
								<li>行政区</li>
							</ul>
							<div class="ui-tab-bd">
								<div class="ui-tab-content clearfix">
									<ul class="clearfix ui-tab-list2">
										<li class="ui-tab-active">景点</li>
										<li>交通枢纽</li>
									</ul>
									<div class="ui-tab-bd">
										<div class="ui-tab-content2 clearfix">
											<p><label><input name="tabrad1" type="radio" value="" />琶洲展馆</label></p>
											<p><label><input name="tabrad1" type="radio" value="" />淘金/环市东</label></p>
										</div>
										<div class="ui-tab-content2 clearfix" style="display:none">
											<p><label><input name="tabrad1" type="radio" value="" />淘金/环市东</label></p>
										</div>
									</div>
								</div>
								<div class="ui-tab-content clearfix" style="display:none">
									<p><label><input name="tabrad1" type="radio" value="" />琶洲展馆</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />淘金/环市东 </label></p>
									<p><label><input name="tabrad1" type="radio" value="" />广州东站/天河北</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />北京路/海珠广场</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />珠江新城/跑马场 </label></p>
									<p><label><input name="tabrad1" type="radio" value="" />长隆景区/广州南站</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />沙面/上下九步行</label></p>
								</div>
								<div class="ui-tab-content clearfix" style="display:none">
									<p><label><input name="tabrad1" type="radio" value="" />琶洲展馆</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />淘金/环市东 </label></p>
									<p><label><input name="tabrad1" type="radio" value="" />广州东站/天河北</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />北京路/海珠广场</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />珠江新城/跑马场 </label></p>
									<p><label><input name="tabrad1" type="radio" value="" />长隆景区/广州南站</label></p>
									<p><label><input name="tabrad1" type="radio" value="" />沙面/上下九步行</label></p>
								</div>
								<div class="ui-tab-content clearfix" style="display:none">
									<p><input name="tabrad1" type="radio" value="" />琶洲展馆</p>
									<p><input name="tabrad1" type="radio" value="" />淘金/环市东 </p>
									<p><input name="tabrad1" type="radio" value="" />广州东站/天河北</p>
									<p><input name="tabrad1" type="radio" value="" />北京路/海珠广场</p>
									<p><input name="tabrad1" type="radio" value="" />珠江新城/跑马场 </p>
									<p><input name="tabrad1" type="radio" value="" />长隆景区/广州南站</p>
									<p><input name="tabrad1" type="radio" value="" />沙面/上下九步行</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="screen-term">
				<div class="selectNumberScreen">
					<div id="selectList" class="screenBox screenBackground">
						<dl class="listIndex">
							<dt>酒店价格</dt>
							<dd>
								<label><a href="javascript:;" attrval="不限">不限</a></label>
								<label><input name="radio2" type="radio" value="" /><a href="javascript:;" values2="99" values1="1" attrval="1-99">100元以下</a></label>
								<label><input name="radio2" type="radio" value="" /><a href="javascript:;" values2="300" values1="100" attrval="100-300">100-300元 </a></label>
								<label><input name="radio2" type="radio" value="" /><a href="javascript:;" values2="600" values1="300" attrval="300-600">300-600元</a></label>
								<label><input name="radio2" type="radio" value="" /><a href="javascript:;" values2="1500" values1="600" attrval="5000以上">600-1500元</a></label>
								<div class="custom"><span>自定义</span>&nbsp;<input name="" type="text" id="custext1"/>&nbsp;-&nbsp;<input name="" type="text" id="custext2"/><input name="" type="button" id="cusbtn"/></div>
							</dd>
						</dl>
						<dl class="listIndex">
							<dt>酒店星级</dt>
							<dd>
								<label><a href="javascript:;" attrval="不限">不限</a> </label>
								<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;"> 五星/豪华</a></label>
								<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;">四星/高档</a></label>
								<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;">三星/舒适</a></label>
							</dd>
						</dl>
						<dl class="listIndex">
						<dt>主题风格</dt>
							<dd>
								<label><a href="javascript:;" attrval="不限">不限</a></label>
								<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;">客栈</a></label>
								<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;">精品酒店</a> </label>
								<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;">情侣酒店</a> </label>
								<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;">园林庭院</a></label>
								<span class="more"><em class="open"></em>更多</span>
							</dd> 
						</dl>
						<dl class="listIndex more-none" style="display:none;border:none">
						<dt>主题风格</dt>
						<dd>
							<label><a href="javascript:;" attrval="不限">不限</a></label>
							<form action="" method="get"> 
								<label><input name="checkbox3" type="checkbox" value="" /><a href="javascript:;">精品酒店2</a></label>
								<label><input name="checkbox3" type="checkbox" value="" /><a href="javascript:;">精品酒店3</a> </label> 
								<label><input name="checkbox3" type="checkbox" value="" /><a href="javascript:;">精品酒店4</a> </label>  
							</form> 
						</dl>
					</div>
				</div>   
			</div>
		</div>
		<div class="hasBeenSelected clearfix">
			<span id="time-num"><font>208</font>家酒店</span>
			<div style="float:right;" class="eliminateCriteria">【清空全部】</div>
			<dl>
				<dt>已选条件:</dt>
				<dd style="display:none" class="clearDd">
					<div class="clearList"></div>
				</dd>
			</dl>
		</div>
		<script type="text/javascript" src="js/shaixuan.js"></script> 
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 切换按钮 form表单 文本框 复选 单选 列表切换 添加删除 添加标签

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到