jQuery Ui Slider - 工具提示仅显示在幻灯片上

Question

我的页面上有一个 jQuery UI slider ，并且希望工具提示始终显示，而不仅仅是在用户滑动 handle 时显示。

我如何强制保持可见，我尝试将 display:block !important; 和 visibility:visible; 规则附加到 html 元素，但这没有起作用。

HTML

       <form id="pumpSlider" action="" method="GET" align="center">
          <div align="center" class="productSlider">
             <p class="inlineLabel">PSI</p><div class="filterSlider" id="psiSlider"></div>  
             <input id="pS" type="hidden" name="p" value="<?php echo $pVal ?>">
          </div>
       </form>

JS

$(document).ready(function(){
    var initialValueA = document.getElementById("pS").value;

    var sliderTooltip = function(event, ui) {
        var curValue = ui.value || initialValueA;
        var target = ui.handle;                                     
        var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
        $(target).html(tooltip);    
    }

    $("#psiSlider").slider({
        range: "min",
        value: initialValueA,
        min: -1,
        max: <?php echo $psiOut ?>,
        step: 1,
        create: sliderTooltip,
        slide: sliderTooltip
    });
});

此代码创建工具提示并设置其值以在下面的事件代码中使用:

$(document).ready(function() {
$("#psiSlider" ).slider({
// options
start: function (event, ui) {

},
slide: function( event, ui ) {                     
    var curValue = ui.value || initialValueA;
    var target = ui.handle || $('.ui-slider-handle');                                     
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
    $(target).html(tooltip);



    var valA = $('#psiSlider').slider("value");
    document.getElementById('pS').value = valA;   
    var valB = $('#gpmSlider').slider("value");
    document.getElementById('gS').value = valB;                   

},
change: function(event, ui) {
    var val = $('#pS').slider("value");
    var val = $('#gS').slider("value");
    $('#pumpSlider').submit();
}
});

我需要添加什么才能强制工具提示始终显示？

Answer 1

JQuery UI Manual赛伊:

create( event, ui )
Note: The ui object is empty but included for consistency with other events.

这意味着您无法在创建时访问 ui.value。但您仍然可以通过相应的 getter 访问 value 属性。 .

$(function() {
      var showLabel = function(event,ui){
      var curValue = ui.value || $( this ).slider( "option", "value" );
            var target = ui.handle || $('.ui-slider-handle');                                     
            var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
            $(target).html(tooltip);
      };
    $( "#slider" ).slider({
      value:1,
      slide:showLabel,
      create:showLabel
      });
});

参见Proof of Concept JSFiddle