Foundation 滑块学习笔记

1. 简介

Foundation 滑块是基于 jQuery 的一种 UI 组件，用于创建滑动条和 dials。滑块可以让用户通过拖动手柄来选择数值，滑块还支持添加标签、步长等自定义选项。

2. 使用方法

2.1 引入文件

在 HTML 页面中引入 Foundation 滑块的 CSS 和 JS 文件：

htmlCopy Code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>

2.2 创建滑块

要创建滑块，需要在 HTML 页面中添加相应的 HTML 元素，并为其设置一个唯一的 ID。例如，要创建一个最小值为 0，最大值为 100，步长为 10 的横向滑块，可以这样写：

htmlCopy Code
<div class="slider" id="mySlider" data-start="0" data-end="100" data-step="10"></div>

2.3 初始化滑块

在页面加载完成后，需要使用 JavaScript 代码来初始化滑块：

jsCopy Code
$(document).foundation();

2.4 配置滑块

可以使用以下配置参数来自定义滑块的外观和行为：

data-start：滑块的起始值，默认为 0。
data-end：滑块的结束值，默认为 100。
data-initial-start：滑块的初始值，默认为起始值。
data-step：滑块每次拖动的步长，默认为 1。
data-vertical：设置为 true 时，滑块变为纵向（垂直）模式，默认为 false。
data-vertical-height：设置滑块的高度，仅在纵向模式下有效，默认为 100%。
data-show-value：设置为 false 时，不显示滑块的数值，默认为 true。
data-hide-input：设置为 true 时，隐藏滑块的输入框，默认为 false。
data-disabled：设置为 true 时，禁用滑块。

3. 实例

以下是一个完整的实例，创建了一个最小值为 0，最大值为 100，步长为 10 的横向滑块：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>Foundation Slider Demo</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>
<body>

	<div class="row">
		<div class="columns small-12 medium-6 large-4">
			<div class="slider" id="mySlider" data-start="0" data-end="100" data-step="10"></div>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/jquery/3.1.0/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
	<script>
		$(document).foundation();
	</script>
	
</body>
</html>

运行上面的代码，即可在浏览器中看到一个横向滑块。用户可以通过拖动手柄选择数值，滑块会实时更新显示的数值。

4. 总结

Foundation 滑块是一个实用的 UI 组件，可以帮助用户快速、方便地选择数值。使用 Foundation 滑块非常简单，只需要引入相关文件，然后添加相应的 HTML 元素和配置参数即可。在实际项目中，可以根据需求自定义滑块的外观和行为，以达到更好的用户体验。