How to add multiple handles to a jQuery slider on the fly
我想这样做:
在某个事件中向jQuery滑块添加一个handlle
该句柄应该有一个id,以便在滑动时可以访问其值。
任何想法如何做到这一点?
这是JSfiddle中的代码,其中实现了带有两个句柄的滑块。我需要做的就是通过触发某些事件即时添加句柄,并获取每个句柄的值以供进一步利用。
- 发布您的代码。目前尚不清楚您现在所拥有的,以及您在问什么。
根据http://jqueryui.com/demos/slider/上的文档,我看不到任何可能性。添加或删除值时,您可以销毁并重新创建滑块。这要求您存储现有句柄的所有当前值。这不是一个超级优雅的解决方案,但是它是我目前唯一看到的,除了更新jquery ui库。
我用一个简单的例子更新了您的小提琴:http://jsfiddle.net/FPCRb/4/
- 我看到上面提到的小提琴。但是,您能建议任何带有某些内置函数的库吗?好吧,确切的说;我试图将这些多个句柄与不同的变量相关联,以进一步利用。
-
我不确定我是否完全理解,但是您希望能够随时检索给定句柄的值吗?您可以使用索引来执行此操作。我已经更新了小提琴jsfiddle.net/FPCRb/10并添加了一个变量(数组)** currentValues **,其中包含当前值。您可以将变量与currentValues中的项目相关联。我靠近了吗?
-
我成功获取了不同手柄的值,但我需要在单击特定手柄时执行一些操作,并在单击另一个手柄时执行其他操作。怎么做 ?
-
@GILL jQuery UI没有提供单击处理程序,因此我创建了自己的处理程序,您可以在jsfiddle.net/FPCRb/25上看到它:$slider.delegate('a.ui-slider-handle', 'click', function () { alert('Handle with index ' + $(this).index() + ' and value ' + currentValues[$(this).index()]); });
-
太好了。。。如此... plz说明了为什么要使用'a'来使用a.ui-slider-handle whta。为什么不直接使用class id?
-
@GILL我这样做是出于性能方面的考虑。见stackoverflow.com/questions/46214/…
-
我要这样做1.自定义特定手柄的形状2.为每个手柄赋予不同的颜色;
-
jqueryui.com/themeroller提供了预定义的配色方案。但是我想即时更改手柄的颜色(可能需要将DOM"手柄"设置为特定的滑块手柄)
-
@GILL:检查一下:jsfiddle.net/FPCRb/39。我为手柄设置了不同的背景颜色。