2

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

我将如何强制保持可见，我尝试将display:block !important;andvisibility: 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();
}
});

为了强制工具提示始终显示，我需要添加什么？

4

1 回答 1

3

JQuery UI 手册说：

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

参见概念证明 JSFiddle

于 2013-09-08T16:14:42.433 回答