Пользовательский интерфейс Jquery изначально скрывает ручку слайдера - PullRequest
Новая
       47

Пользовательский интерфейс Jquery изначально скрывает ручку слайдера

0 голосов
/ 11 декабря 2019

Я установил слайдер с помощью jquery ui. Я хочу, чтобы ручка слайдера была изначально скрыта и появлялась только после того, как пользователь нажал на слайдер. Мне удалось скрыть дескриптор, установив display в none в классе ui-slider-handle. Однако я не могу изменить его позже.

1 Ответ

0 голосов
/ 11 декабря 2019

Рассмотрим следующий фрагмент кода, основанный на примере https://api.jqueryui.com/slider/. 

$(function() {
  $("#slider").slider({
    start: function() {
      $(".ui-slider-handle", this).show();
    }
  });
  var sw = $("#slider").slider("widget");
  $(".ui-slider-handle", sw).hide();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider"></div>

Да, вы можете скрыть дескриптор с помощью CSS, чтобы сделать его снова появившимся, это будет означать просто переход на CSS со стилем элемента: 

$(".ui-slider-handle").css("display", "block");

Пример выше немного более конкретен, но, по сути, делает то же самое. После инициализации ползунка вы можете вызвать метод widget для доступа к различным элементам. Мы можем использовать .hide() на ручке. Когда пользователь нажимает на ползунок, это вызывает событие start, и мы можем .show() обработчик в то время.

Если у вас есть несколько ползунков, класс ui-slider-handle может быть слишком неоднозначным, поэтомупоможет использование контекста селектора.

Внутри контекста селектора реализован метод .find(), поэтому $( "span", this ) эквивалентно $( this ).find( "span" ).

См. Подробнее:

...