iPhone Style чекбокс для Twitter Bootstrap

    Здравствуйте, уважаемые хабравчане.

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




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

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

    P.S. Буду благодарен, если кто-то зальет мой архив на толковый файловый хостинг и где-нибудь развернет демо. Заранее спасибо.

    UPDATE: Спасибо пользователю Anonym. Он выложил демо
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 22

      +2
      А почему сам не хочешь создать репозиторий на GitHub? Скрываешься от Apple?
        –4
        Все гораздо проще. Мне лениво.
        +1
        Конечно я не профессиональный дизайнер

        Совсем не профессиональный ))
        Держите демо (может даже выживет)
          0
          Спасибо Вам большое!
            –7
            А у него всегда }{уйня получается вместо решения. Поэтому он всегда заранее пишет оправдательный текст ;)
            +2
            12 изображений, серьезно? Вы хотя бы в спрайт их убрали. Не говоря уж о том, что все эти уголки и градиенты спокойно делаются в CSS. Кстати, с картинками на дисплеях с масштабированием или с высокой плотностью пикселей (это ведь для IOS-related сайтов?) всё будет совсем плохо.
              0
              Согласен с Вами. Однако, я не ставил своей целью сделать идеальное решение. Я просто решил повозиться с чужим решением и переделать под свои задачи. Мой проект не является боевым, это всего лишь попытка освоить пару технологий. Если кому-то будет интересен результат, то я не против поделиться.
                +1
                Так вы сразу пишите, что сей скрипт нигде применять нельзя, ибо по мимо более 1 изображения там еще и верстка перегружена, но, что хуже всего остального, сие решение срабатывает не только на левую кнопку мыши.

                После таких недорешений и появляются сайты, на которых контролы срабатывают непредсказуемым образом…

                Стыдно!
                  –1
                  Чего вы ждете от человека пишущего подобные комменты: habrahabr.ru/post/101274/#comment_3137282 !?
                  Спросите его ради шутки про любой из пунктов — сразу поймете кто перед вами ;)
              +1
              Здесь без JS
                +1
                Но его же нельзя схватить и потянуть 8(
                +3
                ИМХО:
                Такой контролл должен быть без «да/нет».
                Собственно, как на айфоне.
                В противном случае он вносит сумятицу.
                С одной стороны — на контролле отображается его текущий статус. Но с другой — то, что это именно текущий статус, не очевидно, потому что я передвигаю ползунок на место противоположного слова.
                Т.е. когда включен «да», ползунок находится на месте слов «нет». И я интуитивно двигаю ползунок на место слова, которое отображает тот статус, который я хочу установить.
                Просто взрывает мозг
                  0
                  Включите англоязычный интерфейс в айфоне и увидите, что там и вовсе написано On/OFF
                    0
                    Любопыстсва ради, приведите кто-нибудь скриншот вышеописанного.
                    +1
                    Поддерживаю. Очень нелогичное поведение.
                    +4
                    В топике не хватает вот этой картинки:

                    image

                    s/select/check/

                    Things Real People Don't Say About Your App
                      0
                      А не засудят? ;-)
                        0
                        считаю таким элементов управления стоит пользоваться лишь на ресурсах, которые как-то связаны с эпплом / айфонами, иначе его использование не очевидно. У меня нет айфона и я как-то теряюсь когда вижу подобные решения.
                          +1
                          Многоуважаемый pepelsbey совсем недавно написан содержательную статью о том как он решил задачу с переключателем в стиле iOS. Конечно же, в его решении присутствует горячо им любимый .svg и CSS3, от которых в олдскул браузерах толку нет, но если это заюзать в веб-интерфейсе для iOS устройств — получится очень даже айс, прямо совсем нэтив-нэтив.
                            0
                            как раз :) спасибо!
                              0
                              Тактильные инструменты все больше и больше перекачевывают в веб.
                                0
                                Я как-то изучала вопрос таких вот мобильных переключателей в вебе – люди просто не могут привыкнуть к тому, как они работают, а в особенности, если еще и дизайн у них от сайта к сайту различается, потому лучше их в таком виде не применять.

                                Only users with full accounts can post comments. Log in, please.