如何阻止jquery UI滑块滑动到装订线之外

I am using the jquery-ui slider as a sideways scroll bar, and am having issues with the fact the handle slides beyond the end gutter (it can be seen here if you slide the slider the farthest to the right). I have tried everything I can think of with CSS to try to get the handle to go no further than the gutter, but to no avail. Any suggestions would be greatly appreciated.

我使用jquery-ui滑块作为侧面滚动条,并且手柄滑到末端排水沟之外的问题(如果你将滑块向右滑动,可以看到这里)。我已经尝试了所有我能用CSS思考的东西,试图让手柄没有比排水沟更进一步,但无济于事。任何建议将不胜感激。

To clarify I am adding the following diagram which shows the problem (it is very subtle since the handle is small, however if you create a large handle in CSS, the handle goes exactly half its width beyond the gutter).

为了澄清我正在添加以下图表来显示问题(由于句柄很小,它非常微妙,但是如果你在CSS中创建一个大句柄,那么句柄的宽度恰好超过了排水沟的一半)。

Here is a jsbin of the problem. Basically I want the handle to stay within the gutter.

这是问题的一个问题。基本上我希望手柄留在排水沟内。

alt text http://img268.imageshack.us/img268/124/examplex.png

alt text http://img268.imageshack.us/img268/124/examplex.png

9 个解决方案

#1

the handle goes exactly its width beyond the gutter

手柄正好超出排水沟的宽度

More like exactly half its width, so it's not really moving past the end of the slider. When aligning your screenshots correctly, then you'll see the center of the handle is at the end of the slider, just like I expect it to be for a very precise setting. When the left is 0%, and the right is 100%, then the handle has to move past the end a bit to allow for choosing that 100%.

更像是宽度的一半,所以它并没有真正超越滑块的末端。正确对齐屏幕截图时,您会看到手柄的中心位于滑块的末端,就像我希望它可以进行非常精确的设置一样。当左边是0%,右边是100%时,手柄必须移动一点,以便选择100%。

This is the same when enlarging the handle. When in your case the handle moves more than half its width over the right edge, then I assume it extends less than half on the left? When playing with the CSS a bit I get the same effect with huge handles, like:

扩大手柄时也是如此。在你的情况下,手柄移动超过右边缘宽度的一半,那么我认为它在左边延伸不到一半?使用CSS时,我会使用大手柄获得相同的效果,例如:

.ui-slider-horizontal .ui-state-default {
  /** Defaults: 
      margin-left: -0.6em;
      top: -0.3em;
  */
  width: 69px;
  height: 140px;
  margin-left: -39px;
  top: -68px;
}

Even better shown using an arrow, a bit of a hack:

使用箭头更好地显示,有点黑客:

.ui-slider-horizontal .ui-state-default {
  width: 40px;
  margin-left: -20px;
  top: 15px;
  background-color: white;
  background-image: url('http://i.stack.imgur.com/ObK9i.png');
  background-repeat: no-repeat;
  border: 0;
}

However, as for your usage as a scrollbar, see the slider scrollbar demo, which seems to do what you want? Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.

但是,至于您作为滚动条的用法,请参阅滑块滚动条演示,它似乎可以满足您的需求?使用滑块操纵页面上内容的位置。在这种情况下,它充当滚动条,可能在需要时捕获值。

#2

If you add a cap to either end of the slider you can mimic the effect without changing anything about the slider itself.

如果在滑块的任一端添加一个上限,则可以模拟效果,而无需更改滑块本身的任何内容。

<div class="cap left"></div>
(slider container here)
<div class="cap right"></div>

Just add some very basic CSS...

只需添加一些非常基本的CSS ...

.cap {
    width: (half the handle width)
}
.ui-slider, .cap.left, .cap.right {
    float: left;
}
.ui-slider {
    width: (desired total gutter width - handle width);
}
.ui-slider-handle {
    margin-left: -(half the handle width);
}

...then style your caps accordingly.

...然后相应地设计你的帽子。

For range shading on a single slider, just style the left cap with the range effect instead of the normal gutter.

对于单个滑块上的范围着色,只需使用范围效果而不是普通装订线设置左帽的样式。

#3

I had the same problem and my solution is very simple i think. As Dr.Gibbs said draggable slider handle containment is set to 'parent' as default. So you can overcome it by using css...

我有同样的问题,我认为我的解决方案非常简单。正如Dr.Gibbs所说,可拖动滑块手柄包含设置为默认的“父”。所以你可以通过使用CSS克服它...

consider handle img is 100px, and containment div is 250px wide. Than containment div should have width value 250 - 100 = 150px and margin-right:100px to have the maxZoom img to be shown on correct place. Than you have the exact limit for your handle image...

考虑句柄img是100px,并且包含div是250px宽。比包含div应该具有宽度值250 - 100 = 150px和margin-right:100px以使maxZoom img显示在正确的位置。比你有手柄图像的确切限制...

#4

Or you can do it with math, like this:

或者你可以用数学来做,像这样:

slide: function(event, ui) {
    $(ui.handle).html("<span class='ui-corner-all hover'>"+ui.value+"</span>");
    fix_slider(ui.handle,ui.value);
},
function fix_slider(slider,value) {
    var $.slider_decalatio = 0.35 // for an width of 27px
    var pos_calc = $.slider_decalation * value; // y = ax;
    $(slider).find('span').css("left",pos_calc + "px");
});

This can be improved but it's a quick fix.

这可以改进,但它是一个快速解决方案。

#5

I found a solution. But first: I've had the same problem with single sliders and range sliders. Applying any CSS wouldnt work, nor did any Javascript-Fix-Approach.

我找到了解决方案。但首先:单滑块和范围滑块我遇到了同样的问题。应用任何CSS都不会起作用,也没有任何Javascript-Fix-Approach。

SOLUTION for me was: The sliding area is 100% of the width of the scrollbar. So when your slider is 100px wide, and you set it to "50", the "margin-left" of the handle is 50%. When its 200px, set to 20, its 10% ... and so on.

我的解决方案是:滑动区域是滚动条宽度的100%。因此,当您的滑块宽度为100px,并将其设置为“50”时,手柄的“左边距”为50%。当它的200px,设置为20,其10%......等等。

I looked for that piece of code that calculated the leftmargin of the handle, reduced the with and added a standard leftmargin.

我查找了计算句柄左边距的那段代码,减少了使用并添加了标准的左边距。

Open jquery-ui.js with the editor of your choice and goto line ~13170 and find function _refreshValue. You can also search for the first appearance of "valPercent" After line "valPercent = ....." i added the following:

用您选择的编辑器打开jquery-ui.js并转到〜13170行并找到函数_refreshValue。您还可以搜索“valPercent”的第一个外观。在“valPercent = .....”行之后,我添加了以下内容:

valPercent = valPercent * 0.95 + 3.1;

valPercent = valPercent * 0.95 + 3.1;

This aliged my Handled perfectly inside the range and the gutter. Maybe you need to play around with the values to get your optimal setting depending on the ui-template you use, but at least this

这使得我的Handled完美地在范围和排水沟内。也许您需要使用这些值来根据您使用的ui模板获得最佳设置,但至少这一点

Because I need any reputation to post images, here's a link to what i drew for you.

因为我需要任何声望来发布图像,这里是我为您绘制的链接。

http://www.germanunique.com/slider.png

If you need help with this you can write me an email to [e-mail] or leave a reply. This was my first Post on StackOveflow, I hope it helps those who have the same problem.

如果您需要帮助,可以给我发电子邮件至[e-mail]或留下回复。这是我在StackOveflow上的第一篇文章,我希望它可以帮助那些有同样问题的人。

BYE !

#6

For me works this:

对我来说这是:

var $Slide = jQuery('#StatusSlide');
$Slide.slider({
  slide: function(event, ui) {
    /* Fix handler to be inside of slider borders */
    var $Handle = $Slide.find('.ui-slider-handle');
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));
  }
});
/* Fix handler to be inside of slider borders */
var $Handle = $Slide.find('.ui-slider-handle');
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));

#7

The simple way I handled it was to make the slider track transparent and add a background layer that I could style separately.

我处理它的简单方法是使滑块轨道透明,并添加一个我可以单独设置样式的背景图层。

HTML

<div class="slider-container">
  <div class="slider-background"></div>
  <div id="slider"></div>
</div>

CSS

.slider-container {
  position: relative;
}
.slider-background {
  position: absolute;
  top: 0;
  left: 10px;
  background: blue;
}
#slider {
  background: transparent;
}

#8

i realize this is an old post, but i found a much simpler solution when i was confronted with this problem:

我意识到这是一个老帖子,但当我遇到这个问题时,我发现了一个更简单的解决方案:

since the handle is purely a visual element, set the handle's margin-left to minus half the width of the handle. it will now properly center on the ends of the sliderail.

由于手柄纯粹是一个视觉元素,因此将手柄的边距设置为手柄宽度的一半。它现在将正确地居中在滑轨的两端。

eg:

#slider-handle { width: 4rem; margin-left: -2rem; }

#9

just add "padding-right" to the slider which is equal to the amount of the .ui-slider-handle class element.

只需在滑块上添加“padding-right”,它等于.ui-slider-handle类元素的数量。

#slider {
 height: 20px;
 width: 150px;
 background: #ccc;
 padding-right: 20px; (equal to the width of the handle below)
}
.ui-slider .ui-slider-handle {
  height: 20px;
  width: 20px;
  background: #333;
  display: block;
  position: relative;
}