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. 
		
  2. 
			  <span class="range-slider-handle"></span>
    3. 
		
  3. 
			  <span class="range-slider-active-segment"></span>
    4. 
		
  4. 
			</div>
    5. 
		
  5. 
			 
    6. 
		
  6. 
			<!-- Initialize Foundation JS -->
    7. 
		
  7. 
			<script>
    8. 
		
  8. 
			$(document).ready(function() {
    9. 
		
  9. 
			    $(document).foundation();
    10. 
		
  10. 
			})
    11. 
		
  11. 
			</script>
    12. 
	

	

		复制

	实例预览 »



	圆角和禁用滑块



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



	

		实例

	

	
    
		
  1. 
			<div class="range-slider" data-slider>..</div>
    2. 
		
  2. 
			<div class="range-slider radius" data-slider>...</div>
    3. 
		
  3. 
			<div class="range-slider round" data-slider>...</div>
    4. 
		
  4. 
			<div class="range-slider disabled" data-slider>...</div>
    5. 
	

	

		复制

	实例预览 »



	垂直滑块



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



	

		实例

	

	
    
		
  1. 
			<div class="range-slider vertical-range" data-slider data-options="vertical: true;">
    2. 
		
  2. 
			  <span class="range-slider-handle"></span>
    3. 
		
  3. 
			  <span class="range-slider-active-segment"></span>
    4. 
		
  4. 
			</div>
    5. 
	

	

		复制

	实例预览 »



	滑块值



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



	

		实例

	

	
    
		
  1. 
			<div class="range-slider" data-slider data-options="initial: 80;">
    2. 
		
  2. 
			  <span class="range-slider-handle"></span>
    3. 
		
  3. 
			  <span class="range-slider-active-segment"></span>
    4. 
		
  4. 
			</div>
    5. 
	

	

		复制

	实例预览 »



	显示滑块值



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



	

		实例

	

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

	

		复制

	实例预览 »



	组合数据选项



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



	

		实例

	

	
    
		
  1. 
			<span id="mySlider"></span>
    2. 
		
  2. 
			<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 20;">
    3. 
		
  3. 
			 <span class="range-slider-handle"></span>
    4. 
		
  4. 
			  <span class="range-slider-active-segment"></span>
    5. 
		
  5. 
			</div>
    6. 
	

	

		复制

	实例预览 »



	步长



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



	

		实例

	

	
    
		
  1. 
			<span id="mySlider"></span>
    2. 
		
  2. 
			<div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
    3. 
		
  3. 
			  <span class="range-slider-handle"></span>
    4. 
		
  4. 
			  <span class="range-slider-active-segment"></span>
    5. 
		
  5. 
			</div>
    6. 
	

	

		复制

	实例预览 »



	自定义区间



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



	

		实例

	

	
    
		
  1. 
			 <span id="mySlider"></span>
    2. 
		
  2. 
			<div class="range-slider" data-slider data-options="display_selector: #mySlider; start: 1; end: 20;">
    3. 
		
  3. 
			  <span class="range-slider-handle"></span>
    4. 
		
  4. 
			  <span class="range-slider-active-segment"></span>
    5. 
		
  5. 
			</div>
    6. 
	

	

		复制

	实例预览 »



	使用网格



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



	

		实例

	

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

	

		复制

	实例预览 »



	使用 Input



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



	

		实例

	

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






      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程