Решения по вёрстке формы

Vlad · September 22, 2011

Сюда выкладываем свои решения в виде ссылок на макеты. Желательно макеты выложить в свободный доступ, чтобы их можно было смотреть сразу, а не делать их в виде архиве для скачивания. У таких работ шансы на победу резко уменьшаются.

Ссылки вставляйте между кодами [ hide ] и [ /hide ] пишутся они без пробелов.

psywalker · September 26, 2011

Ссылка

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

HTML5:

Особо много элементов HTML5 вы там не заметите, так как я считаю, что всё таки эта форма и она, хоть и разрешено по спеке, не должна кишить всякими элементами из html5. Я имею ввиду <article>, <section>, <aside> и т.д. Т.е. я считаю, что я внёс в неё по максимуму возможностей этого языка, ровно столько, сколько она заслуживает, учитывая и ИЕ8 конечно же.

CSS3:

Всё, что возможно, я сделал на на CSS3, т.е. по полной, табы, ползунки, кнопки и т.д.

Скрипты:

Все скрипты, от А до Я, писал лично сам, на чистом JavaScript (кстати, получил большой опыт). Т.е. не использовал никаких библиотек, jQuery и прочих вещей. Всё сам, своими руками и головой.

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

В общем в краце расскажу, что и как.

1. Страница "Описание"

1. Все <textarea> изначально имеют одну высоту, но написав в ней несколько строк, она само-увеличивается по высоте, в зависимости от их количества.

Наглядный пример

2. Страница "Состав"

1. Поиск. Всё таки изначально он был в задании, поэтому я решил его всё же сделать. Как работает. Очень просто. Вбиваем слова в поля, снизу вылазит список с нужными и отсортированными по алфавиту напитками или украшениями, содержащих вводимые символы.

Пример

Так же из списка можно выбирать напитки с помощью клавиатуры, стрелок и энтера.

Всё, что выбрано, появляется наверху, прямо над поиском.

2. Выпадающее меню. Внутри ещё один, бесконечно крутящийся список.

Пример

3. Галерея с всплывающими подсказками. Крутится бесконечно.

Пример

3. Страница "Как готовить"

1. Загрузка фото. Всё таки решил так же сделать эту вещь.

2. Про <textarea> уже рассказывал выше.

3. Ну и конечно же, добавление шагов, так же посчитал, что без этого шага, форма не будет полноценной.

4. Страница "Параметры"

1. Эмуляция чекбоксов. Тут всё понятно.

2. Выпадающие списки. Тут, я думаю, тоже.

3. Ползунки. Все отчитывают чёткое время, сложность и крепость. Ровно по шкале. Окончание у текста "минут" меняется в зависимости от единицы времени.

5. Страница "Подтвердить"

Механизм сборки

Тут я в краце хотел бы рассказать про механизм сборки, который я использовал в данной работе.

Значит у нас есть Класс с приватными объектами и свойствами, которые скрыты и не могут быть изменены снаружи. Единственное, что связывает их с внешним миром, это методы, которые делают свою работу, занимаются сборкой информации со страниц, валидируют все обязательные элементы, при этом собирая приватные объекты, внутри своего Класса.

Как итог, мы имеем один, главный объект, который представляет из себя полную сборку всех деталей, необходимых нам для заполнения блоков с инфой, которые находятся на последней странице нашей формы.

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

Табы и Редактирование.

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

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

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

И ещё я решил, что будет полезным сделать переходы на страницы, так же с помощью кнопок "Редактирование", которые находятся на последней странице у каждого заголовка в главных блоках.

Пример

В целом, я постарался продумать каждую мелочь, типа ввода только чисел в нужные инпуты, соответствующих своим именованиям ёмкостей и ещё очень много мелочей, благодаря которым, я надеюсь, мне удалось вас порадовать и может быть даже где-то и удивить

Приятного пользования, господа :rolleyes: