Сверстать страницу с переключаемыми вкладками

Сверстать страницу поиска на базе уже имеющейся верстки (внедрять стили с наш CSS не допуская переопределение уже имеющихся в нем стилей, что б не съехали остальные страницы) состоящую из 3х переключаемых вкладок (листов) без перезагрузки страницы:

1) При переключении между 1Москвой и 2Областью фильтры и списки значений внутри них меняются между вариантами:

1Выбрать по округу (смотри список в конце) и 2Выбрать по району

1Выбрать по станции метро и 2Выбрать по населенному пункту

кнопка 1Выбрать на карте Московского метро и 2Выбрать на карте Московской области

2) При нажатии на фильтр (комбобокс) плавно открывается соответствующий список выбора нескольких значений одновременно

Список плавно сворачивается после того как мышка переместилась за его границы и за границы комбобокса к которому он относится

Пример нужного поведения списка можно посмотреть на

3) Списки сверстать в стилистике списка «Ближайшая станция метро» из файла «Жилая Аренда Москва.psd»

4) После сворачивания списка текст в его комбобоксе меняется таким образом:

а) если в списке ничего не выбрали то текст в комбобоксе становится изначальным (Выбрать по округу, Выбрать по станции метро, Выбрать по цене, Выбрать по актуальности…)

б) если выбрали хоть одно и больше значений, то текст меняется на Выбрано …: ХХ (Выбрано округов: 2, Выбрано станций: 67,….).

Для комбобоксов содержащих не мультиселекторные списки (выбрать можно только одно значение) текст будет меняться на значение выбранного в списке (к примеру для комбобокса «Выбрать по актуальности» текст может иметь ОДНО из значений:

- Выбрать по актуальности;

- за 10 минут;

- за 30 минут;

- за 1 час;

- за 2 часа,

- за 12 часов,

- за 24 часа,

- за три дня,

- за неделю,

- за месяц)

5) При нажатии на ссылку «Очистить условия поиска» сбрасываются ВСЕ! фильтры на ВСЕХ! Вкладках (снимаются чекбоксы/выбор, текст в комбобоксе становится изначальным (Выбрать по округу, Выбрать по станции метро, Выбрать по цене, Выбрать по актуальности…)

6) кнопка 1Выбрать на карте Московского метро и 2Выбрать на карте Московской области должна Вызывать соответствующую карту. Эти карты уже сверстаны, верстку предоставим – надо будет их корректно внедрить в разрабатываюмую верстку, интегрировать с соответствующим комбобоксом и списками

7) На вкладке «Частные объявления» при нажатии на кнопку сама кнопка меняет текст на «Краткий поиск» и стрелочка на ней в верх направляется , при этом область поиска плавно расширяется в низ как в файле «2.2 Частные-расширенный фильтр.psd»

Естественно, что при нажатии на форма плавно сворачивается до краткой, при этом ВСЕ ДОПОЛНИТЕЛЬНЫЕ ФИЛЬТРЫ СБРАСЫВАТСЯ!!! (не путать с основными)

8) При наведении мышки на любой из блоков спецпредложений он:

8.1. Сначала подтеняется по контуру для создания эффекта объемного выделения

8.2. После секундной задержки над ним плавно появляется расширеная форма представления спецпредложения

8.2. Клик мыши на любом месте спецпредложения (как обычной, так и расширенной форм) открывает сайт рекламодателя в новой вкладке браузера

Обращаю внимание, что положение расширенной формы спецпредложения по вертикали в макетах отрисовано не правильно – правильное положение отразил в скрине «Положения расширенных форм спецпредложений.jpg» а именно:

8.2.1. По вертикали Расширенная форма должна появляться на 10 пикселей ниже сокращенной формы;

8.2.2. По горизонтали Расширенная форма должна иметь два разных выравнивания:

– с лева на право для 1го, 2го и 3го столбиков спецпредложений их расширенная форма должна ровняться по левой границе с сокращенной формой

– для 4го (самого правого) столбика расширенная форма ровняется по правому краю!!!

8.3. Расширенная форма плавно сворачивается после того как мышка переместилась за ее границы и за границы краткой формы

9) Самый правый столбик спецпредложений должен быть зависимым от высоты центральной формы вывода результатов поиска объявлений – т.е. к примеру если в результате поиска найдено только одно объвление, то справа от него выведется только одно спецпредложение, нашли два объявления – справа два спецпредолжения, и т.д. Максимальное количество объявлений выводимое в блоке поиска десть штук!!! После чего под блоком появляется листалка

10) «Лишние» спецпредложения правого блока сползают в низ под блок поиска. Под блоком поиска выводятся все «лишние» спецпредложения в неограниченом количестве увеличивая высоту страницы (т.е. для спецпредложений листалки не будет)

11) Это зависимые ссылки, при повторном клике на одну и ту же кнопку правая стрелочка разворачивается на 180 градусов (то вверх, то в низ), при клике на «ссылку» она приобретает вид кнопки со стрелкой и т.д.

12) Внимание! Кнопки смены вида отображения тоже зависимые и меняют свою форму, но кроме этого:

12.1. при наведении на них должно появляться всплывающее сообщение-подсказка о их смысле, а именно «Отобразить в виде тексто-графических блоков» и «Отобразить на карте »

12.2. Соответственно при клике на правую кнопку блок отображения результатов поиска меняется на ЯндексКарту

13) Тут и везде в списках, фильтрах чекбоксы стилизованные, можно взять верстку из верстки карт метро/области

14) Это целиком кликабельная кнопка (чекбокс в ней бутафорный – галка не переключается)

15) При наведении мышки на объявление в результатах поиска оно подтеняется по контуру для создания эффекта объемного выделения и фон его меняется на светлооранжевый как у кратких форм спецпредложений

16) При клике на рисунок, или ссылку «Все фото» на экран выводится лайтбокс с возможностью листания в нем увеличенных фото данного объявления

17) При клике на ссылку «Показать на карте» весь блок отображения результатов поиска меняется на ЯндексКарту

18) При клике на любое место объявления кроме чекбокса, ссылок и изображения

открывается страница детальной информации по объявлению в новой вкладке браузера

19) То же самое происходит при клике на ссылку «Перейти в объвление»

20) Нижние блоки «Статьи и интервью…» и «Интересные факты о недвижимости» верстать НЕ НУЖНО (они уже сверстаны ранее, мы сами их внедрим потом в верстку)

21) Ссылки « » должны переключать закладку на положение