Форум

Oleg_Pupkin · #1 (**permalink**) 02.09.2013, 03:15

Возник вопрос по jQuery UI Range slider - как заблокировать левый ползунок во время первого клика?

Немного философии о юзабилити:
Дело в том, что при выборе диапазона цен человека интересует в первую очередь максимальная цена, многие кликают на полоску в районе минимальных цен (левая часть слайдера), и соответственно туда приезжает ползунок значения "цена от". Одарённые пользователи (а таких большинство) не понимают почему им показываются товары "от 1 500 руб", а не "до 1 500 руб". Проблема не надуманная - смотрел в вебвизоре поведение, получал жалобы клиентов, сам попарился пару раз (я тоже не эйнштейн).

Поэтому во время первого клика должен ползти в место клика правый ползунок, в каком бы месте этот клик не произошёл.

Собственно сам Range slider:
http://jqueryui.com/slider/#range

Ну и, как требуется правилами сайта: "Помогите!", "Не работает скрипт!", "Я нуб, нужен совет"

Oleg_Pupkin · #2 (**permalink**) 04.09.2013, 12:08

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

_0_ · #3 (**permalink**) 04.09.2013, 13:32

Все просто. Попробуй посмотреть DOM после формирования виджета, он состоит всего из четырех элементов, а так же посмотри прототип в файле jquery-ui.js.

Прототип начинается с 12653 строки, с кода

$.widget( "ui.slider", $.ui.mouse, {...

в нем есть метод _mouseCapture, возможно там описаны правила, которые можно изменить, если наследовать виджет

рони · #4 (**permalink**) 04.09.2013, 13:44

Сообщение от Oleg_Pupkin

во время первого клика должен ползти в место клика правый ползунок, в каком бы месте этот клик не произошёл.

Вариант блокировки первого клика ...

<!doctype html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Slider - Range slider</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
        $(function ()
          {
            var n = 0;
            $("#slider-range").slider(
              {
              range: true,
              min: 0,
              max: 500,
              values:[70, 300],
              step: 10,
              slide: function (event, ui) {
                  if ($(ui.handle).index() == 1 && !n) {$('#slider-range').slider('values', [70,ui.values[0]]);n++;return false};
                     $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

                },
              change: function (event, ui) {
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                                }
                }
            );

            $("#amount").val("$" + $("#slider-range").slider("values", 0) +

              " - $" + $("#slider-range").slider("values", 1));

          }
        );
        </script>
    </head>

    <body>
        <p>
            <label for="amount">Price range:</label>
            <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-range"></div>
    </body>

</html>

Форум

Справочник

Discord чат

Курсы javascript