如何阻止jquery UI滑块滑动到排水沟之外？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何阻止jquery UI滑块滑动到排水沟之外？相关的知识，希望对你有一定的参考价值。

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

为了澄清我添加下面的图表，显示问题（由于句柄很小，它非常微妙，但是如果你在CSS中创建一个大句柄，句柄去 究竟 它的宽度超过排水沟的一半）。

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

<!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>
答案

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

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

扩大手柄时也是如此。在你的情况下，手柄移动超过右边缘宽度的一半，那么我认为它在左边延伸不到一半？当playing with the CSS a bit我用巨大的手柄获得同样的效果时，例如：

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

甚至更好的shown使用箭头，有点黑客：

.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;
}

但是，至于您作为滚动条的用法，请参阅slider scrollbar demo，它似乎做你想要的？使用滑块操纵页面上内容的位置。在这种情况下，它充当滚动条，有可能在需要时捕获值。

另一答案

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

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

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

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

另一答案

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

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

另一答案

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

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

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

另一答案

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

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

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

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

valPercent = valPercent * 0.95 + 3.1;

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

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

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

如果您需要帮助，可以给我发电子邮件至info@germanunique.com或留言。这是我在StackOveflow上的第一篇文章，我希望它可以帮助那些有同样问题的人。

再见！

另一答案

对我来说，这是：

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')));
另一答案

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

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;
}
另一答案

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

因为手柄纯粹是一个视觉元素，所以将手柄的margin-left设置为手柄的width的一半。它现在将正确地居中在滑轨的两端。

例如：

#slider-handle { width: 4rem; margin-left: -2rem; }
另一答案

只需在滑块上添加“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;
}

以上是关于如何阻止jquery UI滑块滑动到排水沟之外？的主要内容，如果未能解决你的问题，请参考以下文章

如何限制 jQuery UI 滑块的范围？

Jquery滑块在按钮单击时更新滑块位置时停止滑动

JQuery UI滑块，仅加载Button而不加载Range并且滑块不滑动

jquery-ui滑块手柄的最终位置是100％ - 将它放在滑块外面

jQuery滑块：颜色更改菜单不会与滑块的其余部分同步

更改 jQuery UI 滑块值选项时动画滑块句柄？