Question

我的页面上有一个jQuery UI滑块，希望工具提示始终显示，而不仅仅是当用户滑动手柄时。

我如何强制保持可见，我尝试将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 sais：

创建（event，ui）
  注意：ui对象为空，但包含与其他事件保持一致。

这意味着您无法在创建时访问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

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

1 个答案: