JQuery UI - 滑块

发布于 2024-11-04 20:53:08 字数 113 浏览 0 评论 0原文

我正在尝试使用 jQuery UI 滑块。我想要做的是：对于滑块中的每个步骤，我想在滑块中绘制一个点（.）。我想表达的重点是我拥有的一个图像。

有什么建议吗？

谢谢你的帮助。此致。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橘寄 2024-11-11 20:53:30

你可以通过一些“技巧”来做到这一点。您可以像这样设置一个 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 中并为其提供背景即可。

或者

你可以用这种方式做到这一点（这是我的第一个想法）：

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

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

You can do this by little 'trick'. You can set up a div like this:

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

And then in slider's slide function, you can adjust width of that div:

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

By this way, you are revealing just a portion of that div and it creates a illusion of adding/removing individual images. If you need some kind of static background, then just wrap #imgSlider into another div and give it a background.

You can do it in this way (which was my first idea):

Create a 'drawing' function, that will add or remove image to div (or any element).
Add an parameter to that function, which will decide if image sould be added or removed (simple boolean will do).
Use slider with option slide which accepts a function (as you can see at jQuery UI examples page).
In that slide function, do check if current value is lower or higher than new value. You will get true/false value (ie.: Is new slider value smaller or not?).
Call your 'drawing' function with parameter that you just got by comparing values - so it will now if it should add or remove that image.

You will then do some fine tuning like handling minimum and maximum value. But the logic should work.

回复收藏 0 原文

~没有更多了~