<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как использовать jQuery UI Slider

Как использовать jQuery UI Slider

На прошлом уроке мы разобрались, зачем нужна библиотека jQuery UI и как её подключить. На этом уроке подробнее остановимся на виджете Slider. Речь идёт о слайдере с ценовым диапазоном и двумя ползунками.

Найти его можно по этому адресу: https://jqueryui.com/slider/#range

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

По умолчанию в библиотеке jQuery UI, уже заданы значения нижней и верхней цены слайдера: $75 - $300.

Как использовать jQuery UI slider.

Внизу страницы будет ссылка на код слайдера: view source. Если вам не нужна никакая кастомизация, то просто копируете этот код и вставляете к себе на сайт. Но так обычно не бывает, хотя бы внешний вид слайдера все равно надо будет подстраивать под ваш сайт.

Jquery UI slider - изменить CSS

Вы видите, что стили цены в поле ввода - input, встроены прямо в HTML-код и их легко изменить, кстати рамки поля ввода - border, обнулены, поэтому не сразу понятно, что в HTML разметке присутствует input. Это такой известный приём в CSS.

<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 type="text" id="amount" style="border: 1; color: #77d5f7; font-weight: bold;" />
Как использовать jQuery UI slider.

Сам слайдер-ползунок находится в блоке div с идентификатором slider-range. Для изменения внешнего вида ползунка, можно воспользоваться встроенным на сайте jQuery UI конструктором тем - ThemeRoller. Скачать готовую тему или собрать свою, затем скачать custom архив с обновленным файлом jquery-ui.css и подключить между тегами head, ниже остальных.

<link href="jquery-ui.css" rel="stylesheet">

Теперь у элемента slider совсем другая цветовая гамма.

Как использовать jQuery UI slider.

Но классический способ, как изменить стили - это подключить свой CSS файл, с помощью инспектора кода найти все классы у слайдера и переопределить на свои. Поскольку конструктор тем у фреймворков, это скорее исключение, чем правило.

Функционал виджета Slider

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

Как использовать jQuery UI slider.

После загрузки DOM дерева, мы обращаемся к #slider-range и вызываем на нём метод .slider.

$( "#slider-range" ).slider

В методе .slider передаем объект с дополнительными настройками. Минимальное значение у регулятора - 0, а максимальное - 500. Стартовые значения ползунков.

values: [75, 300],

Описываем функцию, которая будет вызываться при возникновении события .slide. Эта функция в качестве аргументов принимает два параметра в скобочках. При передвижении ползунков мы будем получать элемент по идентификатору #amount и задавать с помощью метода .val значения из текстового поля. Обращение - ui.values[0] к значение первого ползунка (75) и обращение - ui.values[1] к значению второго ползунка (300).

slide: function (event, ui) {
  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
  }

Чтобы задать дефолтное значение, при загрузке страницы, чтобы мы сразу видели какое-то значение. Мы получаем элемент по идентификатору #amount и задаем это значение. Метод val выводит строку, где мы хотим получить доступ к обоим значениям ползунков. Итак при изменении позиции ползунков, изменяются и значения в текстовом поле.

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

Это был уже готовый код слайдера, надо только следить за тем, чтобы названия селекторов в HTML-коде совпадали с селекторами кода JQuery UI. Для работы с документацией библиотеки, без базовых знаний JavaScript не обойтись, которые можно подчерпнуть в моём видео-курсе.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.