JQuery用户界面 - 滑块

Question

我想使用jQuery UI滑块。我想要做的是：对于滑块中的每个步骤，我想在滑块栏中绘制一个点（。）。我想说的一点是我有一个图像。

有什么建议吗？

感谢您的帮助。最好的祝福。

Answer 1

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

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

然后在滑块的滑动功能，可以调整该分区的宽度：

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

通过这种方式，你都透出只是一部分div，它会创建添加/删除单个图像的错觉。如果你需要某种静态背景，那么只需将#imgSlider包装到另一个div中并给它一个背景。

OR

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

1. 创建 '绘画' 功能，这将增加或删除图像的div（或任何元件）。
2. 为该函数添加一个参数，该参数将决定是否应该添加或删除图像（简单的布尔值将会执行）。
3. 使用滑块与选项slide接受函数（正如你可以看到在jQuery UI示例页面）。
4. 在该slide函数中，检查当前值是低于还是高于新值。你会得到真/假的值（即：新滑块值是否变小？）。
5. 通过比较值来调用你的'绘图'函数的参数，所以现在如果它应该添加或删除该图像。

然后，你会做一些微调，如处理最小值和最大值。但逻辑应该工作。