JQuery UI - Slider

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. 创建一个'drawing'函数，将添加或删除图像到div(或任何元素)。
2. 为该函数添加一个参数，该参数将决定图像是否应该添加或删除(简单的布尔值将完成)。
3. 使用选项slide的滑块接受一个函数(你可以看到在jQuery UI示例页)。
4. 在slide函数中，检查当前值是否低于或高于新值。你将得到真/假值(即。:新的滑块值是否更小?)。
5. 调用你的'drawing'函数与参数，你刚刚得到的比较值-所以它现在将如果它应该添加或删除该图像。

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