Создание регулятора громкости с помощью jQuery UI Slider

Если вы охотник за халявой, скорее всего, вы загрузили много пользовательских интерфейсов PSD. Некоторые из них действительно удивительны и могут сэкономить наше время, создав прототип дизайна, над которым мы работали.

В этом посте мы будем кодировать PSD-интерфейс и превращать его во что-то более функциональное. Мы собираемся закодировать следующий PSD UI Slider для применения в качестве темы jQuery UI Slider..

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

Хорошо, теперь давайте начнем.

Шаг 1: пользовательский интерфейс jQuery

Нам, очевидно, нужны jQuery и библиотека jQuery UI, и у нас есть два варианта их использования. Во-первых, мы можем связать jQuery и пользовательский интерфейс jQuery напрямую со следующего CDN: CDN Google Ajax API, Microsoft CDN и jQuery CDN. Существует много преимуществ использования размещенного файла CDN, когда мы размещаем наш сайт в режиме онлайн..

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

Мы будем загружать и настраивать библиотеку jQuery UI со страницы официального скачивания. Поскольку нам нужен только плагин Slider, мы выберем только библиотеку Slider вместе с ее зависимостями и оставим остальные. Таким образом, файлы, которые мы используем, будут намного тоньше и могут загружаться быстрее. После этого свяжите все эти библиотеки с документом HTML, предпочтительно внизу страницы или перед закрытием. тег, чтобы быть точным.

Шаг 2: HTML-разметка

Разметка для ползунка очень проста, мы обернули всю необходимую разметку - подсказку, ползунок и объем - в HTML5 раздел тег. Пользовательский интерфейс jQuery будет автоматически генерировать остальные.

Шаг 3: Установите пользовательский интерфейс Slider

Фрагмент ниже установит Слайдер на страницу, но он применяет только конфигурацию по умолчанию.

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

Поэтому здесь мы немного улучшим слайдер, добавив другие конфигурации.

Сначала мы сохраняем элемент слайдера как переменную.

 var slider = $ ('# slider'),

Затем мы устанавливаем минимальное значение по умолчанию для ползунка примерно 35, когда он впервые загружен.

 slider.slider (диапазон: «мин», значение: 35,);

На данный момент мы ничего не увидим в браузере, потому что пользовательский интерфейс jQuery в основном только генерация разметки. Итак, нам нужно применить некоторые стили, чтобы начать видеть результат визуально в браузере.

Шаг 4: Стили

Прежде чем продолжить, нам нужны некоторые ресурсы из исходного файла PSD, такие как фоновая текстура и значок.

Мы не будем говорить о как нарезать в этой статье мы просто сосредоточимся на коде. Если вы не уверены, как нарезать ломтики, сначала посмотрите следующую скринкаст, прежде чем продолжить.

Преобразование дизайна из PSD в HTML - Nettuts+

Хорошо, теперь давайте начнем добавлять стили.

Мы начнем с размещения ползунка в центре окна браузера и прикрепим фон, который мы вырезали из PSD к тело.

 body background: url ('… /images/bg.jpg') повторить вверху слева;  раздел ширина: 150 пикселей; высота: авто; поле: 100px авто 0; положение: относительное;

Далее мы применим стили для всплывающая подсказка, громкость, рукоять, слайдер спектр и ползунок сам.

Мы сделаем эту часть по частям, начиная с ...

ползунок

Поскольку мы не определили максимальное значение для самого Slider, пользовательский интерфейс jQuery будет применять значение по умолчанию; то есть 100. Поэтому мы можем также применить 100 (px) для слайдера ширина.

 #slider border-width: 1px; стиль границы: твердый; цвет границы: # 333 # 333 # 777 # 333; радиус границы: 25 пикселей; ширина: 100 пикселей; положение: абсолютное; высота: 13 пикселей; цвет фона: # 8e8d8d; background: url ('… /images/bg-track.png') повторяется вверху слева; тень от рамки: врезка 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); слева: 20 пикселей;

подсказка

Подсказка будет расположена над ползунком, указав его положение абсолютно с -25px для его верхняя позиция.

 .подсказка позиция: абсолютная; дисплей: блок; верх: -25px; ширина: 35 пикселей; высота: 20 пикселей; цвет: #fff; выравнивание текста: по центру; шрифт: 10pt Tahoma, Arial, без засечек; радиус границы: 3 пикселя; граница: 1px solid # 333; box-shadow: 1px 1px 2px 0px rgba (0, 0, 0, .3); размер коробки: бордюр; фон: линейный градиент (верх, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);

объем

Мы немного изменили значок громкости, чтобы соответствовать нашей идее. Идея в том, что мы собираемся создать эффект для постепенно увеличивайте громкость в соответствии со значением слайдера. Я уверен, что вы часто видели такой эффект в пользовательском интерфейсе медиаплеера.

 .volume display: inline-block; ширина: 25 пикселей; высота: 25 пикселей; справа: -5px; background: url ('… /images/volume.png') no-repeat 0 -50px; положение: абсолютное; margin-top: -5px;

UI Handle

Стиль ручки довольно прост; у него будет иконка в виде металлического круга, вырезанная из PSD и прикрепленная в качестве фона.

Мы также изменим режим курсора на указатель, поэтому пользователь заметит, что этот элемент можно перетаскивать.

 .ui-slider-handle position: absolute; z-индекс: 2; ширина: 25 пикселей; высота: 25 пикселей; курсор: указатель; фон: url ('… /images/handle.png') без повтора 50% 50%; вес шрифта: полужирный; цвет: # 1C94C4; контур: нет; вверху: -7px; поле слева: -12px;

Ползунок Диапазон

Диапазон ползунка будет иметь слегка белый градиент цвета.

 .ui-слайдер-диапазон фон: линейный градиент (top, #ffffff 0%, # eaeaea 100%); положение: абсолютное; граница: 0; верх: 0; высота: 100%; радиус границы: 25 пикселей;

Шаг 5: Эффект

На этом этапе мы собираемся начать работу над спецэффектом Slider.

подсказка

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

Прежде всего, мы храним элемент всплывающей подсказки как переменную.

 var tooltip = $ ('. tooltip');

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

 slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);

Но мы также хотим, чтобы всплывающая подсказка была изначально скрыта.

 tooltip.hide ();

После этого, когда справиться собирается начать скользить, это будет показано с эффектом постепенного появления.

 start: function (event, ui) tooltip.fadeIn ('fast'); ,

И когда пользователь перестает сдвигать ручку, всплывающая подсказка исчезнет и будет скрыта.

 stop: function (event, ui) tooltip.fadeOut ('fast'); ,

объем

Как мы уже упоминали выше в Раздел стилей, мы планируем изменить значок громкости в соответствии с положением ручки или быть точным, значение слайдера. Итак, мы применим следующее условное утверждение для создания этого эффекта.

Но, во-первых, мы храним элемент громкости, а также значение ползунка в качестве переменной.

 объем = $ ('. объем');

Затем мы начинаем условное утверждение.

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

 если (значение <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ;

Положите их все вместе

Хорошо, если вы запутались со всем вышеперечисленным, не надо. Вот ярлык. Вставьте все следующие коды в ваш документ.

 $ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (range: "min", min: 1, значение: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('. Volume '); tooltip.css (' left ', value) .text (ui.value); if (value <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); );

Хорошо, теперь давайте посмотрим на результат в браузере.

демонстрация
Скачать исходный код

Заключение

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

Мы надеемся, что это руководство вдохновит вас и поможет понять, как превратить PSD в более удобный продукт.

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