Question

我正在使用jQuery 2.1和jQuery UI 1.11.1。我想在我的页面上设置一个滑块，我使用下面的JS

$(function() {
    $(".slider")
    .slider({
        max: 12,
        change: function(event, ui) { 
            alert(ui.value); 
        }
    })
    .slider("pips", {
        rest: "label"
    });
});

问题是，它看起来像选项＆＃34; 0＆＃34;最初被选中，我希望勾选图形不会出现在滑块上，直到有人点击某处 - http://jsfiddle.net/u72596ta/4/。如何设置我的滑块，以便在有人点击某些内容之前不会出现勾号？

Answer 1

只需删除课程

即可

 $(function() {
        $(".slider")
        .slider({
            max: 12,
            change: function(event, ui) { 
                alert(ui.value); 
            }
        })
        .slider("pips", {
            rest: "label"
        });
      $('.ui-slider-pip-initial').removeClass('ui-slider-pip-selected');
        $('.ui-slider-pip-initial').removeClass('ui-slider-pip-initial');
    });

Answer 2

您可以使用以下方法隐藏滑块手柄：

.ui-slider-handle {
  display: none;
}

如果您在更改方法中添加$('.ui-slider-handle').show()，则会在点击时显示。

<强> jsFiddle example

Answer 3

创建滑块后隐藏处理程序，然后在值更改后显示它。

$(function() {
    $(".slider")
    .slider({
        max: 12,
        value:'',
        create: function(event, ui) {
              $(".ui-slider-handle").hide();
        },
        change: function(event, ui) { 
            $(".ui-slider-handle").show().focus();
            //alert(ui.value); 
        }
    })
    .slider("pips", {
        rest: "label"
    });
});

http://jsfiddle.net/u72596ta/7/

默认情况下，如何在我的jQuery UI滑块中选择任何内容？

3 个答案: