• Инструменты для разработчика

    • Самые удобные инструменты для разработчика, которые облегчат жизнь любого как начинающего так и продвинутого разработчика. Украшатели, уменьшители, конвертеры кодов. Доменные инструменты. Всё в одном комплекте.
  • Использование BB кодов. Тут указаны существующие BB коды на форуме.

jQuery создание улучшенных переключателей с использованием css3 (2.0)

Альваро

Пользователь
Регистрация
26.10.2015
Сообщения
76
Репутация
34
Баллы
0
Награды
0
Адрес
Russia
Лучшие ответы
0
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!




Здравствуйте! В прошлой
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!
я рассказал как создать переключатели при помощи CSS3. В этой теме я покажу улучшенную версию этих переключателей.
Приступим.

Радиокнопки

Простая задача для начала. Радиокнопки работают почти так же, как переключатели-флажки, так что мы можем просто добавить класс switch (переключатель) каждому полю ввода, чтобы все заработало, например:
Код:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
Очень приятно посмотреть, как два переключателя меняют положение одновременно.

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

Дополнительных элементов не потребовалось, мы просто использовали символ крестик вместо пробела и расположили его справа на фоне, используя свойство:
Код:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
Когда переключатель-флажок или радоикнопка активны, символ меняется на галочку и сдвигается влево по фону:

Код:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!


Анимация,работающая во всех браузерах

Изначально мы разместили символы галочку и крестик на белой части переключателя. Это непростая задача для браузеров, так как им нужно создать переход между двумя символами. В браузере Firefox все отработало правильно, а браузеры Chrome и Internet Explorer 10 пошли по легкому пути: вообще не воспроизводили анимацию. Оказалось, что движки Webkit и Trident не разрешают анимацию псевдо-элементов, чье содержимое меняется, даже если однозначно указать, что только внешний отступ или цвет должны анимироваться.
Чтобы решить эту проблему, мы применили галочку и крестик псевдо-элементу :before до изменения фона и удалили его эффект перехода, из-за чего цвет не будет меняться плавно, но это едва заметно. Теперь анимировано только положение белого переключателя псевдо-элемента :after.
Следующая проблема с удобством использования — выбор переключателя при помощи клавиатуры. Старые переключатели было сложно использовать при помощи клавиатуры, так что мы использовали другой цвет подписи и добавили тень блока переключателя, когда он выбран:
Код:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
Возможно, результат получился не слишком заметным, но легко добавить другие эффекты на ваше усмотрение.
 
Сверху Снизу