利用jQuery实现滑块选择日期



53 210 71



特效描述:利用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>



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


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 弹出层拖动 窗口提示框 日历日期时间 导航菜单导航条 文字提示框 下拉导航菜单 提示框/弹出层 时间日期插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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