СПРЯТАННЫЙ ВИДЖЕТ
(Огромная благодарность тем, кто выложил данный код в Сети для общего пользования и модификации. К сожаоению, я не помню, на каком ресурсе нашёл этот код... Спасибо разработчикам!)
Продолжим тему, друзья. Итак, мы определились с местом размещения виджета. С его контентом (с тем, что будет внутри него).
Давайте теперь перейдём непосредственно к коду. Рассматривайте иллюстрацию (если нажать на неё, она откроется в увеличении). А я буду рассказывать, в чём тут суть и смысл.
нажать для увеличения
-
Одинаковым цветом выделены элементы кода, имеющие один или сходные смыслы.
-
КРАСНЫМ выделены теги кода, отвечающие за ОБЪЯВЛЕНИЯ начала какой-то части кода и её окончание. Так, здесь отмечены теги, означающие начало и завершение работы со СТИЛЕМ, а в нижней части - то же, но с РАЗДЕЛОМ.
-
ФИОЛЕТОВЫМ выделена та часть кода, которая отвечает за
ВИДИМЫЕ и НЕВИДИМЫЕ размеры (ВЫСОТЫ) виджета.
ШИРИНА тут задана автоматическая - то есть ваш виджет по ширине займёт столько места, сколько вы ему отвели в шапке ли, в сайдбаре.
Чуть подробнее:
- Предположим, виджет у вас состоит из картинки (высота её
100px и расположенной ниже таблицы высотой
200px);
-
ВЫСОТА В СОСТОЯНИИ ПОКОЯ тогда должна быть
НЕ МЕНЬШЕ
100px - в противном случае ваша заглавная картинка будет частично срезана! Значит, это значение нужно задавать более
100px. 110, а то и 120px;
-
ВЫСОТА ПОЛНАЯ - прибавьте не менее
200px к первому значению (а лучше с запасом -
210-220px). Значит,
ВЫСОТА ПОЛНАЯ у нас будет от
320 до 340px. И тому подобное.
-
САЛАТОВЫМ выделен блок, отвечающий за настройки анимации (другими словами, это строки задают вариант "раскрытия - закрытия" содержимого виджета).
Если вы при чтении предыдущей части статьи заходили на "Классики" и проверяли работу этого элемента, то представляете, о чём речь. Так вот:
именно ТАК двигается виджет на "Классиках".
-
НЕ МЕНЯЙТЕ в этих строках ничего. Но, если хотите, - зайдите
>>>СЮДА <<<. Там об анимации всё подробно расписано. Дажеесть целый блок, в котором вы можете сравнить предлагаемые виды движения и выбрать понравившийся (в таком случае изменяйте код в соответствии с подходящими значениями).
-
konsn - это имя стиля.
У МЕНЯ ОШИБКА в скрине: в разделе
div это имя тоже должно было быть залито этим цветом!
-
ЖЁЛТЫМ - отмечена та часть кода, в которой будет содержаться контент вашего виджета, его части, элементы и так далее. На скрине в этой части кода есть ещё теги, которые ЦЕНТРУЮТ содержимое.
Если это вам не нужно - УДАЛИТЕ теги centr. Со скобками, разумеется )
- строки
БЕЗ ЗАЛИВКИ -
оставьте как есть. Они описывают НЕВИДИМУЮ границу виджета и предписывают ему действовать при наведении курсора.
**********
Вот, собственно, и всё.
ИСХОДНИК с кодом (таким же, как на скриншоте)
ПРИМЕЧАНИЕ: если вы пользовались предыдущими статьями МастерКА при создании кодов, то, вероятно, хорошо помните, как
РАЗМЕСТИТЬ ЭЛЕМЕНТ НА СТРАНИЦЕ ПОВЕРХ ДРУГИХ ЭЛЕМЕНТОВ в любом удобном месте.
- Положение элемента можно задать при помощи строк
position:fixed (absolute) и top:***px
и другими командами из этой "серии", задающими положение ЛЕВОГО ВЕРХНЕГО угла элемента на странице (как нам видно на экране) - или ПРАВОГО ВЕРХНЕГО УГЛА элемента, если говорить об этом с "его" позиции.
-
Вспомнили? Топ, боттом, лефт, райт... )) Допишите позишн и координаты размещения в этот код - и вы сможете "навешивать" ваш виджет в любое место страницы )
- Где это дописать? А допишите ПОСЛЕ строк, которые выделены на скрине
САЛАТОВЫМ )
Доброй работы, друзья!
Тэги:
нг,
сайт,
Код,
виджет,
стиль,
элементы,
отображение,
страница сайта
