Question

我有一个jQuery滑块，应该放在页面的窄列中。我们的想法是，值应该按照滑块下方的工具提示方式跟随句柄。通过在jquery滑块幻灯片事件中使用“事件对象”的pageX属性，我已经得到了相当好的工作。

$(element).css("left", event.pageX - ($(element).width() / 2)).text(ui.value);

但问题在于，由于柱子在相当狭窄的情况下所以当我将滑块拖动到最大值时，显示的值将被放置在列之外。或者它的一部分也会。

我提出的解决方案是缩短滑块。但我的设计师可能会抱怨。另一种解决方案是确保我显示的值具有比滑块更窄的移动范围。但我不知道如何做到这一点。

关于如何让我的价值整齐地跟随句柄的任何建议。但在某种程度上，它不会“脱落”？

编辑：这是一个jsFiddle，解释了我今天的情况。底部跟随的值最终会超出列的宽度。我用蓝框代表。

http://jsfiddle.net/nuPYa/2/

Answer 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);

为了便于阅读，计算被细分。上面的代码假定主列容器是元素的父级。

Answer 2

首先缓存你的$ object。

$element = $(element);

然后，使用$element.position().left而不是使用event.pageX属性。请记住，这与父相对元素有关。所以你可能想要使用$element.offset().left

如何获取jquery滑块的值来跟随句柄，但不是一直都是这样？

2 个答案: