Foundation 滑桿

Foundation 滑桿允許使用者透過拖曳來選取區間值:

滑桿可以透過使用 <div class="range-slider" data-slider> 建立。在< 元素: <span class="range-slider-handle"> 建立矩形滑桿（藍色背景），<span class="range-slider-active-segment"> 是在滑桿後的灰色橫條，是滑桿拖曳區域。

注意:

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

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
  <h2>区间滑块</h2>
  <p> .range-slider-handle 类创建一个滑块实体（蓝色矩形），.range-slider-active-segment 在滑块后添加灰色横条：</p>
  <div class="range-slider" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

#執行實例»
點擊"運行實例" 按鈕查看線上實例

圓角和停用滑桿

使用

.radius

和.round 類別來新增圓角滑桿。使用.disabled 類別來停用滑桿：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>圆角 & 禁用滑块</h2>
<p>使用 <code>.radius</code> 和 <code>.round</code> 类来添加圆角滑块。使用 <code>.disabled</code> 类来禁用滑块：</p>

  <span>默认:</span>
  <div class="range-slider" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
  
  <span>圆角:</span>
  <div class="range-slider radius" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
  
  <span>圆形:</span>
  <div class="range-slider round" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
  
  <span>禁用:</span>
  <div class="range-slider disabled" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

##執行實例»

##點擊"運行實例" 按鈕查看線上實例

垂直滑桿

#使用

.vertical-range

類別和

data-options= "vertical: true;"

來建立垂直滑桿:實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>垂直滑块</h2>
  <p>使用 <code>.vertical-range</code> 类和 <code>data-options="vertical: true;"</code> 来创建垂直滑块:</p>
  <div class="range-slider vertical-range" data-slider data-options="vertical: true;">
    <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

##執行實例»

##點擊"運行實例" 按鈕查看線上實例

滑桿值

預設情況下，滑桿放在橫條的中間(數值為"50 ")。可以透過新增

data-options="initial:

num

屬性來修改預設值:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>默认滑块值</h2>
  <p>默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 <code>data-options="initial: <em>num</em>"</code> 属性来修改默认值:</p>
  <div class="range-slider" data-slider data-options="initial: 80;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

#顯示滑桿值如果我們需要在滑桿拖動時即時顯示值，可透過在

<div>

中新增

data-options="display_selector:

#id

屬性且元素id 值與滑區塊的id 匹配，如下實例：實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>显示滑块值</h2>
 <p>如果我们需要在滑块拖动时实时显示值，可以通过在 <code> <div></code> 中添加 <code>data-options="display_selector:#<em>id</em>"</code> 属性且元素 id 值与滑块的 id 匹配，如下实例：</p>
  <span id="mySlider"></span>
  <div class="range-slider" data-slider data-options="display_selector: #mySlider;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

組合資料選項以下實例使用了

display_selector

和

initial

資料選項:

#實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>组合数据选项</h2>
  <p>以下实例使用了 <code>display_selector</code> 和 <code>initial</code> 数据选项:</p>
  <span id="mySlider"></span>
  <div class="range-slider" data-slider data-options="display_selector: #mySlider; initial:20;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

步驟長

預設情況下，滑桿滑動的增加減少的數量為 "1"。可以透過新增 data-options="step: num;" 屬性來修改步長值。實例中設定為25:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>步长</h2>
  <p>默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 <code>data-options="step: <em>num</em>;"</code> 属性来修改长值。实例中设置为 25:</p>

  <span id="mySlider"></span>
  <div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

#執行實例»

點擊"運行實例"按鈕查看線上實例

自訂區間

預設情況下，區間值在"0" 到"100"。可以透過新增 data-options start 和 end 來設定區間值。以下實例設定區間值為"1" 到"20":

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>自定义区间</h2>
  <p>默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options <code>start</code> 和 <code>end</code> 来设置区间值。以下实例设置区间值为 "1" 到 "20":</p>

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

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

運行實例»##點擊"運行實例" 按鈕查看線上實例

使用網格

以下使用為在網格中使用滑桿：

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>使用网格</h2>
  <p>以下使用为在网格中使用滑块：</p>
  <div class="small-10 columns">
    <div class="range-slider" data-slider data-options="display_selector: #mySlider;">
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <span id="mySlider" style="display:block;margin-top:14px;"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

運行實例»#點擊"運行實例"按鈕查看線上實例

使用Input

以下實例使用

<input> 取代<span> 來顯示滑桿的值:

實例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>使用 Input</h2>
  <p>以下实例使用 <code><input></code> 取代 <code><span></code> 来显示滑块的值:</p>
  <div class="small-10 columns">
    <div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 72;">
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <input type="number" id="mySlider" style="margin-top:7px;" value="72">
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例

← Foundation 開關

Foundation 提示框 →