Спрятанный виджет-1. МастерОК

Часть 1   Часть 2

СПРЯТАННЫЙ ВИДЖЕТ

Всем доброго зимнего дня!

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

Нехватка места на странице. Порой бывает актуальной эта проблема. Возникает из-за разных причин. Например, особенности дизайна позволяют использовать один сайдбар, а не два. "Шапка" предусмотрела места - не разгуляешься. А хотелось бы - и надо разгуляться-то ) Бывает ведь? Бывает )

Подобный трабл есть и на "Классиках". Ну вот такой там дизайн: что-то своё приходится навешивать. Поскольку по-умолчанию такие возможности данным дизайном дарованы не были.

Вот как раз живой пример. Мы проводим среди учеников нашего класса новогодний конкурс: детишки вырезают снежинки онлайн на специальных сервисах, работы размещаются в Сети, устроено голосование (будем очень рады и благодарны, если вы найдёте минутку для того, чтобы отметить понравившиеся работы ВОТ ЗДЕСЬ).

Перед командой сайта руководством ( ))) была поставлена задача: сделать так, чтобы много места не занимало, но чтобы так НЕ ВИДНО НИЧЕГО - РАЗ - НАЖАЛ - И ПОЯВИЛОСЬ - УБРАЛ КУРСОР - ПРОПАЛО. Вот так чтобы:

ДО нажатия

кликните чтобы открыть

ПОСЛЕ нажатия

кликните чтобы открыть

МастерОК эту проблему решил. И не прочь поделиться с вами вариантом решения. Но для начала немного ТЕОРИИ.

Уж простите за "тянучку", но МастерКУ очень бы хотелось сначала всё-всё разъяснить, рассказать, постараться предусмотреть все моменты, которые могут вызвать сложность. Поэтому будьте снисходительны к некоротким объяснениям, хорошо? ))

НАША ЗАДАЧА:

• Создать виджет, который на странице бы находился изначально В СКРЫТОМ состоянии;
• Контент виджета должен отображаться при наведении курсора на какой-либо объект на странице. имеющий понятное предназначение;
• Виджет должен отображаться до тех пор, пока курсор находится в его поле - чтобы ать возможность спокойно работать с контентом;
• При покидании курсором зоны виджета - виджет должен возвращаться к первоначальному, СКРЫТОМУ состоянию.

Таким образом (продолжая теоретизировать )), мы можем сделать вывод о конструкции виджета. Он должен содержать:

• Блок, задающий параметры (размеры) отображения виджета  ДО наведения курсора и ПОСЛЕ наведения курсора;
• Блок, задающий параметры появления/сокрытия ( то есть транзита - перехода или анимации, движения)  КОНТЕНТА;
• Блок, содержащий КОНТЕНТ.

Если вы читали предыдущие статьи МастерКА, то помните, что есть мощный вариант решения: СОЗДАНИЕ СТИЛЯ ЭЛЕМЕНТА. Стиль имеет уникальное название. В дальнейшем, если будет создан некий ЭЛЕМЕНТ, управляемый этим стилем - все части элемента примут заданный уникальный стиль. Они будут как-бы ОБЁРНУТЫ в этот стиль.

Другими словами, мы должны создать и настроить  СТИЛЬ ЭЛЕМЕНТА. Ну и сам ЭЛЕМЕНТ (а это и есть контент виджета, - его содержимое, которое будет отображаться или прятаться).

В общем виде структура всего виджета будет такова:

- СТИЛЬ (ИМЯ)

-- начало стиля--

• параметры отображения
• параметры анимации

-- конец стиля --

- ЭЛЕМЕНТ (идентификатор имени как у имени стиля)

-- начало элемента --

• какое-либо содержимое

-- конец элемента --

Код будет, как понятно, содержать и цифровые элементы. Их необходимо будет найти ОПЫТНЫМ ПУТЁМ: ведь размеры виджета у вас могут быть совершенно различными. А нам бы хотелось, чтобы он отображался корректно, нигде не было ничего лишнего, но чтобы и нужное не "зарезАлось" и выглядело на все 120%.

Работу виджетов вы можете оценить на "Классиках": это виджет КОНКУРСА в центре нижней части "шапки" сайта - и виджеты "Интернет для детей" и "Погода" на сайдбаре - в колонке слева.

На сегодня всё. "Вынашивайте" замыслы ))

Лёгкой Сети!