JQuery UI Slider - как инвертировать выбор диапазона - PullRequest
Новая
       31

JQuery UI Slider - как инвертировать выбор диапазона

4 голосов
/ 28 декабря 2011

У меня несколько странная просьба разрешить пользователю выбирать диапазон на слайдере, но позволяет ему инвертировать выбор диапазона на слайдере. Например, если у них есть этот выбор на слайдере:

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

они могут нажать кнопку и инвертировать этот выбор. Мы хотели бы визуально отобразить это так:

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

Ползунок затем продолжит функционировать, как и ожидалось, но с выделением наоборот. Я знаю, что вы можете сделать что-то подобное с этим ползунком, установив фиксированный максимум или минимум в диапазоне с одной ручкой, но не уверен, возможно ли это, когда используются две ручки. Кто-нибудь знает, выполнимо ли это с помощью ползунка пользовательского интерфейса jQuery?

1 Ответ

5 голосов
/ 29 декабря 2011

Вы можете поиграть с 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, вы можете обернуть ползунок в <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>, чтобы поменять местами фоны.

...