Создание оригинальных чеков для сайта тема весьма интересна для пользователей, по просьбам, я хочу представить еще горизонтальный вариант checkbox’ов для вашего сайта с использованием эффектов jQuery, созданные чеки весьма красиво смотрятся, и цветовую гамму можно подобрать соответствующую вашему сайту, для этого стоит применить базовые знания photoshop и у Вас все получится, и так, смотрим, что же у нас получилось..

И так, для начала нам нужно создать HTML разметку, выглядит она примерно так:

Основной контейнер это блок с id #page. В нём и будет располагаться наша форма. Внутри данного элемента находится ненумерованный список с множеством тегов label, которые описывают checkbox. Что удобно с точки зрения юзабилити, так это то, что клик на сам label будет активировать/деактивировать соответствующий checkbox (это возможно благодаря атрибуту for).

Далее мы непосредственно используем CSS, для фона наших чеков мы будем использовать png изображения, изображение стоит сделать длиннее, так как надпись будет расстягиватся непосредственно по изображению.

Спан .tzCheckBox позиционируется как inline-block, что позволяет ему находится на том же уровне, что и вписанный в него текст, а нам редактировать его внешние и внутренние отступы как блокового элемента.

И завершающим этапом будет простое написание jQuery, выглядит он следующим образом:

Вот на этом наш урок завершен, выше в уроке можно просмотреть онлайн результат наших чеков или скачать его исходники.

На главную