Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

На 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.

Листинг 16.9

function showHideSample(e, t) {

var elDiv = Ext.fly(t). parent(".sample");

var ceSampleText = elDiv.select("*:not(:first-child)"); ceSampleText.setVisibilityMode(Ext.Element.DISPLAY); ceSampleText.toggle();

}

function prepareSamples() {

var ceSamples = Ext.select(".sample");

ceSamples.each(function(el, cl, ind){ var elH6 = el.child(":first"); elH6.on("click", showHideSample); elH6.on("mouseover", function(e, t) {

Ext.get(this). parent("DIV"). addClass("hovered");

});

elH6.on("mouseout", function(e, t) { Ext.get(this). parent("DIV"). removeClass("hovered");

});

var ceSampleText = el.select("*:not(:first-child)");

ceSampleText.setDisplayed(false);

});

}

Мы объявили функции showHideSample и prepareSamples. Первая будет обрабатывать событие click в первом потомке контейнера с текстом примера и в ответ на это событие скрывать или открывать данный контейнер. Вторая будет выполнять подготовительные действия: при открытии Web-страницы скрывать контейнеры с текстом примеров и привязывать к ним обработчики событий.

Рассмотрим код этих функций построчно. И начнем с функции prepareSamples.

Сначала получаем все контейнеры с привязанным стилевым классом sample, т. е. содержащие текст примеров:

var ceSamples = Ext.select(".sample");

Затем для каждого полученного контейнера выполняем описанные далее манипуляции:

ceSamples.each(function(el, cl, ind){

Получаем первый потомок контейнера:

var elH6 = el.child(":first");

Привязываем к нему в качестве обработчика события click функцию

showHideSample:

elH6.on("click", showHideSample);

Привязываем к нему функцию — обработчик события mouseover, которую там же и объявляем:

elH6.on("mouseover", function(e, t) { Ext.fly(this). parent("DIV"). addClass("hovered");

});

Эта функция получит родитель элемента Web-страницы, в котором возникло данное событие, т. е. контейнер с текстом примера, и привяжет к нему стилевой класс hovered.

Не забываем привязать функцию-обработчик события mouseout, которая будет убирать из привязки к контейнеру стилевой класс hovered:

elH6.on("mouseout", function(e, t) { Ext.fly(this). parent("DIV"). removeClass("hovered");

});

Получаем все остальные элементы-потомки контейнера (не являющиеся первым потомком):

var ceSampleText = el.select("*:not(:first-child)");

И скрываем их:

ceSampleText.setDisplayed(false);

});

На очереди — функция showHideSample.

Получаем родитель элемента Web-страницы, в котором возникло событие:

var elDiv = Ext.fly(t). parent(".sample");

Поскольку этот обработчик привязан к первому потомку контейнера с текстом примера, здесь мы получим сам этот контейнер.

Получаем все элементы-потомки контейнера, не являющиеся первым потомком:

var ceSampleText = elDiv.select("*:not(:first-child)");

Указываем, что для управления их видимостью будет использован атрибут стиля display, и изменяем их видимость (открываем, если они скрыты, и скрываем, если они открыты):

ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);

ceSampleText.toggle();

Использовать здесь метод toggle проще, чем setDisplayed — нам не придется проверять, открыты данные элементы Web-страницы или нет. Правда, перед этим потребуется указать, что видимостью элемента будет управлять атрибут стиля display, но это мелочи.

Еще нам нужно поставить вызов функции prepareSamples в самый конец функции, передаваемой методу onReady объекта Ext:

prepareSamples();

Теперь откроем любую Web-страницу, содержащую описание тега HTML или атрибута стиля CSS, и поместим текст примера в блочный контейнер с привязанным стилевым классом sample. Листинг 16.10 иллюстрирует HTML-код Web-страницы t_audio.htm.

Листинг 16.10

<DIV CLASS="sample">

<H6>Пример:</H6>

<PRE>&lt;AUDIO SRC=&quot;sound.wav&quot; CONTROLS&gt;&lt;/AUDIO&gt;</PRE>

<H6>Результат:</H6>

<AUDIO SRC="sound.wav" CONTROLS></AUDIO>

</DIV>

Внесем исправления во все аналогичные Web-страницы и проверим их в действии.

Что дальше?

В этой главе мы вплотную занимались практическим Web-программированием. Мы создали на наших Web-страницах настоящую полосу навигации с подсветкой пункта, на который наведен курсор мыши, с выделением пункта, соответствующего открытой в данный момент Web-странице, с обработкой щелчков на всем пространстве пунктов. Мы заставили блочные контейнеры изменять свои размеры так, чтобы занимать все свободное пространство в клиентской области окна Web- обозревателя. И, наконец, мы создали скрывающиеся и открывающиеся контейнеры с текстом примеров.

Часть IV будет посвящена самым современным подходам в Web-дизайне и Web- программировании: подгружаемому и генерируемому содержимому и семантической разметке. Уже в следующей главе мы научимся подгружать часть содержимого Web-страницы из сторонних файлов программно.

А библиотека Ext Core нам в этом поможет.

ЧАСТЬ 4. Подгружаемое и генерируемое содержимое. Семантическая разметка

ГЛАВА 17. Подгружаемое содержимое 

В предыдущей части мы начали заниматься Web-программированием: изучили язык JavaScript, правила написания Web-сценариев и библиотеку Ext Core и создали поведение для наших Web-страниц, причем весьма развитое. Теперь наш Web- сайт выглядит вполне профессионально. Скрывающиеся и раскрывающиеся элементы Web-страницы, блочные контейнеры, автоматически выстраивающиеся на Web-странице, полоса навигации с "горячими" пунктами — все это, конечно, впечатляет. Но уже никого особенно не удивляет. В Сети существует множество Web-сайтов, щеголяющих подобными "штуковинами". Все это — уже давно пройденный этап в развитии Web-дизайна. Нужно что-то новое. Еще более впечатляющее. Еще более интерактивное. И обязательно несущее какие-то выгоды и пользователю, и разработчику — иначе грош ему цена. Теперь мы займемся технологиями, находящимися на переднем крае Web-дизайна. Мы реализуем на наших Web-страницах, во-первых, подгружаемое содержимое, во-вторых, генерируемое содержимое, в-третьих, семантическую разметку данных. И от всего получим практическую пользу. Данная глава целиком и полностью будет посвящена подгружаемому содержимому — самой простой из перечисленных технологий.

Монолитные и блочные Web-страницы

Об этом уже упоминалось в главе 10, посвященной блочным контейнерам и контейнерному Web-дизайну. Настала пора рассмотреть вопрос подробнее.

Давайте откроем любую нашу Web-страницу, скажем, index.htm, в Web-обозревателе. Что мы увидим? Набор блочных контейнеров, содержащих заголовок Web-сайта, полосу навигации, основное содержимое и сведения об авторских правах. Все эти контейнеры составляют неотъемлемую часть содержимого Web- страницы и определяются в ее HTML-коде.

Теперь посмотрим на HTML-код этой Web-страницы, для чего откроем ее в Блокноте. Да, ее HTML-код велик… Немало места отведено коду, создающему основное содержимое Web-страницы: там и большая цитата, и список, и даже таблица.