4

我已经能够完美地设计它，但让它留在它的容器中一直是一个挑战。左边距修复似乎对我不起作用。

这是一个 jsfiddle：http: //jsfiddle.net/Erugp/

4

3 回答 3

9

解决方法是：不需要包裹任何东西，只需将句柄的左边距设置为其宽度的 1/2 的负值即可。如所述：http ://bugs.jqueryui.com/ticket/3893

于 2013-10-03T14:46:24.347 回答
3

问题是 jquery UI 滑块使用带有相对值的左侧 CSS 属性来为滑块设置动画。这意味着它将把手柄的左边缘从滑块的左边缘一直滑到另一边的边缘，溢出。一种解决方案是使滑块 div 更小，并用另一个保存样式的 div 包裹它。外部 div 宽度 = 滑块宽度 + 手柄 div。

在对 css 大小和边距进行了一些摆弄之后，它对我有用。

于 2011-12-18T11:28:36.377 回答
3

使用 javascript 修复它：

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

这是你的小提琴固定：http: //jsfiddle.net/he04hqg3/

于 2014-10-19T14:09:24.837 回答