Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2013, 02:15
Новичок на форуме
Отправить личное сообщение для Oleg_Pupkin Посмотреть профиль Найти все сообщения от Oleg_Pupkin
 
Регистрация: 02.09.2013
Сообщений: 2

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

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

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


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

Ну и, как требуется правилами сайта: "Помогите!", "Не работает скрипт!", "Я нуб, нужен совет"
Ответить с цитированием
  #2 (permalink)  
Старый 04.09.2013, 11:08
Новичок на форуме
Отправить личное сообщение для Oleg_Pupkin Посмотреть профиль Найти все сообщения от Oleg_Pupkin
 
Регистрация: 02.09.2013
Сообщений: 2

Я очень извиняюсь, но никто не подскажет хотя бы как к нему доступ получить (левому ползунку), перерыл всё - ничего не нашёл, а по английски ищ шпрехен нищт гут. Зе риз вэ вери компликейтед лэнгвэджь ту май спэшл олимпикс брэйн.
Ответить с цитированием
  #3 (permalink)  
Старый 04.09.2013, 12:32
_0_ _0_ вне форума
Аспирант
Отправить личное сообщение для _0_ Посмотреть профиль Найти все сообщения от _0_
 
Регистрация: 10.05.2013
Сообщений: 56

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

Прототип начинается с 12653 строки, с кода
$.widget( "ui.slider", $.ui.mouse, {...

в нем есть метод _mouseCapture, возможно там описаны правила, которые можно изменить, если наследовать виджет
Ответить с цитированием
  #4 (permalink)  
Старый 04.09.2013, 12:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,660

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите как вызвать функцию jQuery по клику checkbox shurek Общие вопросы Javascript 4 26.07.2013 14:27
Фильтр Jquery Slider UI как на Я.Маркет GTAlex Элементы интерфейса 1 07.06.2013 14:15
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 23.07.2011 23:19
jQuery range slider Turner jQuery 0 15.03.2011 10:51