jQuery ui input滑動條制作房屋表單搜索條件滑動條



131 520 174



特效描述:滑動條制作 房屋表單 搜索條件滑動條,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

加群請備注:從官網了解到

老夫子电子