Просмотров: 11 146

Делаем Jquery UI slider (ползунок).

Добрый день. Сегодня хочу показать, как можно сделать вот такой ползунок для вашего сайта и вытаскивать с него данные с помощью Jquery.

Такой ползунок можно применять во многих проектах и при решении многих задач. Мало ли где может понадобиться плавное изменение какой-либо величины.

Поэтому, берите это на вооружение и применяйте где это вам понадобиться.

Создание такого ползунка станет возможным при подключении к вашей веб-странице двух библиотек:

1) Библиотеки Jquery

Скачать ее можно здесь

http://jquery.com/

2) И дополнения к библиотеке Jquery UI (User Interphase) или пользовательский интерфейс.

Скачать ее можно здесь

http://jqueryui.com/

Вот код, который я использовал для создания такого ползунка:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ползунок Jquery UI</title>

<script src="http://code.jquery.com/jquery-latest.js"></script><!--Подключаем библиотеку Jquery-->

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><!--Подключаем стили CSS для библиотеки Jquery UI-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><!--Подключаем библиотеку Jquery UI-->

<script type="text/javascript">

$(document).ready(function(){
  $( "#slider" ).slider({
value : 0,//Значение, которое будет выставлено слайдеру при загрузке
  min : -150,//Минимально возможное значение на ползунке
  max : 150,//Максимально возможное значение на ползунке
  step : 1,//Шаг, с которым будет двигаться ползунок
  create: function( event, ui ) {
   val = $( "#slider" ).slider("value");//При создании слайдера, получаем его значение в перемен. val
  $( "#contentSlider" ).html( val );//Заполняем этим значением элемент с id contentSlider
 },
 slide: function( event, ui ) {
  $( "#contentSlider" ).html( ui.value );//При изменении значения ползунка заполняем элемент с id contentSlider
            }
        });
});
</script> 
</head>

<body> 
<span id="contentSlider"></span>
<div id="slider"></div>
</body>
</html>

Когда будете копировать этот код, лучше удалите мои комментарии в этом коде, т.к. может быть наложение их на рабочий код.

Вот несколько книг по Javascript и jQuery, которые могут быть полезными для вас:

07099997_cover-pdf-kniga-n-prohorenok-html-javascript-php-i-mysql-dzhentlmenskiy-nabor-web-mastera   12367630_cover-pdf-kniga-elizabet-robson-izuchaem-programmirovanie-na-javascript-9523650   01687985_cover-pdf-kniga-petr-tashkov-veb-mastering-na-100-html-css-javascript-php-cms-ajax-raskrutka

  • http://www.kildim.ru Мфтщ

    Подскажите, пожалуйста, как сделать слайдер с нелинейным выбором значений?
    Например, нужно дать возможность выбрать с помощью бегунка значения 100, 125, 200, 215?
    То есть как сделать шаг слайдера нелинейным?