jquery - 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. 使用您刚刚通过比较值获得的参数调用您的“绘图”函数 - 所以现在如果它应该添加或删除该图像。

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