JQuery UI - 滑块控件

Question

我想使用jQuery UI滑块。我想要做的是：在滑块的每个步骤中，我想要在滑动条中绘制一个点（.）。我想放置的点是我拥有的图像。

有什么建议吗？

感谢帮助。最好的问候。

- Ricardo Felgueiras

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函数中，检查当前值是否低于或高于新值。您将获得true / false值（即：新滑块值是否较小？）。
5. 使用刚刚通过比较值获取的参数调用您的“绘制”函数，以便它现在知道是否应添加或删除该图像。

然后，您需要进行一些微调，例如处理最小值和最大值。但逻辑应该可以工作。

- Damb