#jquery #jquery-ui #slider
#jquery #jquery-ui #ползунок
Вопрос:
У меня есть ползунок jQuery, который должен быть размещен в узком столбце на странице. Идея в том, что значение должно следовать за дескриптором в виде всплывающей подсказки под ползунком. Я добился того, что это работает довольно хорошо, используя атрибут pageX «объекта события» в событии слайда jquery slider.
$(element).css("left", event.pageX - ($(element).width() / 2)).text(ui.value);
Но проблема в том, что из-за того, что столбец довольно узкий, поэтому, когда я перетаскиваю ползунок на максимум, отображаемое значение будет размещено за пределами столбца. Или часть этого будет в любом случае.
Решение, которое я придумал, заключается в том, чтобы либо сделать ползунок короче. Но мой дизайнер, вероятно, будет жаловаться. Другое решение — убедиться, что отображаемое значение имеет более узкое поле перемещения, чем ползунок. Но я не уверен, как этого добиться.
Любые предложения о том, как я могу заставить свое значение аккуратно следовать за дескриптором. Но таким образом, чтобы оно не «выпадало»?
РЕДАКТИРОВАТЬ: Вот jsFiddle, который объясняет, как моя ситуация выглядит сегодня. Значение, которое следует внизу, выходит за пределы ширины столбца. Это я изобразил синим прямоугольником.
Комментарии:
1. Не могли бы вы создать jsFiddle или опубликовать URL-адрес тестового примера?
Ответ №1:
При вычислении положения вы можете легко установить ограничения:
// Caching jQuery objects
var $element = $(element).text(ui.value);
var $container = $element.parent();
// Calculating new position
var newpos = event.pageX - $element.width() / 2;
newpos = Math.max(newpos, 0);
newpos = Math.min(newpos, $container.innerWidth() - $element.outerWidth());
$element.css('left', newpos);
Вычисление было разбито для удобства чтения. Приведенный выше код предполагает, что основной контейнер столбца является родительским для вашего элемента.
Ответ №2:
Сначала кэшируйте ваш $ object.
$element = $(element);
Тогда вместо использования атрибута event.pageX используйте $element.position().left . Помните, что это относится к родительскому относительному элементу. Поэтому вы можете захотеть использовать $element.offset().left