最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)Foundation教程：Foundation滑塊

Foundation 滑塊

Foundation 滑塊允許用戶通過拖動(dòng)來選取區(qū)間值:

創(chuàng)新互聯(lián)是一家專業(yè)提供勐海企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為勐海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

滑塊可以通過使用

創(chuàng)建。在

內(nèi), 添加兩個(gè) 元素: 創(chuàng)建矩形滑塊（藍(lán)色背景），是在滑塊后的灰色橫條，是滑塊拖動(dòng)區(qū)域。

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

實(shí)例

<
div
class=
"range-slider"
data-slider
>

<
span
class=
"range-slider-handle"
>
<
/span
>

<
span
class=
"range-slider-active-segment"
>
<
/span
>

<
/div
>

<
script
>

$(document).ready(function() {

$(document).foundation();

})

<
/script
>

嘗試一下 ?

圓角和禁用滑塊

使用 .radius 和 .round 類來添加圓角滑塊。使用 .disabled 類來禁用滑塊：

實(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
>

嘗試一下 ?

垂直滑塊

使用 .vertical-range 類和 data-options="vertical: true;" 來創(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
>

嘗試一下 ?

滑塊值

默認(rèn)情況下，滑塊放在橫條的中間 (數(shù)值為 "50")。可以通過添加 data-options="initial: num" 屬性來修改默認(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
>

嘗試一下 ?

顯示滑塊值

如果我們需要在滑塊拖動(dòng)時(shí)實(shí)時(shí)顯示值，可以通過在

中添加 data-options="display_selector:#id" 屬性且元素 id 值與滑塊的 id 匹配，如下實(shí)例：

實(shí)例

<
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ù)據(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
>

嘗試一下 ?

步長

默認(rèn)情況下，滑塊滑動(dòng)的增加減少的數(shù)量為 "1"?？梢酝ㄟ^添加 data-options="step: num;" 屬性來修改步長值。實(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
>

嘗試一下 ?

自定義區(qū)間

默認(rèn)情況下，區(qū)間值在 "0" 到 "100"?？梢酝ㄟ^添加 data-options start 和 end 來設(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
>

嘗試一下 ?

使用網(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"
>




<
span
id=
"mySlider"
style=
"display:block;margin-top:14px;"
>
<
/span
>

<
/div
>

<
/div
>

嘗試一下 ?

使用 Input

以下實(shí)例使用取代來顯示滑塊的值:

實(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"
>




<
input
type=
"number"
id=
"mySlider"
style=
"margin-top:7px;"
value=
"72"
>

<
/div
>

<
/div
>

嘗試一下 ?

新聞名稱：創(chuàng)新互聯(lián)Foundation教程：Foundation滑塊
瀏覽路徑：http://m.fisionsoft.com.cn/article/djgdgei.html

新聞中心

Foundation 滑塊

實(shí)例

圓角和禁用滑塊

實(shí)例

垂直滑塊

實(shí)例

滑塊值

實(shí)例

顯示滑塊值

實(shí)例

組合數(shù)據(jù)選項(xiàng)

實(shí)例

步長

實(shí)例

自定義區(qū)間

實(shí)例

使用網(wǎng)格

實(shí)例

使用 Input

實(shí)例

其他資訊