JQuery UI - 滑块

Question

我正在尝试使用 jQuery UI 滑块。我想要做的是：对于滑块中的每一步，我想在滑块栏中画一个点 (.)。我想说的是我有一个图像。

有什么建议吗？

感谢您的帮助。最好的问候。

Answer 1

您可以通过一点“技巧”来做到这一点。你可以像这样设置一个div：

#imgSlider {width:100px; background:url('path/to/img.gif') repeat-x top left;}

然后在滑块的滑动功能中，您可以调整该div的宽度：

// ... slider settings ....
slide: function (event, ui) {
    $('#imgSlider').width = ui.value;
}

通过这种方式，您只显示了该 div 的一部分，它会产生添加/删除单个图像的错觉。如果您需要某种静态背景，那么只需将#imgSlider 包装到另一个 div 中并给它一个背景。

或

你可以这样做（这是我的第一个想法）：

1. 创建一个“绘图”函数，它将向 div（或任何元素）添加或删除图像。
2. 向该函数添加一个参数，该参数将决定是添加还是删除图像（简单的布尔值即可）。
3. 使用带有选项 slide 的滑块，该选项接受一个函数（如您在 jQuery UI 示例页面中所见）。
4. 在slide 函数中，检查当前值是否低于或高于新值。您将获得真/假值（即：新滑块值是否更小？）。
5. 使用您刚刚通过比较值获得的参数调用您的“绘图”函数 - 如果它现在应该添加或删除该图像，它会这样做。

然后您将进行一些微调，例如处理最小值和最大值。但逻辑应该有效。