13

我正在使用 jquery-ui 滑块作为横向滚动条，并且遇到了手柄滑出末端排水沟的问题（如果将滑块向右滑动最远，可以在此处看到）。我已经尝试了所有我能想到的 CSS 来试图让句柄不超过排水沟，但无济于事。任何建议将不胜感激。

为了澄清，我添加了下图来显示问题（它非常微妙，因为句柄很小，但是如果你在 CSS 中创建一个大句柄，句柄 正好超出排水沟的一半宽度）。

这是问题的jsbin。基本上我希望把手留在排水沟内。

替代文字

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

  <style type="text/css">

  .demo {
     width: 800px;
     margin: 50px auto 0 auto;
  }



  .ui-slider-horizontal  {
    background: #DFEFFC none repeat scroll 0 0;
  }

  .ui-slider .ui-slider-handle {
    background-image:url(http://img207.imageshack.us/img207/7760/sliderhandle.png);
    cursor:default;
    height:15px;
    position: absolute;
    width:27px;
    z-index:2;   
    margin-left: -1px;
    margin-top: 3px;
  }

  .ui-slider 
  {
    position:relative;
    text-align:left;
  }


  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider({
    slide: function( event, ui ) {      

            //normalise handle position between 0 and 1 relative to slider width
            var range = $("#slider").width();//width of slider
            var normalised = $("#slider1handle").position().left / range;

            //normalise between desired range: 0:HandleWidth
            var range2 = $("#slider1handle").width();
            normalised = (normalised*range2) + 1;      

            var marginAmount = -1*normalised;
            $("#slider1handle").css("margin-left", marginAmount);      
        }

    });
    $('a.ui-slider-handle').attr('id', "slider1handle");



  });
  </script>
</head>
<body>
<div class="demo">
  <div id="slider"></div>
</div>
</body>
</html>
4

9 回答 9

14

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

更像是其宽度的一半，因此它并没有真正移过滑块的末端。正确对齐屏幕截图后，您会看到手柄的中心位于滑块的末端，就像我希望它用于非常精确的设置一样。当左侧为 0%，右侧为 100% 时，手柄必须稍微移过末端以允许选择该 100%。

jQuery 滑块用一条线表示滑块的结束

扩大手柄时也是如此。在您的情况下，当手柄在右侧边缘移动超过其宽度的一半时，那么我假设它在左侧延伸不到一半？稍微使用 CSS时，我会得到与巨大句柄相同的效果，例如：

.ui-slider-horizo​​ntal .ui-state-default {
  /** 默认值：
      左边距：-0.6em；
      顶部：-0.3em；
  */
  宽度：69px；
  高度：140px；
  左边距：-39px；
  顶部：-68px；
}

使用箭头更好地显示，有点黑客：

.ui-slider-horizo​​ntal .ui-state-default {
  宽度：40px；
  左边距：-20px；
  顶部：15px；
  背景颜色：白色；
  背景图片: url('http://i.stack.imgur.com/ObK9i.png');
  背景重复：不重复；
  边框：0；
}

带箭头的滑块显示排水沟

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

于 2009-08-28T16:53:28.780 回答
3

如果您在滑块的任一端添加一个盖子，您可以在不更改滑块本身的任何内容的情况下模拟效果。

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

只需添加一些非常基本的 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);
}

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

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

于 2011-05-05T17:46:02.807 回答
1

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

考虑句柄img是100px，并且包容div是250px广泛的。比遏制div应该有宽度值 250 - 100 = 150px 并margin-right:100px让 maxZoom img 显示在正确的位置。比您对句柄图像的确切限制...

于 2011-05-31T20:00:05.243 回答
0

我找到了解决方案。但首先：我在使用单个滑块和范围滑块时遇到了同样的问题。应用任何 CSS 都行不通，任何 Javascript-Fix-Approach 也行不通。

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

我查找了计算句柄左边距的那段代码，减少了 with 并添加了一个标准的左边距。

使用您选择的编辑器打开 jquery-ui.js 并转到 ~13170 行并找到函数 _refreshValue。您还可以搜索“valPercent”的第一次出现在“valPercent = .....”行之后，我添加了以下内容：

valPercent = valPercent * 0.95 + 3.1；

这使我的手柄在范围和排水沟内完美地对齐。也许您需要根据您使用的 ui 模板来调整这些值以获得最佳设置，但至少这个

因为我需要任何声誉才能发布图片，所以这是我为您绘制的链接。

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

如果您需要这方面的帮助，您可以给我写电子邮件至 info@germanunique.com 或留下回复。这是我在 StackOveflow 上的第一篇文章，希望对遇到同样问题的人有所帮助。

再见 ！

于 2013-07-21T22:44:50.743 回答
0

对我来说是这样的：

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')));
于 2014-10-19T14:05:37.607 回答
0

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

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;
}
于 2015-08-11T18:26:59.720 回答
0

我意识到这是一个旧帖子，但是当我遇到这个问题时，我找到了一个更简单的解决方案：

由于句柄纯粹是一个视觉元素，因此将句柄设置为句柄margin-left的减半width。它现在将正确地居中在滑轨的末端。

例如：

#slider-handle { width: 4rem; margin-left: -2rem; }
于 2018-07-03T03:56:03.413 回答
-1

或者你可以用数学来做，像这样：

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");
});

这可以改进，但它是一个快速修复。

于 2010-11-21T11:24:38.963 回答
-2

只需将“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;
}
于 2013-04-26T16:42:56.813 回答