利用jQuery實現滑塊選擇日期



14 53 18



特效描述:利用jQuery實現 滑塊選擇日期,利用jQuery實現滑塊選擇日期

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>

3. HTML代碼

	<form action="#">
		<!-- demo 1 -->
		<fieldset>
			<label for="speed">Select a Speed:</label>
			<select name="speed" id="speed">
				<option value="Slower">Slower</option>
				<option value="Slow">Slow</option>
				<option value="Med" selected="selected">Med</option>
				<option value="Fast">Fast</option>
				<option value="Faster">Faster</option>
			</select>
		</fieldset>
		<!-- demo 2 -->
		<fieldset>
			<label for="valueA">From:</label>
			<select name="valueA" id="valueA">
				<option value="6am">6:00</option>
				<option value="7am">7:00</option>
				<option value="8am">8:00</option>
				<option value="9am" selected="selected">9:00</option>
				<option value="10am">10:00</option>
				<option value="11am">11:00</option>
				<option value="Noon">Noon</option>
				<option value="1pm">1:00</option>
				<option value="2pm">2:00</option>
				<option value="3pm">3:00</option>
				<option value="4pm">4:00</option>
				<option value="5pm">5:00</option>
				<option value="6pm">6:00</option>
				<option value="7pm">7:00</option>
				<option value="8pm">8:00</option>
				<option value="9pm">9:00</option>
				<option value="10pm">10:00</option>
				<option value="11pm">11:00</option>
				<option value="12pm">12:00</option>
			</select>
			<label for="valueB">To:</label>
			<select name="valueB" id="valueB">
				<option value="6am">6:00</option>
				<option value="7am">7:00</option>
				<option value="8am">8:00</option>
				<option value="9am">9:00</option>
				<option value="10am">10:00</option>
				<option value="11am">11:00</option>
				<option value="Noon">Noon</option>
				<option value="1pm">1:00</option>
				<option value="2pm">2:00</option>
				<option value="3pm">3:00</option>
				<option value="4pm">4:00</option>
				<option value="5pm">5:00</option>
				<option value="6pm">6:00</option>
				<option value="7pm">7:00</option>
				<option value="8pm">8:00</option>
				<option value="9pm" selected="selected">9:00</option>
				<option value="10pm">10:00</option>
				<option value="11pm">11:00</option>
				<option value="12pm">12:00</option>
			</select>
		</fieldset>
		<!-- demo 3 -->
		<fieldset>
			<label for="valueAA">From:</label>
			<select name="valueAA" id="valueAA">
				<optgroup label="2003">
					<option value="01/03">Jan 03</option>
					<option value="02/03">Feb 03</option>
					<option value="03/03">Mar 03</option>
					<option value="03/03">Apr 03</option>
					<option value="03/03">May 03</option>
					<option value="06/03">Jun 03</option>
					<option value="07/03">Jul 03</option>
					<option value="08/03" selected="selected">Aug 03</option>
					<option value="09/03">Sep 03</option>
					<option value="10/03">Oct 03</option>
					<option value="11/03">Nov 03</option>
					<option value="12/03">Dec 03</option>
				</optgroup>
				<optgroup label="2004">
					<option value="01/04">Jan 04</option>
					<option value="02/04">Feb 04</option>
					<option value="03/04">Mar 04</option>
					<option value="04/04">Apr 04</option>
					<option value="04/04">May 04</option>
					<option value="06/04">Jun 04</option>
					<option value="07/04">Jul 04</option>
					<option value="08/04">Aug 04</option>
					<option value="09/04">Sep 04</option>
					<option value="10/04">Oct 04</option>
					<option value="11/04">Nov 04</option>
					<option value="12/04">Dec 04</option>
				</optgroup>
				<optgroup label="2005">
					<option value="01/05">Jan 05</option>
					<option value="02/05">Feb 05</option>
					<option value="03/05">Mar 05</option>
					<option value="04/05">Apr 05</option>
					<option value="05/05">May 05</option>
					<option value="06/05">Jun 05</option>
					<option value="07/05">Jul 05</option>
					<option value="08/05">Aug 05</option>
					<option value="09/05">Sep 05</option>
					<option value="10/05">Oct 05</option>
					<option value="11/05">Nov 05</option>
					<option value="12/05">Dec 05</option>
				</optgroup>
				<optgroup label="2006">
					<option value="01/06">Jan 06</option>
					<option value="02/06">Feb 06</option>
					<option value="03/06">Mar 06</option>
					<option value="04/06">Apr 06</option>
					<option value="06/06">May 06</option>
					<option value="06/06">Jun 06</option>
					<option value="07/06">Jul 06</option>
					<option value="08/06">Aug 06</option>
					<option value="09/06">Sep 06</option>
					<option value="10/06">Oct 06</option>
					<option value="11/06">Nov 06</option>
					<option value="12/06">Dec 06</option>
				</optgroup>
				<optgroup label="2007">
					<option value="01/07">Jan 07</option>
					<option value="02/07">Feb 07</option>
					<option value="03/07">Mar 07</option>
					<option value="04/07">Apr 07</option>
					<option value="07/07">May 07</option>
					<option value="07/07">Jun 07</option>
					<option value="07/07">Jul 07</option>
					<option value="08/07">Aug 07</option>
					<option value="09/07">Sep 07</option>
					<option value="10/07">Oct 07</option>
					<option value="11/07">Nov 07</option>
					<option value="12/07">Dec 07</option>
				</optgroup>
				<optgroup label="2008">
					<option value="01/08">Jan 08</option>
					<option value="02/08">Feb 08</option>
					<option value="03/08">Mar 08</option>
					<option value="04/08">Apr 08</option>
					<option value="08/08">May 08</option>
					<option value="08/08">Jun 08</option>
					<option value="08/08">Jul 08</option>
					<option value="08/08">Aug 08</option>
					<option value="09/08">Sep 08</option>
					<option value="10/08">Oct 08</option>
					<option value="11/08">Nov 08</option>
					<option value="12/08">Dec 08</option>
				</optgroup>
			</select>
			<label for="valueBB">To:</label>
			<select name="valueBB" id="valueBB">
				<optgroup label="2003">
					<option value="01/03">Jan 03</option>
					<option value="02/03">Feb 03</option>
					<option value="03/03">Mar 03</option>
					<option value="03/03">Apr 03</option>
					<option value="03/03">May 03</option>
					<option value="06/03">Jun 03</option>
					<option value="07/03">Jul 03</option>
					<option value="08/03">Aug 03</option>
					<option value="09/03">Sep 03</option>
					<option value="10/03">Oct 03</option>
					<option value="11/03">Nov 03</option>
					<option value="12/03">Dec 03</option>
				</optgroup>
				<optgroup label="2004">
					<option value="01/04">Jan 04</option>
					<option value="02/04">Feb 04</option>
					<option value="03/04">Mar 04</option>
					<option value="04/04">Apr 04</option>
					<option value="04/04">May 04</option>
					<option value="06/04">Jun 04</option>
					<option value="07/04">Jul 04</option>
					<option value="08/04">Aug 04</option>
					<option value="09/04">Sep 04</option>
					<option value="10/04">Oct 04</option>
					<option value="11/04">Nov 04</option>
					<option value="12/04">Dec 04</option>
				</optgroup>
				<optgroup label="2005">
					<option value="01/05">Jan 05</option>
					<option value="02/05">Feb 05</option>
					<option value="03/05">Mar 05</option>
					<option value="04/05">Apr 05</option>
					<option value="05/05">May 05</option>
					<option value="06/05">Jun 05</option>
					<option value="07/05">Jul 05</option>
					<option value="08/05">Aug 05</option>
					<option value="09/05">Sep 05</option>
					<option value="10/05">Oct 05</option>
					<option value="11/05">Nov 05</option>
					<option value="12/05">Dec 05</option>
				</optgroup>
				<optgroup label="2006">
					<option value="01/06">Jan 06</option>
					<option value="02/06">Feb 06</option>
					<option value="03/06">Mar 06</option>
					<option value="04/06">Apr 06</option>
					<option value="06/06">May 06</option>
					<option value="06/06">Jun 06</option>
					<option value="07/06">Jul 06</option>
					<option value="08/06">Aug 06</option>
					<option value="09/06">Sep 06</option>
					<option value="10/06">Oct 06</option>
					<option value="11/06">Nov 06</option>
					<option value="12/06">Dec 06</option>
				</optgroup>
				<optgroup label="2007">
					<option value="01/07">Jan 07</option>
					<option value="02/07">Feb 07</option>
					<option value="03/07">Mar 07</option>
					<option value="04/07">Apr 07</option>
					<option value="07/07">May 07</option>
					<option value="07/07">Jun 07</option>
					<option value="07/07">Jul 07</option>
					<option value="08/07" selected="selected">Aug 07</option>
					<option value="09/07">Sep 07</option>
					<option value="10/07">Oct 07</option>
					<option value="11/07">Nov 07</option>
					<option value="12/07">Dec 07</option>
				</optgroup>
				<optgroup label="2008">
					<option value="01/08">Jan 08</option>
					<option value="02/08">Feb 08</option>
					<option value="03/08">Mar 08</option>
					<option value="04/08">Apr 08</option>
					<option value="08/08">May 08</option>
					<option value="08/08">Jun 08</option>
					<option value="08/08">Jul 08</option>
					<option value="08/08">Aug 08</option>
					<option value="09/08">Sep 08</option>
					<option value="10/08">Oct 08</option>
					<option value="11/08">Nov 08</option>
					<option value="12/08">Dec 08</option>
				</optgroup>
			</select>
		</fieldset>
	</form>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 收縮菜單 收縮導航 右鍵菜單 導航切換 菜單切換 浮動菜單 浮動導航 滑動導航菜單 滑動導航 滑動菜單 滾動導航菜單 滾動菜單 滾動導航 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 文字提示框 提示文字 下拉列表 下拉菜單 下拉導航 下拉導航菜單 下拉菜單導航 響應式下拉菜單 提示框/彈出層 時間日期插件 時間日期
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

湖北30选5开奖结果走势图表