—»     —»   Powerange и Switchery: HTML5-переключатели и слайдеры для плоского дизайна
  Раздел: Скрипты и коды   Нет комментариев  

Powerange и Switchery: HTML5-переключатели и слайдеры для плоского дизайна



Александр Петков вызвал довольно серьезный резонанс, представив публике два бесплатных HTML5-компонента, выполненных в столь популярном сегодня плоском стиле. Последняя разработка, Powerange, позволяет вам создавать различные современные слайдеры, напоминающие iOS7, а его предшественник, Switchery, дает те же возможности, но только касательно тумблеров. Оба компонента разработаны с использованием комбинации CSS и javascript без дополнительных зависимостей, и при этом оба отлично работают во всех современных браузерах, и даже в Internet Explorer (от версии 8 и выше для Switchery и от 9 версии для Powerange). Вам вовсе не обязательно быть фанатом iOS7 для того, чтобы по-настоящему насладиться работой Петкова, так как эти компоненты позволяют вносить собственные изменения во внешний вид.

Powerange и Switchery: HTML5-переключатели и слайдеры для плоского дизайна

Powerange: новый инструмент для создания собственных слайдеров

Powerange и Switchery: HTML5-переключатели и слайдеры для плоского дизайна

Powerange всего пару недель отроду, так как вдохновение на его создание пришло к Петкову чуть позже. Он фанат телесериала «Могучие Рейнджеры», и вы наверняка уже задумывались об этом, увидев название проекта. Если хотите, то можете оформить ваш слайдер в традиционном стиле одного из рейнджеров. Если же вы больше склоняетесь к минимализму, то здесь все в ваших руках.

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

Его применение очень простое. Вам нужно просто встроить нужные CSS и javascript-файлы, инициализировать Powerange, и компонент сможет обрабатывать каждое определенное поле ввода. Выставленные по умолчанию значения можно изменять как вам будет угодно.

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

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

Powerange в интернете: Демо | Github-репозиторий

Switchery: плоские тумблеры по вашему желанию

Powerange и Switchery: HTML5-переключатели и слайдеры для плоского дизайна

Switchery работает в какой-то степени по тому же принципу, что и Powerange. Основное отличие заключается в том, что Switchery не обрабатывает промежуточные значения, и при этом позволяет использовать лишь положения on и off. Следовательно, этот компонент не подойдет для работы с текстовыми полями ввода, но при этом их можно использовать с чекбоксами.

Кроме этого момента, все остальное полностью соответсвует Powerange, что делает его отличным «партнерским» дополнением к вышеупомянутому инструменту. Когда речь заходит о плоских интерфейсах, не забудьте вспомнить про Александра.

Powerange и Switchery: HTML5-переключатели и слайдеры для плоского дизайна

Switchery в интернете: Демо | Github-репозиторий
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, CSS, javascript
Опубликовал Design FactoRy   Прочитано (раз): 4224   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031