<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demo Page: Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider</title>
<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>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />
<style type="text/css">
body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }
fieldset { border:0; margin: 6em; height: 12em;}
label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
select {margin-right: 1em; float: left;}
.ui-slider {clear: both; top: 5em;}
</style>
<script type="text/javascript">
$(function(){
//demo 1
var abc = $('select#speed').selectToUISlider().next();
//demo 2
$('select#valueA, select#valueB').selectToUISlider();
//demo 3
$('select#valueAA, select#valueBB').selectToUISlider({
labels: 12
});
//fix color
fixToolTipColor();
});
//purely for theme-switching demo... ignore this unless you're using a theme switcher
//quick function for tooltip color match
function fixToolTipColor(){
//grab the bg color from the tooltip content - set top border of pointer to same
$('.ui-tooltip-pointer-down-inner').each(function(){
var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
$(this).css('border-top', bWidth+' solid '+bColor);
});
}
</script>
<!-- jQuery UI theme switcher -->
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
<script type="text/javascript"> $(function(){ $('<div style="position: absolute; right: 20px; margin-top: -40px" />').appendTo('body').themeswitcher({onSelect: function(){ setTimeout(fixToolTipColor, 800); }}); });</script>
</head>
<body>
<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="v
jQuery实现滑块选择日期.zip
版权申诉
35 浏览量
2022-11-21
11:33:12
上传
评论
收藏 178KB ZIP 举报
jQuery实现滑块选择日期.zip （37个子文件） 
jQuery实现滑块选择日期 jQueryUISlider css 
ui.slider.extras.css 2KB redmond images 
ui-bg_glass_75_d0e5f5_1x400.png 124B ui-bg_inset-hard_100_f5f8f9_1x100.png 104B ui-bg_glass_85_dfeffc_1x400.png 123B ui-icons_cd0a0a_256x240.png 4KB ui-bg_flat_55_fbec88_40x100.png 182B ui-bg_gloss-wave_55_5c9ccc_500x100.png 3KB ui-icons_217bc0_256x240.png 4KB ui-icons_6da8d5_256x240.png 4KB ui-bg_flat_0_aaaaaa_40x100.png 180B ui-icons_f9bd01_256x240.png 4KB ui-bg_inset-hard_100_fcfdfd_1x100.png 88B ui-icons_d8e7f3_256x240.png 4KB ui-icons_469bdd_256x240.png 4KB ui-icons_2e83ff_256x240.png 4KB ui-bg_glass_95_fef1ec_1x400.png 119B jquery-ui-1.7.1.custom.css 27KB images aaaaaa_40x100_textures_01_flat_0.png 180B d8e7f3_256x240_icons_icons.png 10KB dfeffc_40x100_textures_02_glass_85.png 227B 469bdd_256x240_icons_icons.png 10KB 217bc0_256x240_icons_icons.png 13KB d0e5f5_40x100_textures_02_glass_75.png 235B 5c9ccc_500x100_textures_12_gloss_wave_55.png 3KB 2e83ff_256x240_icons_icons.png 10KB f9bd01_256x240_icons_icons.png 10KB cd0a0a_256x240_icons_icons.png 10KB fcfdfd_40x100_textures_06_inset_hard_100.png 202B f5f8f9_40x100_textures_06_inset_hard_100.png 215B fbec88_40x100_textures_01_flat_55.png 182B fef1ec_40x100_textures_02_glass_95.png 235B 6da8d5_256x240_icons_icons.png 10KB
index.html 11KB js selectToUISlider.jQuery.js 8KB jquery-ui-1.7.1.custom.min.js 17KB jquery-1.3.2.min.js 56KB
jQuery实现滑块选择日期.jpg 42KB资源评论
