Foundation 滑块

Foundation 滑块技术文档

Foundation 滑块是一种用户界面控件，用于选择范围或值。本文档将详细介绍如何在Foundation框架中使用滑块控件。

基本用法

下面是创建 Foundation 滑块（slider）的基本方法：

<div class="slider" data-slider>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
</div>

其中，data-slider 属性指定了元素是一个滑块控件，data-slider-handle 属性用于指定可拖动的滑块柄，data-slider-fill 属性用于指定填充滑块轨道的元素。

通过上述代码，我们创建了一个包含两个滑块柄的滑块，并在两个滑块柄之间填充了滑块轨道。我们可以通过JavaScript或CSS来自定义滑块的样式和功能。

带标签的滑块

我们可以在滑块的两侧加上标签，用于指示滑块的值范围。创建一个带标签的滑块，我们需要设置滑块控件的 data-slider-start 和 data-slider-end 属性，以及标签元素。

<div class="slider" data-slider data-start="0" data-end="100">
  <span class="slider-label" data-slider-label>0</span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-label" data-slider-label>100</span>
</div>

上述代码可以创建一个带标签的滑块。我们设置了滑块的值范围为 0 到 100，并在滑块两侧添加了对应的标签，以便用户更清楚地了解自己当前选定的范围。

调整滑块大小

我们可以使用样式表来调整滑块的大小。Foundation 会自动将滑块中的某些元素布局排列到一起，我们只需要设置其中一些元素的大小即可。

.slider {
  height: 1em;
}

.slider-handle, .slider-fill {
  height: 100%;
}

.slider-handle {
  width: 1em;
}

.slider-fill {
  left:  0;
}

上述代码可以调整滑块的尺寸大小。我们将滑块的高度设置为 1em，然后将某些元素的高度设置为 100% 和宽度为 1em。

添加回调函数

我们可以通过设置事件回调函数，来响应滑块值发生变化的事件。

<div class="slider" data-slider data-start="0" data-end="100">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
</div>

<script>
var slider = new Foundation.Slider($('.slider'), {
  on_slide: function() {
    console.log('slide event');
  }
});
</script>

上述代码创建了一个滑块，当滑块滑动时，会触发 on_slide 回调函数，并打印输出 slide event。

总结

本文介绍了Foundation框架中的滑块控件的基本用法、带标签的滑块、调整滑块大小以及添加回调函数等方面的知识。使用Foundation滑块，我们可以方便地实现范围选择功能，提高用户体验。