CSS переключатель типа ЩЕКОЛДА



Намного проще использовать простой чекбокс. Но дизайнеры бывают разные. И вот задача — «красивая переключалка, как на айфоне».

Лучше сразу лезте ко мне в песочницу, поиграйтесь.

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

Проектировка

Вооружившись бумажкой и ручкой, накидал схему расположения блоков в контроле:
Прототип

Вот что получилось в HTML:

<div id="switcher">
    <div id="rail">
        <div id="state1">Выкл.</div>
        <div id="slider"></div>
        <div id="state2">Вкл.</div>
    </div>
</div>


Где:
#switcher — область переключателя
#rail — салазки на которых ездят надписи и декоративная пимпочка
#state1, #state2 — надписи состояний
#slider — декоративный элемент

Управлять состоянием будем через невидимый чекбокс с помощью селектора :checked и not(:checked).


<label for="ch">
<input type="checkbox" id="ch">       
<div id="switcher">
    <div id="rail">
        <div id="state1">Выкл.</div>
        <div id="slider"></div>
        <div id="state2">Вкл.</div>
    </div>
</div>
</label>​


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

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

Момент 1. Как работает?
А вот так:

#ch:checked + #switcher #rail{
        left:-44px;
}


При выбранном чекбоксе, салазки в свитчере смещаются влево на нужное количество пикселей. Соответственно если чекбокс не выбран, все остаётся на своих первоначальных местах.

Момент2. Украшательства и юзабилити
Для украшения я добавил новомодный эффект перехода (transition) добавив его в #rail, так как именно его мы и двигаем туда-сюда.


#rail {
        ...
        -webkit-transition: all 0.3s ease-in-out;
        ...
}


Прошу обратить внимание что переход распространяется на все изменяемые параметры. У нас это не только положение, но и цвет.

Далее я подумал, как бы пользователю объяснить, что от него хотят. Изначально была мысль сделать пробегающий по тексту засвет (как на экране разблокировки iOS). Но чтобы не связывать с проприетарными вебкитовскими функциями, сделал непроприетарную вебкитовскую ключевую анимацию :).
Вышел полосатый фон скролящийся в ту сторону куда должен сместится ползунок.

Вот и все. Демо тут.

PS Прошу простить за неструктурированное изложение. Писать я только учусь, а рассказать хочется еще о многом.
  • +2

8 комментариев

avatar
  • MpaK
  • 0
Шикарно, спасибо!
Кстати скорлящийся фон интересное решение.
avatar
  • default
  • 0
Интересное но спорное, как и сама надписи на контроле. Если с вкл. и выкл. более понятно (подобные инструменты встречаются и в реальной жизни), то например если сделать надписи «Чай» и «Кофе», то что будет обозначать текущее положение переключателя? Что при нажатии выберется «Кофе» если написано «Кофе» или отключится режим «Кофе» и включится другой, в данном случае «Чай».
avatar
Подобный переключатель нужен лишь тогда, когда требуется действительно что-то включить или отключить. Например, блютуз. Напитки здесь не прокатят, а вот уведомления на почту или какой-нибудь фильтр вполне.

переключатель

Как говорится в сказках: налево пойдешь… направо пойдешь…
avatar
  • MFD
  • 0
В сафари не работает
avatar
  • default
  • 0
Работает


Что именно у тебя не работает?
avatar
  • MFD
  • 0
На айпаде… Там по идее такой же вебкит
avatar
  • default
  • 0
Еще страннее, на вебките андроида работает. Хоть и не до конца правильно так как, но как чекбокс точно работает.
avatar
В команду требуются программист, web — мастер и дизайнер. Описание вакансий у меня в блоге. З/п от 30000. Звоните, будем реализовывать очень интересные проекты. 8(927) 638-07-89 Ринат
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.