Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2013, 10:22
Интересующийся
Отправить личное сообщение для x3zone Посмотреть профиль Найти все сообщения от x3zone
 
Регистрация: 30.08.2012
Сообщений: 26

Запрет передвижения ползунка jquery ui
Здравствуйте!
Можно ли как то запретить движение ползунка в слайдере выше определённого значения? http://jqueryui.com/slider/#range
Ответить с цитированием
  #2 (permalink)  
Старый 19.03.2013, 11:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

x3zone,
Вариант ограничение диапазона >400 с небольшой анимацией цвета.
<!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 () {

                $("#slider-range").slider({

                    range: true,

                    min: 0,

                    max: 500,

                    values: [75, 300],

                    slide: function (event, ui) {
                        if (ui.values[1] > 400) {
                            $(".ui-widget-header").animate({
                                "background-color": "#FF0000"
                            }, 1000);
                            return false
                        } else $(".ui-widget-header").css({
                                "background": "#CCCCCC"
                            });
                        $("#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>
Ответить с цитированием
  #3 (permalink)  
Старый 19.03.2013, 12:35
Интересующийся
Отправить личное сообщение для x3zone Посмотреть профиль Найти все сообщения от x3zone
 
Регистрация: 30.08.2012
Сообщений: 26

Спасибо!!!А можно ли отменить событие передвижения, например правого слайдера.Что бы его нельзя было двигать вручную, а только програмно?
Ответить с цитированием
  #4 (permalink)  
Старый 19.03.2013, 22:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

x3zone,
Запрет управлять правым ползунком мышью или клавиатурой, только программно - кнопки << >>
<!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 ()
          {

            $("#slider-range").slider(
              {

              range: true,
              min: 0,
              max: 500,
              values:[70, 300],
              step: 10,
              slide: function (event, ui) {
                  if ($(ui.handle).index() == 2) return false;
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

                },
              change: function (event, ui) {
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                  if (ui.values[1] > 400) {
                    $(".ui-widget-header").animate(
                      {
                      "background-color": "#FF0000"
                      }, 1000
                    );

                  } else $(".ui-widget-header").css(
                      {
                      "background": "#CCCCCC"
                      }
                    );
                }


              }
            );

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

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

            $('#btn').click(function ()
              {
                var step = $('#slider-range').slider('option', 'step'),
                values = $('#slider-range').slider('values');
                values[1] += step;
                $('#slider-range').slider('values', values)
              }
            )

            $('#btn1').click(function ()
              {
                var step = $('#slider-range').slider('option', 'step'),
                values = $('#slider-range').slider('values');
                values[1] -= step;
                $('#slider-range').slider('values', values)
              }
            )


          }
        );
        </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>
        <input id="btn1" name="" type="button" value="<<">
        <input id="btn" name="" type="button" value=">>">
    </body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
jQuery UI Slider изменяет ширину ползунка SkaN2412 jQuery 1 26.11.2012 13:03
Очистка ползунка jquery ui x3zone Events/DOM/Window 0 18.10.2012 11:34
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08
jQuery. Запрет выполнения события если другое уже выполняется. Kostyk92 Элементы интерфейса 4 09.03.2012 23:46