<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

Подписавшись по 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):

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