jQuery UI Slider и модификация дескриптора - PullRequest
Новая
       20

jQuery UI Slider и модификация дескриптора

7 голосов
/ 14 сентября 2010

Я использую стандартный слайдер jQueryUI и хочу изменить внешний вид ручки. Я изменил CSS на 

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 40px; height: 10px; cursor: default; border: 0; background-color: #c6c7c8; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: 10px; border: 0; background-color: #eceded;  }
.ui-slider-horizontal .ui-slider-handle { top: 0; margin-left: 0; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

Я так и сделал, чтобы ручка сидела в «полосе движения». Но если ручка перемещается в крайнее правое положение, она находится за пределами своей полосы движения. Конечно, я мог установить значение поля .ui-slider-handle в -20px. Но затем на обоих концах он перекрывает свою полосу движения.

Это как-то связано с ui-slider-range-max? Но при проверке слайдера через Firebug этот CSS-класс нигде не используется.

1 Ответ

4 голосов
/ 14 сентября 2010

Класс ui-slider-range-max присваивается части диапазона ползунка с фиксированной максимальной точкой.Например: http://jqueryui.com/demos/slider/#rangemax

Если вы не видите этот класс в Firebug, возможно, вы не используете этот тип слайдера

Я думаю, что вы спрашиваете, как получитьостановка левого края ручки на левом краю «полосы-ползунка», а правый край ручки не проходит мимо правого края «полосы-ползунка».То есть: ручка, расположенная на полосе ползунка

Если это так, вы можете сделать так, чтобы ручка оставалась в пределах полосы ползунка, сначала удалив фон и все остальное, видимое из div слайдера пользовательского интерфейса..

пример: 

.ui-slider-horizontal { height: 10px; border: 0; background: none  }

Затем оберните ползунок внутри контейнера div с вашим фоном.Контейнерный блок можно рассматривать как «полосу ползунка», и вы можете назначить ему необходимые отступы, чтобы ручка, казалось, оставалась в полосе ползунка.

пример: 

.ui-slider-container { background-color: #eceded; padding: 0 0.6em;}

также сбросьте дескриптор margin-left обратно к тому, что было, если у вас есть отступы слева и справа в элементе контейнера, в противном случае просто используйте отступ справа.

...