如何让 jquery 滑块的值跟随手柄，但不是一直跟随？

发布于 2024-11-07 20:41:53 字数 562 浏览 0 评论 0原文

我有一个 jQuery 滑块，应该放置在页面上的窄列中。这个想法是，该值应该跟随工具提示中的手柄，就像滑块下方的时尚一样。通过在 jquery 滑块滑动事件中使用“事件对象”的 pageX 属性，我已经得到了很好的效果。

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

但问题是，由于该列非常窄，因此当我将滑块拖动到最大值时，显示的值将放置在列之外。或者无论如何都会有一部分。

我想出的解决方案是要么让滑块更短。但我的设计师可能会抱怨。另一个解决方案是确保我显示的值的移动范围比滑块更窄。但我不确定如何实现这一点。

关于如何让我的值整齐地跟随手柄的任何建议。但以某种方式它不会“掉下来”？

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

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

原文

I have a jQuery slider that is supposed to be placed in a narrow column on a page. The idea is that the value should follow the handle in a tooltip like fashion underneath the slider. I've gotten that to work pretty good by using the pageX attribute of the "event object" in the jquery slider slide event.

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

But the problem is that due to the fact that the column in quite narrow so when I drag the slider to max the displayed value will be placed outside the column. Or a part of it will anyway.

The solution I've come up with is either make the slider shorter. But my designer will probably complain. The other solution is to make sure that the value I'm displaying have a narrower field of movement than the slider. But I'm not sure how to accomplish this.

Any suggestions on how I can get my value to neatly follow the handle. But in a way that it won't "fall out"?

EDIT:
Here is a jsFiddle that explains how my situation looks today. The value that follows along on the bottom ends up outside the width of the column. That I've represented with a blue box.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云柯 2024-11-14 20:41:53

计算位置时，您可以轻松强制限制：

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

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

When calculating the position, you can easily force limits:

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

The calculation was broken up for readability. The code above assumes that the main column container is the parent of your element.

回复收藏 0 原文