Скрытие и открытие текста примеров

 

На Web-страницах, описывающих теги HTML и атрибуты стиля CSS, мы поместили текст примеров применения того или иного тега или атрибута стиля. Часто его делают скрывающимся и открывающимся в ответ на щелчок мышью — так можно сделать Web-страницы визуально менее громоздкими.

Давайте и мы реализуем нечто подобное на своих Web-страничках. Хотя бы в самом простом варианте.

— Текст примера мы поместим в блочный контейнер, к которому привяжем стилевой класс sample. Этот стилевой класс будет служить двум целям: во-первых, он обозначит данный контейнер как "вместилище" для примера, во-вторых, он задаст для контейнера особое представление, чтобы его выделить среди остального содержимого Web-страницы.

— Особое представление для контейнера с текстом примера будет включать внутренние отступы и рамку.

— Все содержимое контейнера изначально будет скрыто, за исключением первого его потомка (у нас — заголовок "Пример: " шестого уровня).

— При щелчке мышью на первом потомке контейнер (т. е. остальное его содержимое) будет открываться или снова скрываться.

— При наведении курсора мыши на первый потомок контейнера будет меняться цвет его рамки. Кроме того, мы зададим для него особое представление — форму курсора в виде "указующего перста". Так мы дадим посетителю понять, что данный элемент Web-страницы реагирует на щелчки мышью.

— На Web-странице могут быть несколько контейнеров с текстом примеров. Это следует учесть при написании Web-сценария.

Откроем таблицу стилей main.css и добавим в нее такие стили:

sample { padding: 5px; border: thin dotted #B1BEC6 }

sample >:first-child { margin: 0px 0px; cursor: pointer }

Первый стиль — это стилевой класс sample, помечающий контейнер как "вместилище" для примера. Он задает для контейнера параметры внутренних отступов и рамки.

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

Теперь откроем файл Web-сценария main.js и поместим где-либо в его начале, перед вызовом метода onReady объекта Ext, код листинга 16.9.

 








Дата добавления: 2015-05-08; просмотров: 640;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.003 сек.