jQuery ui input滑动条制作房屋表单搜索条件滑动条



126 500 167



特效描述:滑动条制作 房屋表单 搜索条件滑动条,jQuery ui房屋表单搜索条件功能,制作input滑动条效果,通过滑动条来获取设置input值进行房屋表单搜索条件检索功能。

代码结构

1. 引入CSS

<link type="text/css" href="css/style.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>



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


热门标签: 拖动 拖拽 拖动插件 拖拽插件 切换按钮 表单 表单美化 表单插件 表单美化插件 图片拖动 图片拖拽 搜索框 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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