Если Вы уже немного познакомились с библиотекой jQuery, может быть уже скачали ее и немного помучали, давайте перейдем к чисто практической части и попробуем создать слайдер на основе плагина, включенного в состав библиотеки. Что такое слайдер? Может быть при своих путешествиях по сети Вы уже встречали что-то вроде линейки с одним или двумя «ползунками», которые пользователь может перемещать с помощью мыши, выбирая таким образом значение (диапазон значений) чего-либо. Внимание! Эта статья устарела! Новую статью можно почитать здесь.
На сайте разработчиков приведен пример того, как просто это сделать:

$("#example").slider();

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

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

А теперь давайте разберем код. Я буду приводить только те блоки кода, на которые необходимо обратить внимание и сразу же давать пояснения, опуская незначительные в данном примере детали.
Итак, в разделе HEAD нашей страницы необходимо подключить четыре файла. Вот так:

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.slider.js"></script>

Здесь первым подключается собственно библиотека jQuery, затем плагин, который отвечает за работу с размерами элементов, далее – файл, выполняющий обработку событий мышки и наконец тот самый файл, который и позволит нам создать свой слайдер.

Далее в этом же разделе HEAD включена таблица стилей. Здесь Вы можете творить, что душе угодно, но обратите особенное внимание на классы .ui-slider и .ui-slider-handle. Их не стоит переименовывать, так как именно с этими классами работает файл ui.slider.js. Все остальное не так важно – это уже дело вкуса.

Ну и наконец мы добрались до самого интересного места – кода, который создает слайдер и работает с ним. Это особенное место, поэтому здесь я приведу этот код полностью.

<script type="text/javascript">
$(document).ready(function(){
  $("#Slider").slider({
    stepping: 1,
    minValue: 0,
    maxValue: 10,
    slide: function(e,ui) {
      $("#minResult").text( ui.values[0] );
      $("#maxResult").text( ui.values[1] );
    },
    stop: function(e,ui) {
      $("#textResult").text("Выбран диапазон значений от "
      + ui.values[0] + " до " + ui.values[1]);
    }
  });
});
</script>

Код самого слайдера отделен комментариями, а начинается код очень интересной функцией

$(document).ready(function(){
...
});

которая отслеживает момент готовности DOM. С ней мы познакомимся позднее, а пока продолжим разбирать сам слайдер.
В первой строке мы в общем просто сообщаем, что слайдером будет служить некий элемент с идентификатором #Slider. И далее задаем значения шага stepping: 1, минимального и максимального значения шкалы minValue: 0 и maxValue: 10, затем сообщаем, что в момент перемещения движка надо отслеживать его значения и передавать минимальное и максимальное значения в соответственно в элементы с идентификаторами #minResult и #maxResult и в тот момент, когда Вы отпускаете клавишу мыши, в элемент с идентификатором #textResult будет вставлена строка текста, в которую будут включены окончательные минимальное и максимальное значения.
Что делать с этими значениями дальше – решать Вам самим. Можно например передать их с помощью Ajax-запроса какому-либо файлу, который обратится к базе данных, выберет необходимые значения, определенные данными, снятыми со слайдера и вернет результат обратно в браузер пользователя.
Вот так. В общем не очень сложно.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal