Александр Петков вызвал довольно серьезный резонанс, представив публике два бесплатных HTML5-компонента, выполненных в столь популярном сегодня плоском стиле. Последняя разработка, Powerange, позволяет вам создавать различные современные слайдеры, напоминающие iOS7, а его предшественник, Switchery, дает те же возможности, но только касательно тумблеров. Оба компонента разработаны с использованием комбинации CSS и javascript без дополнительных зависимостей, и при этом оба отлично работают во всех современных браузерах, и даже в Internet Explorer (от версии 8 и выше для Switchery и от 9 версии для Powerange). Вам вовсе не обязательно быть фанатом iOS7 для того, чтобы по-настоящему насладиться работой Петкова, так как эти компоненты позволяют вносить собственные изменения во внешний вид.
Powerange: новый инструмент для создания собственных слайдеров
Powerange всего пару недель отроду, так как вдохновение на его создание пришло к Петкову чуть позже. Он фанат телесериала «Могучие Рейнджеры», и вы наверняка уже задумывались об этом, увидев название проекта. Если хотите, то можете оформить ваш слайдер в традиционном стиле одного из рейнджеров. Если же вы больше склоняетесь к минимализму, то здесь все в ваших руках.
Powerange позволяет вам создавать слайдеры, и при помощи CSS и javascript оформлять их так, чтобы они сочетались с общим дизайном вашего проекта. Если вам нужны горизонтальные и вертикальные слайдеры, едва заметные или пестрые и выделяющиеся, опять же, вы сможете оформить их по собственным требованиям. Вы даже можете использовать иконки вместо цифровых значений. На самом деле, нам не удалось обнаружить недостатки в способностях данного компонента при довольно плотной работе.
Его применение очень простое. Вам нужно просто встроить нужные CSS и javascript-файлы, инициализировать Powerange, и компонент сможет обрабатывать каждое определенное поле ввода. Выставленные по умолчанию значения можно изменять как вам будет угодно.
Так как функционал Powerange основывается на собственных классах, можно сказать, что вы никак не ограничены в том, что можно реализовать. Однако стоит отметить, что данный компонент не совсем подойдет новичкам. Потребуется небольшой пробный период, чтобы познакомиться и освоиться в инструменте. Powerange - это не один из тех инструментов, которые достаточно включать и выключать.
Так как этот компонент доступен абсолютно бесплатно, и распространяется под лицензионным соглашением MIT, мы настоятельно рекомендуем вам пополнить им свой арсенал разработчика.
Powerange в интернете: Демо | Github-репозиторий
Switchery: плоские тумблеры по вашему желанию
Switchery работает в какой-то степени по тому же принципу, что и Powerange. Основное отличие заключается в том, что Switchery не обрабатывает промежуточные значения, и при этом позволяет использовать лишь положения on и off. Следовательно, этот компонент не подойдет для работы с текстовыми полями ввода, но при этом их можно использовать с чекбоксами.
Кроме этого момента, все остальное полностью соответсвует Powerange, что делает его отличным «партнерским» дополнением к вышеупомянутому инструменту. Когда речь заходит о плоских интерфейсах, не забудьте вспомнить про Александра.
Switchery в интернете: Демо | Github-репозиторий
Раздел: Скрипты и коды Нет комментариев
Powerange и Switchery: HTML5-переключатели и слайдеры для плоского дизайна
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Design FactoRy Прочитано (раз): 6012 | Нет комментариев
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать