Вёрстка виджета: встраиваемый компонент для Goldfon

Задача: сделать из картинки работающий виджет, который можно разместить на любом сайте.

Детализация задачи

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

С другой стороны, виджет обязательно должен максимально быстро загружаться, отрисовываться и работать на клиенте, а также легко вставляться в код. Поэтому картинки собраны в один большой спрайт, свежий jQuery подгружается через Google CDN, а весь джаваскрипт вставлен прямо в HTML-код. Функциональность виджета будет доделывать сам заказчик, поэтому я не стал минифицировать и обфусцировать джаваскрипт-код.

Разметка и стили

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

Для того, чтобы не поломать страницу, в которую вставлен виджет, используется модифицированный CSS-reset, затрагивающий только элементы внутри .goldfon-widget.

Часто гуру считают использование position:absolute нежелательным; в этом же случае вырванные из потока элементы наоборот очень удобно использовать, т.к. их расположение и размеры самого виджета фиксированы.

Любопытно: вначале я сделал подпись «подтверждаю согласие с офертой» не лейблом, а обычным spanом, чтобы клик на ссылку не отмечал чекбокс. Но потом нашёл подобное поведение корректным и удобным — уж если человек согласился прочитать какой-то там договор оферты, его точно не стоит вынуждать ещё и кликать чекбоксы!

Javascript: функциональный прототип

Весь контент виджета находится внутри одной формы с разными блоками-«вкладками». Контейнеру последовательно присваиваются классы .goldfon-step-#, являющиеся одновременно и CSS-триггером для отображения той или иной вкладки, и джаваскрипт-индикатором для выбора подходящего кода обработчика.

Работа виджета начинается с первого шага, но при необходимости, например, перезагрузить страницу, можно начать с любого другого:

Все данные виджета хранятся в глобальном объекте goldfon, чтобы не допустить конфликтов с другими скриптами. Он же является «болванкой» для будущей функциональности.

Кастомные селекты реализованы с помощью немного доработанного скрипта от автора с непроговариваемым именем, а чекбоксы и прячущийся label — с помощью головы.

Что можно улучшить?

• Сделать селекты и чекбоксы более «доступными», т.е. реагирующими на клавиатуру с соблюдением таб-индексов;
• Уменьшить размер PNG-спрайта;
• Минифицировать CSS (в режиме Super-Compact с опцией «Strip all comments») и джаваскрипт.

Вам нужно что-то похожее?

Подобная работа стоит порядка 4-5 тысяч рублей и занимает один рабочий день. В результате получается симпатичный и небольшой по размеру самостоятельный компонент, который можно вставить в любую страничку. Обращайтесь ко мне в любое удобное время!