?
This document uses PHP Chinese website manual Release
Foundation 滑塊
Foundation 滑塊允許用戶(hù)通過(guò)拖動(dòng)來(lái)選取區(qū)間值:
滑塊可以通過(guò)使用 <div class="range-slider" data-slider> 創(chuàng)建。在<div> 內(nèi), 添加兩個(gè) <span> 元素: <span class="range-slider-handle"> 創(chuàng)建矩形滑塊（藍(lán)色背景），<span class="range-slider-active-segment"> 是在滑塊后的灰色橫條，是滑塊拖動(dòng)區(qū)域。
注意: 滑塊需要使用 JavaScript。所以你需要初始化 oundation JS:
實(shí)例
<div?class="range-slider"?data-slider>
??<span?class="range-slider-handle"></span>
??<span?class="range-slider-active-segment"></span>
</div>
<!--?Initialize?Foundation?JS?-->
<script>
$(document).ready(function()?{
????$(document).foundation();
})
</script>實(shí)例預(yù)覽 ?圓角和禁用滑塊
使用 .radius 和 .round 類(lèi)來(lái)添加圓角滑塊。使用 .disabled 類(lèi)來(lái)禁用滑塊：
實(shí)例
<div?class="range-slider"?data-slider>..</div> <div?class="range-slider?radius"?data-slider>...</div> <div?class="range-slider?round"?data-slider>...</div> <div?class="range-slider?disabled"?data-slider>...</div>實(shí)例預(yù)覽 ?
垂直滑塊
使用 .vertical-range 類(lèi)和 data-options="vertical: true;" 來(lái)創(chuàng)建垂直滑塊:
實(shí)例
<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>實(shí)例預(yù)覽 ?
滑塊值
默認(rèn)情況下，滑塊放在橫條的中間 (數(shù)值為 "50")。可以通過(guò)添加 data-options="initial: num" 屬性來(lái)修改默認(rèn)值:
實(shí)例
<div?class="range-slider"?data-slider?data-options="initial:?80;"> ??<span?class="range-slider-handle"></span> ??<span?class="range-slider-active-segment"></span> </div>實(shí)例預(yù)覽 ?
顯示滑塊值
如果我們需要在滑塊拖動(dòng)時(shí)實(shí)時(shí)顯示值，可以通過(guò)在 <div> 中添加 data-options="display_selector:#id" 屬性且元素 id 值與滑塊的 id ?匹配，如下實(shí)例：
實(shí)例
<!--?Display?the?slider?value?in?this?span?--> <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>實(shí)例預(yù)覽 ?
組合數(shù)據(jù)選項(xiàng)
以下實(shí)例使用了 display_selector 和 initial 數(shù)據(jù)選項(xiàng):
實(shí)例
<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>實(shí)例預(yù)覽 ?
步長(zhǎng)
默認(rèn)情況下，滑塊滑動(dòng)的增加減少的數(shù)量為 "1"。可以通過(guò)添加 data-options="step: num;" 屬性來(lái)修改步長(zhǎng)值。實(shí)例中設(shè)置為 25:
實(shí)例
<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>實(shí)例預(yù)覽 ?
自定義區(qū)間
默認(rèn)情況下，區(qū)間值在 "0" 到 "100"?？梢酝ㄟ^(guò)添加 data-options start 和 end 來(lái)設(shè)置區(qū)間值。以下實(shí)例設(shè)置區(qū)間值為 "1" 到 "20":
實(shí)例
?<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>實(shí)例預(yù)覽 ?
使用網(wǎng)格
以下使用為在網(wǎng)格中使用滑塊：
實(shí)例
<div?class="row"> ??<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"> ????<!--?The?display?element?(Tip:?use?CSS?to?perfectly?position?it)?--> ????<span?id="mySlider"?style="display:block;margin-top:14px;"></span> ??</div> </div>實(shí)例預(yù)覽 ?
使用 Input
以下實(shí)例使用 <input> 取代 <span> 來(lái)顯示滑塊的值:
實(shí)例
?<div?class="row"> ??<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"> ????<!--?The?display?element?(Tip:?use?CSS?to?perfectly?position?it)?--> ????<input?type="number"?id="mySlider"?style="margin-top:7px;"?value="72"> ??</div> </div>實(shí)例預(yù)覽 ?
關(guān)于我們 聯(lián)系我們 留言板
手冊(cè)網(wǎng)