5

我的问题与一年前提出的这个问题有关：

有没有办法在 jquery ui 滑块中显示“滴答声”或“步数”？

该问题中的 OP 想知道如何根据滑块中刻度的位置添加视觉步骤。该解决方案是手动解决方案，不适用于动态滴答方法。

我的问题是，如果我在加载时加载了多个滑块，每个滑块都有不同的步骤，并且在任何时间点，步骤数都可能发生变化。滑块 API 中是否有任何我可能忽略的可用作步骤 div 的参考回调，让它知道每个步骤的位置。

例如，如果其中一个步骤位于“左侧：28%”。该信息在初始化后是否存储在滑块中的任何位置，是否可以访问以在其下方创建动态步骤视觉效果？

4

1 回答 1

0

此代码将根据您的最大值和步长值创建可视步长。它将在多个滑块上工作，并且在滑块创建事件上创建视觉步骤。如果您更改事件或某事的 stepvalue，您可以简单地清除标签 div 并重新运行 create 函数。

您仍然需要根据您希望它的外观来设置 div 的样式。

希望这可以帮助！

jsFiddle

html

<div class="slider-holder">
  <div class="slider"></div>
  <div class="slider-labels"></div>
</div>

CSS

.slider-holder {
  width:500px;
  height:50px;
  margin:auto;
}
.slider-labels {
   position:relative;
}
.slider-labels span {
  position:absolute;
  color:#000;
}

Javascript

$( ".slider" ).slider({
  min: 0,
  max: 100,
  step: 10,
  create : function(event,ui) {
    var maxValue = $(this).slider("option","max");
    var stepValue = $(this).slider("option","step");
    var steps = maxValue/stepValue;
    for(i=0;i<=steps;i++) {
      var val = stepValue*i; 
      $(event.target).next().append('<span style="left:'+val+'%;">'+val+'</span>');
    }
  }
});
于 2013-01-16T22:43:04.757 回答