HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
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-страницы, в котором возникло
Не забываем привязать функцию-обработчик события 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><AUDIO SRC="sound.wav" CONTROLS></AUDIO></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-страницы: там и большая цитата, и список, и даже таблица.
Не меньше (если не больше) места занимает код, создающий полосу навигации, со всеми ее списками, вложенными друг в друга, пунктами этих списков и гиперссылками. Код заголовка Web-сайта, сведений об авторских правах и служебный код (создающий сами контейнеры, секции Web-страницы и пр.) хоть и относительно невелик по объему, но тоже там присутствует.
Отсюда следует первый вывод: HTML-код, хранящийся в файле index.htm, определяет все содержимое данной Web-страницы без исключения. Такие Web-страницы на жаргоне Web-дизайнеров называются монолитными. Все Web-страницы, созданные нами на данный момент, — монолитные.
Теперь откроем другую Web-страницу, например, css_index.htm. Здесь почти то же самое: заголовок Web-сайта, полоса навигации и сведения об авторских правах. Только основное содержимое другое.
Если мы начнем поочередно открывать другие Web-страницы, то увидим на них аналогичную картину. Заголовок Web-сайта, полоса навигации и сведения об авторских правах остаются без изменений, отличается только основное содержимое.