4

我有一个有点奇怪的请求，允许用户选择滑块上的范围，但允许他们反转滑块上的范围选择。例如，如果他们在滑块上有此选择：

<----[]==========[]---->

他们可以单击一个按钮并反转该选择。我们希望像这样直观地显示它：

<====[]----------[]====>

然后滑块将继续按预期工作，但突出显示反转。我知道您可以通过使用一个手柄在范围上设置固定的最大值或最小值来使用此滑块执行类似的操作，但不确定在使用两个手柄时是否可能。有谁知道这是否适用于 jQuery UI 滑块？

4

1 回答 1

5

你可以摆弄 CSS 让它看起来像你想要的那样。滑块的内部：

<----[]==========[]---->
       ^^^^^^^^^^

.ui-widget-header从滑块的外部获取其背景：

<----[]==========[]---->
 ^^^^              ^^^^

从.ui-widget-content. 因此，要反转它们，您只需toggleClass将小部件上的这些类作为一个整体（对于外部背景）和拇指（对于内部区域）进行切换。外部区域只是滑块本身，内部区域是.ui-slider-range滑块内部。

例如，如果您有这样的滑块：

<div id="slider-range"></div>

然后你可以用这个反转背景：

$('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');

您可能想要跟踪滑块在某处处于哪种模式，或者您可以只检查类#slider-range .ui-slider-range。

演示：http: //jsfiddle.net/ambiguous/Mu8XS/

如果您不习惯切换 jQuery-UI 类，那么您可以将滑块包装在 a 中<div>，在其上切换一个类<div>，然后覆盖 jQuery-UI CSS：

.inverted .ui-widget-content {
    /* The usual background properties for .ui-widget-header */
}
.inverted .ui-widget-header {
    /* The usual background properties for .ui-widget-content */
}

然后你可以.inverted打开包装器<div>来交换背景。

于 2011-12-28T23:31:22.077 回答