利用jquery实现搜索条件滑动条



13 51 18



特效描述:利用jquery实现 搜索条件 滑动条,利用jquery实现搜索条件滑动条

代码结构

1. 引入CSS

<link type="text/css" href="css/e.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="js/jQuery.peSlider.js"></script>

3. HTML代码

<!--演示内容开始-->
<form method="get" action="#">
	<fieldset id="criteria">
		<legend><span>公寓标准</span></legend>
		<div class="question">
			<label for="price">租金 ($):</label>
			<input type="number" name="price" id="price" value="2000" min="0" max="5000" size="4" data-units="dollars" />
		</div>
		<div class="question">
			<label for="bedrooms">卧室:</label>
			<input type="number" name="bedrooms" id="bedrooms" value="2" min="0" max="10" size="2" data-units="bedrooms" />
		</div>
		<div class="question">
			<label for="baths">浴室:</label>
			<input type="number" name="baths" id="baths" value="2" min="0" max="10" size="2" data-units="baths" />
		</div>
	</fieldset>
	<fieldset id="amenities">
		<legend><span>设施需求</span></legend>	
		<div class="question">
			<label for="subway">地铁附近:</label>
			<select name="subway" id="subway">
				<option value="a">不重要</option>
				<option value="b">比较重要</option>
				<option value="c">很重要</option>
				<option value="d">必须有</option>
			</select>
		</div>
		<div class="question">
			<label for="water">环境:</label>
			<select name="water" id="water">
				<option value="a">不重要</option>
				<option value="b">比较重要</option>
				<option value="c">很重要</option>
				<option value="d">必须有</option>
			</select>
		</div>
		<div class="question">
			<label for="walking">路程:</label>
			<select name="walking" id="walking">
				<option value="a">不重要</option>
				<option value="b">比较重要</option>
				<option value="c">很重要</option>
				<option value="d">必须有</option>
			</select>
		</div>
	</fieldset>
	<input type="submit" name="search" id="search" value="搜索公寓" />
</form>
<script type="text/javascript">
$(function(){
	//创建输入滑杆
	$('input#price').peSlider({range: 'min'});
	$('input#bedrooms,input#baths').peSlider({range: 'min'});
	//创建选择滑块
	$('select').attr('aria-hidden','true').after('<div class="slider-status" aria-hidden="true"></div>').peSlider({
		slide:function(e,ui){
			$(this).next().next().text($(this).find('a:eq(0)').attr('aria-valuetext'));
		}
	}).each(function(){
		$(this).next().text($(this).prev().find('a:eq(0)').attr('aria-valuetext'));
	});
	//添加选择的标签
	$('<div class="sliders-labels" aria-hidden="true"><span class="label-first">'+ $('#subway option:first').text() +'</span><span class="label-last">'+ $('#subway option:last').text() +'</span></div>').insertAfter('#amenities legend');
});
</script>
<!--演示内容结束-->
<br>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 按钮控制
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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