Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выловить и отправить значение ползунка (https://javascript.ru/forum/dom-window/51013-vylovit-i-otpravit-znachenie-polzunka.html)

MaksLuk 20.10.2014 22:12

Выловить и отправить значение ползунка
 
Есть простой ползунок....Как с помощью XMLHttpRequest(); отправить GET запрос допустим такого вида http://192.168.1.100/?lamp=1,ну так далее ?lamp=2, ?lamp=3,?lamp=4.....(Управление светодиодами ....тянем ползунок....запросы отправляются....светодиоды загораются в соответствии со значениями ?lamp=1,?lamp=2, ?lamp=3,?lamp=4....ну и допустим до 100 )....?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="/ui/jqueryui.custom.js"></script>
  <link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" />
  <style>
    body{padding:15px}
  </style>
</head>
<body>
  <div id="slider-range"></div>
  <p>
    <label for="amount">Максимальная цена:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  </p>

  <script>
    $("#slider-range").slider({
      range: "min",
      min: 1,
      max: 500,
      value: 37,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "value" ));
  </script>
</body>
</html>

danik.js 20.10.2014 22:24

А чем input[type=range] не устраивает, кстати?

MaksLuk 20.10.2014 22:40

Если я не ошибаюсь input[type=range] нельзя стилизовать....ну то есть добавить риски,градусы,значения шкалы....
По идее в примере значение ползунка сидит в ui.value....значит...
к $( "#amount" ).val( "$" + ui.value ); присвоить переменную и далее отправить и все...???

var send = $( "#amount" ).val( "$" + ui.value );
var xhr = new XMLHttpRequest();
  if (send>0){
             xhr.open('GET','http://192.168.1.100/?lamp='+send);
             xhr.send(null);  
            }

danik.js 20.10.2014 22:53

Цитата:

Сообщение от MaksLuk
нельзя стилизовать

По большому счету - да. Тем не менее, webkit, ie и firefox предоставляют возможность сделать это. Правда в каждом браузере свои собственные псевдоклассы/элементы. http://javascript.ru/forum/dom-windo...-polzunok.html

Цитата:

Сообщение от MaksLuk
var send = $( "#amount" ).val( "$" + ui.value );

Функция val() вызванная с агрументом, вернет объект jQuery.
Странно, почему тебе не пришло в голову передать сразу ui.value?


$.get('http://192.168.1.100/', {lamp: ui.value});

MaksLuk 20.10.2014 22:54

Хотя..нет стилизация возможна....но по моему лучше получиться с помощью JQuery UI

MaksLuk 21.10.2014 20:32

Добрый вечер форум javascript и его пользователи!
danik.js,приветствую! как избавиться от амперсанда (&) после http://192.168.1.100/?......хотя это наверное особенность GET запроса в JQuery...
Вот что вижу в консоли.....
GET http://192.168.1.100/?&lamp=1 net::ERR_CONNECTION_TIMED_OUT jquery-1.8.3.js:8434
2014-10-21 20:23:26.772GET http://192.168.1.100/?&lamp=2 net::ERR_CONNECTION_TIMED_OUT

JHUS 21.10.2014 23:19

неплохо бы увидеть код который формирует урл

MaksLuk 22.10.2014 08:11

Код,в начале темы + то что написал danik.js....$.get('http://192.168.1.100/', {lamp: ui.value});

danik.js 22.10.2014 09:25

MaksLuk, ты наверняка в url добавил знак "?". Не нужно этого делать.


Часовой пояс GMT +3, время: 10:07.