СПРЯТАННЫЙ ВИДЖЕТ
Всем доброго зимнего дня!
Друзья, пост напрямую с НГ не связан. Но, возможно, вам пригодится эта информация и вы сможете использовать её для работы с сайтом в преддверии праздников. Ну и не только, разумеется.
Нехватка места на странице. Порой бывает актуальной эта проблема. Возникает из-за разных причин. Например, особенности дизайна позволяют использовать один сайдбар, а не два. "Шапка" предусмотрела места - не разгуляешься. А хотелось бы - и надо разгуляться-то ) Бывает ведь? Бывает )
Подобный трабл есть и на "Классиках". Ну вот такой там дизайн: что-то своё приходится навешивать. Поскольку по-умолчанию такие возможности данным дизайном дарованы не были.
Вот как раз живой пример.
Мы проводим среди учеников нашего класса новогодний конкурс: детишки вырезают снежинки онлайн на специальных сервисах, работы размещаются в Сети, устроено голосование (будем очень рады и благодарны, если вы найдёте минутку для того, чтобы отметить понравившиеся работы
ВОТ ЗДЕСЬ).
Перед командой сайта руководством ( ))) была поставлена задача: сделать так, чтобы много места не занимало, но чтобы так
НЕ ВИДНО НИЧЕГО - РАЗ - НАЖАЛ - И ПОЯВИЛОСЬ - УБРАЛ КУРСОР - ПРОПАЛО. Вот так чтобы:
ДО нажатия
кликните чтобы открыть
ПОСЛЕ нажатия
кликните чтобы открыть
МастерОК эту проблему решил. И не прочь поделиться с вами вариантом решения. Но для начала
немного ТЕОРИИ.
Уж простите за "тянучку", но МастерКУ очень бы хотелось сначала всё-всё разъяснить, рассказать, постараться предусмотреть все моменты, которые могут вызвать сложность. Поэтому будьте снисходительны к некоротким объяснениям, хорошо? ))
НАША ЗАДАЧА:
- Создать виджет, который на странице бы находился изначально
В СКРЫТОМ
состоянии;
- Контент виджета должен отображаться при наведении курсора на какой-либо объект на странице. имеющий понятное предназначение;
- Виджет должен отображаться до тех пор, пока курсор находится в его поле - чтобы ать возможность спокойно работать с контентом;
- При покидании курсором зоны виджета - виджет должен возвращаться к первоначальному,
СКРЫТОМУ
состоянию.
Таким образом (продолжая теоретизировать )), мы можем сделать вывод о конструкции виджета. Он должен содержать:
- Блок, задающий параметры (размеры) отображения виджета
ДО наведения курсора и
ПОСЛЕ наведения курсора;
- Блок, задающий параметры появления/сокрытия (
то есть транзита - перехода или анимации, движения)
КОНТЕНТА;
- Блок, содержащий
КОНТЕНТ.
Если вы читали предыдущие статьи МастерКА, то помните, что есть мощный вариант решения:
СОЗДАНИЕ СТИЛЯ ЭЛЕМЕНТА. Стиль имеет уникальное название. В дальнейшем, если будет создан некий
ЭЛЕМЕНТ, управляемый этим стилем - все части элемента примут заданный уникальный стиль. Они будут как-бы
ОБЁРНУТЫ в этот стиль.
Другими словами, мы должны
создать и настроить
СТИЛЬ ЭЛЕМЕНТА. Ну и сам
ЭЛЕМЕНТ (а это и есть контент виджета, - его содержимое, которое будет отображаться или прятаться).
В общем виде структура всего виджета будет такова:
- СТИЛЬ (ИМЯ)
-- начало стиля--
- параметры отображения
- параметры анимации
-- конец стиля --
- ЭЛЕМЕНТ (идентификатор имени как у имени стиля)
-- начало элемента --
-- конец элемента --
Код будет, как понятно, содержать и цифровые элементы. Их необходимо будет найти ОПЫТНЫМ ПУТЁМ: ведь размеры виджета у вас могут быть совершенно различными. А нам бы хотелось, чтобы он отображался корректно, нигде не было ничего лишнего, но чтобы и нужное не "зарезАлось" и выглядело на все 120%.
Работу виджетов вы можете оценить
на "Классиках": это
виджет КОНКУРСА в центре нижней части "шапки" сайта - и
виджеты "Интернет для детей" и
"Погода" на сайдбаре - в колонке слева.
На сегодня всё. "Вынашивайте" замыслы ))
Лёгкой Сети!
Тэги:
нг,
сайт,
Код,
виджет,
стиль,
элементы,
отображение,
страница сайта
