Question

如何让我的jQuery UI范围滑块在标记之上显示工具提示，如下所示：

 <span class="tooltip"></span> <div id="slider-range"></div>
 <button id="reset" type="button" class="btn btn-success" onclick="reset_slider('#slider-range')">Reset</button>

到目前为止，这是脚本：

$(document).ready(function() {
     $("#slider-range").slider({
         min: 0,
         max: 1000,
         step: 1,
         range: true,
         values: [0, 1000],
         slide: function(event, ui) {
             for (var i = 0; i < ui.values.length; ++i) {
                 $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
             }
         }
     });

     $("input.sliderValue").change(function() {
         var $this = $(this);
         $("#slider-range").slider("values", $this.data("index"), $this.val());

     });
 });

以下是它现在的样子，它缺少的是顶部的工具提示。

Answer 1

您需要结合两个示例：

工作示例：https://jsfiddle.net/Twisty/c90ee4xe/

<强> HTML

<div class="wrapper">
  <div id="slider-range">
  </div>
  <a href="" id="reset" class="btn btn-success">Reset</a>
</div>

<强> CSS

.wrapper {
  display: block;
  padding: 3px;
  margin-top: 20px;
}

#slider-range {
  width: 75%;
  margin: 20px;
}

#slider-range .ui-slider-handle {
  background: #0e6;
  border-radius: 6px;
}

#slider-range .ui-slider-handle.ui-state-active {
  border: #093;
}

#slider-range .ui-slider-range {
  background: #093;
}

.ui-tooltip,
.arrow:after {
  background: #000;
}

.ui-tooltip {
  color: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow.top {
  top: -16px;
  bottom: auto;
}

.arrow.left {
  left: 20%;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top:after {
  bottom: -20px;
  top: auto;
}

#reset {
  color: #fff;
  background: #090;
  border-radius: 6px;
  font-family: verdana;
  font-weight: bold;
  display: inline-block;
  padding: .25em;
  text-decoration: none;
}

<强>的JavaScript

$(document).ready(function() {
  $("#slider-range").slider({
    min: 0,
    max: 1000,
    step: 1,
    range: true,
    values: [0, 1000],
    slide: function(event, ui) {
      var low, high;
      low = $(this).slider("values", 0);
      high = $(this).slider("values", 1);
      $(this).tooltip("option", "content", low + ":" + high);
    }
  });

  $("#slider-range").tooltip({
    items: ".ui-slider",
    content: "0:1000",
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function(position, feedback) {
        $(this).css(position);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  });

  $("#reset").click(function(e) {
    e.preventDefault();
    $("#slider-range").slider("values", [0, 1000]).tooltip("option", "content", "0:1000").tooltip("close");
  });
});

对于Slider，我们做的大部分都是一样的。就在slide，我们更新工具提示的content而不是字段。

对于此示例，我们仅在1个滑块上使用1个工具提示。如果您有多个滑块，请参阅：http://jqueryui.com/tooltip/#custom-content这将更复杂。如果您的滑块数量较少，则可以为每个滑块制作工具提示。否则，它需要设置item选项以及将特定滑块绑定到其工具提示的一些方法。

工具提示非常简单。我们将content设置为我们的初始值，因为我们知道它将在以后更改。我们还设置了流动的position。这有助于根据feedback将工具提示移到上方或下方，我们将箭头设置为对应。

jQuery UI范围滑块工具提示

1 个答案: