Слайдер jQueryUI, встроенный в Accordion, устраняет ошибки в браузере Chrome

Мне нужно добавить элементы управления ползунком в заголовки аккордеона.

Мне удалось довольно хорошо смешать их вместе, используя демонстрации jQuery UI как для аккордеона, так и для слайдера.

страница jsfiddle.

<div id="accordion">
  <div>
    <h3>Section 1</h3>
    <div class="slider" id="slider1"></div>
  </div>
  <div>
    <p>Mauris mauris ante</p>
  </div>
  <div>
    <h3>Section 2</h3>
    <div class="slider" id="slider2"></div>
  </div>
  <div>
    <p>Sed non urna.o.</p>
  </div>
  <div>
    <h3>Section 3</h3>
    <div class="slider" id="slider3">
  </div>
</div>
<div>
  <p>Nam enim risus.</p>
  <ul>
    <li>List item one</li>
    <li>List item two</li>
  </ul>
</div>


<script>
 $( "#accordion" ).accordion();
 $( ".slider" ).slider({
  range: true,
  min: 0,
  max: 7,
  values: [0, 7],
  step: 0.5,
  slide: function( event, ui ) {
    var id=$(this).attr('id');
    $( id).val( ui.values[0] + " - " + ui.values[1] );

    event.stopPropagation();
  }   }); $( ".slider").mouseup();

</script>

The problem is in moving a slider on an unopened accordion. Since the slider control snaps along the slide most of the time the user "mouseup"s away from slider button. This works as planned in Firefox [29.0.1], however in Chrome [35.0] a "mouseup" away from the slider button causes the accordion to open; undesired.

Закрытый аккордеон. Кнопка перемещения ползунка. Наведение курсора на кнопку ползунка.

-> Ползунок перемещается аккордеоном, но не открывается [PASS]

Закрытый аккордеон. Кнопка перемещения ползунка. Поднятие мыши с выключенным курсором кнопки ползунка, но все еще на правиле ползунка.

-> Ползунок перемещается аккордеоном, открывается [FAIL]

Закрытый аккордеон Переместите кнопку ползунка Мышь вверх с выключенным курсором из аккордеона

-> Ползунок перемещается аккордеоном, но не открывается [PASS]

Поскольку он работает для Firefox, но не для Chrome (и IE), я думаю, что это, вероятно, ошибка jQuery/jQuery-ui, я довольно много узнал об этой проблеме, я могу упустить что-то очевидное, есть ли быстрое решение, которое я могу использовать, чтобы обойти это? Или это щель в том, как jQuery работает над особенностями браузера.


google-chrome jquery jquery-ui jquery-ui-slider jquery-ui-accordion
person zeristor    schedule 18.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете временно отключить активацию другой вкладки аккордеона. Однако этот метод является грубым, так как требует таймера и создает крошечную вероятность состояния гонки.

Сначала создайте флаг, который будет оценивать ваш аккордеон:

var tempDisable = false;

Измените свой аккордеон, чтобы он не активировал другую вкладку, когда установлен флаг:

$("#accordion").accordion({
    beforeActivate: function() {
        if (tempDisable) {
            return false;
        }
    }
});

Наконец, при запуске/остановке перетаскивания ползунка установите/снимите флажок:

    [...]
    start: function() {
        tempDisable = true;
    },
    stop: function() {
        setTimeout(function() {
            tempDisable = false;
        }, 10);
    }
    [...]

Я обновил ваш JSFiddle полностью работающим кодом. Как указано выше, это не идеально, потому что (поскольку событие stop ползунка произойдет до события beforeActivate панели) требуется тайм-аут. Я установил его на 10 мс, что должно быть хорошим балансом между процессором с высокой нагрузкой и очень быстрым кликом пользователя.

person UweB    schedule 21.07.2014