Затем устанавливаем минимальное значение по умолчанию равным 35 (будет использоваться при первой загрузке).
Сначала сохраняем элемент слайдера как переменную.
Нужно изменить конфигурацию слайдера для нашего маленького проекта.
Ниже приведенный код устанавливает слайдер на странице. Но пока будет использоваться конфигурация по умолчанию.
Шаг 3. Устанавливаем слайдер
<span class="volume"></span>
<div id="slider"></div>
<span class="tooltip"></span>
Разметка для слайдера очень простая. Все необходимы элементы - подсказка, слайдер и индикатор уровня - размещаются внутри тега section. А jQuery UI будет автоматически генерировать все остальное.
Шаг 2. Разметка HTML
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
Второй, который будет использоваться в нашем уроке - сформировать и загрузить библиотеку jQuery UI непосредственно на . Так как нам нужен только , выбираем только библиотеку Slider (с нужными модулями). В результате получится файл для загрузки, в котором будет отсутствовать лишнее. Затем присоединим библиотеки к нашему HTML документу (предпочтительно внизу страницы перед закрывающим тегом </body>). Такой вариант выбран нами по причине использования страницы в режиме оффлайн.
Первый - мы можем подключиться непосредственно к одному из следующих CDN: , и . Такой вариант имеет массу преимуществ для реального проекта, но их обсуждение выходит за рамки нашего урока.
Для работы нашего элемента требуется и . У нас есть два варианта для использования данных библиотек.
В данном уроке мы сделаем стильный элемент для регулировки уровня звука на основе слайдера из jQuery UI. Слайдер будет оформляться с помощью частей файла PSD со стилем для таких элементов.
Регулятор уровня громкости с использованием слайдера jQuery UI
Регулятор уровня громкости с использованием слайдера jQuery UI
Частная коллекция качественных материалов для тех, кто делает сайты
Регулятор уровня громкости с использованием слайдера jQuery UI
Комментариев нет:
Отправить комментарий