VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • HTML5 教程之Foundation 滑块

Foundation 滑块允许用户通过拖动来选取区间值:

滑块可以通过使用 <div class="range-slider" data-slider> 创建。在<div> 内, 添加两个 <span> 元素:<span class="range-slider-handle"> 创建矩形滑块(蓝色背景),<span class="range-slider-active-segment"> 是在滑块后的灰色横条,是滑块拖动区域。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:

实例


	
  1. <div class="range-slider" data-slider>
  2.   <span class="range-slider-handle"></span>
  3.   <span class="range-slider-active-segment"></span>
  4. </div>
  5.  
  6. <!-- Initialize Foundation JS -->
  7. <script>
  8. $(document).ready(function() {
  9.     $(document).foundation();
  10. })
  11. </script>
复制
实例预览 »

圆角和禁用滑块

使用 .radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块:

实例


	
  1. <div class="range-slider" data-slider>..</div>
  2. <div class="range-slider radius" data-slider>...</div>
  3. <div class="range-slider round" data-slider>...</div>
  4. <div class="range-slider disabled" data-slider>...</div>
复制
实例预览 »

垂直滑块

使用 .vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块:

实例


	
  1. <div class="range-slider vertical-range" data-slider data-options="vertical: true;">
  2.   <span class="range-slider-handle"></span>
  3.   <span class="range-slider-active-segment"></span>
  4. </div>
复制
实例预览 »

滑块值

默认情况下,滑块放在横条的中间 (数值为 "50")。可以通过添加 data-options="initial: num" 属性来修改默认值:

实例


	
  1. <div class="range-slider" data-slider data-options="initial: 80;">
  2.   <span class="range-slider-handle"></span>
  3.   <span class="range-slider-active-segment"></span>
  4. </div>
复制
实例预览 »

显示滑块值

如果我们需要在滑块拖动时实时显示值,可以通过在 <div> 中添加 data-options="display_selector:#id" 属性且元素 id 值与滑块的 id  匹配,如下实例:

实例


	
  1. <!-- Display the slider value in this span -->
  2. <span id="mySlider"></span>
  3.  
  4. <div class="range-slider" data-slider data-options="display_selector: #mySlider;">
  5.   <span class="range-slider-handle"></span>
  6.   <span class="range-slider-active-segment"></span>
  7. </div>
复制
实例预览 »

组合数据选项

以下实例使用了 display_selector 和 initial 数据选项:

实例


	
  1. <span id="mySlider"></span>
  2. <div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 20;">
  3.  <span class="range-slider-handle"></span>
  4.   <span class="range-slider-active-segment"></span>
  5. </div>
复制
实例预览 »

步长

默认情况下,滑块滑动的增加减少的数量为 "1"。可以通过添加 data-options="step: num;" 属性来修改步长值。实例中设置为 25:

实例


	
  1. <span id="mySlider"></span>
  2. <div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
  3.   <span class="range-slider-handle"></span>
  4.   <span class="range-slider-active-segment"></span>
  5. </div>
复制
实例预览 »

自定义区间

默认情况下,区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值。以下实例设置区间值为 "1" 到 "20":

实例


	
  1.  <span id="mySlider"></span>
  2. <div class="range-slider" data-slider data-options="display_selector: #mySlider; start: 1; end: 20;">
  3.   <span class="range-slider-handle"></span>
  4.   <span class="range-slider-active-segment"></span>
  5. </div>
复制
实例预览 »

使用网格

以下使用为在网格中使用滑块:

实例


	
  1. <div class="row">
  2.   <div class="small-10 columns">
  3.     <div class="range-slider" data-slider data-options="display_selector: #mySlider;">
  4.       <span class="range-slider-handle"></span>
  5.       <span class="range-slider-active-segment"></span>
  6.     </div>
  7.   </div>
  8.   <div class="small-2 columns">
  9.     <!-- The display element (Tip: use CSS to perfectly position it) -->
  10.     <span id="mySlider" style="display:block;margin-top:14px;"></span>
  11.   </div>
  12. </div>
复制
实例预览 »

使用 Input

以下实例使用 <input> 取代 <span> 来显示滑块的值:

实例


	
  1.  <div class="row">
  2.   <div class="small-10 columns">
  3.     <div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 72;">
  4.       <span class="range-slider-handle"></span>
  5.       <span class="range-slider-active-segment"></span>
  6.     </div>
  7.   </div>
  8.   <div class="small-2 columns">
  9.     <!-- The display element (Tip: use CSS to perfectly position it) -->
  10.     <input type="number" id="mySlider" style="margin-top:7px;" value="72">
  11.   </div>
  12. </div>


相关教程