Lập trình - Áo Hai Dây

Hôm nay mình giới thiệu cho các bạn về slider control. Các bạn có thể xem chi tiết hơn ở trang web của Flamentgroup.

Slider 1 

<div id="slider1"><select name="speed"><option value="Slower">Slower</option><option value="Slow">Slow</option><option value="Med">Med</option><option value="Fast">Fast</option><option value="Faster">Faster</option></select></div> <script type="text/javascript">$(function(){  $('#slider1').makeSlider('firstLast', 160); // enable pacing slider }); </script> 

Slider 2

 <div id="slider2">  <label for="valueA" class="sentence">From:</label>  <select name="valueA" id="valueA">   <optgroup label="Morning">    <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>   </optgroup>   <optgroup label="Evening">    <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>   </optgroup>  </select> 

  <label for="valueB" class="sentence">To:</label>  <select name="valueB" id="valueB">   <optgroup label="Morning">    <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>   </optgroup>   <optgroup label="Evening">    <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" selected="selected">6:00</option>    <option value="7pm">7:00</option>    <option value="8pm">8:00</option>   </optgroup>  </select> </div><script type="text/javascript"> $(function(){  $('#slider2').makeSlider(2, 380); // enable time slider }); </script> 

minh.tran Javascript, Lập trình web, jQuery Slider http://www.filamentgroup.com/lab/developing_an_accessible_slider/#When:20:08:00Z

Ðược xem 1229 lần, 2 hôm nay