aHTML[8].related = [aHTML[3], aHTML[9], aCSS[0]];
Здесь мы указали, что для Web-страницы с описанием тега <P> (именно эту Web- страницу описывает элемент массива aHTML с индексом 8) связанными являются Web-страницы с описаниями тегов <EM> и <STRONG> и атрибута стиля border.
Аналогично укажем связанные данные для остальных Web-страниц нашего Web- сайта. Необязательно для всех — хотя бы для нескольких, чтобы только проверить, как все это работает.
Создание раздела "См. также"
При создании раздела "См. также" нам потребуется решить четыре задачи.
— Соотнести каждый пункт полосы навигации со списком связанных материалов соответствующей Web-страницы.
— Собственно создать раздел "См. также" после загрузки Web-страницы.
— Обеспечить загрузку Web-страницы при щелчке на гиперссылке этого раздела.
— Реализовать скрытие и раскрытие вложенных списков и выделение пункта полосы навигации при щелчке на гиперссылке раздела "См. также".
Начнем по порядку.
Откроем файл Web-сценария main.js и найдем в нем объявление функции generateInnerList, которая, как мы помним, создает за один раз один вложенный список в полосе навигации. Немного исправим ее код, чтобы он выглядел так, как показано в листинге 19.1.
Листинг 19.1
function generateInnerList(aDataBase, elInnerList) {
for (var i = 0; i < aDataBase.length; i++) {
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" +
aDataBase[i].name + "</A></CODE></LI>";
var htelItem = elInnerList.insertHtml("beforeEnd", s);
htelItem.related = aDataBase[i].related;
}
}
В главе 14 мы узнали о свойствах и методах, которые мы можем создать у любого экземпляра любого объекта и которые относятся только к данному экземпляру, не затрагивая другие, даже созданные на основе того же объекта. Так вот, для хранения списка материалов, связанных с какой-либо Web-страницей, мы создадим свойство экземпляра с именем related. Это свойство будет создано у экземпляра объекта HTMLElement, представляющего пункт вложенного списка, который соответствует данной Web-странице. Метод insertHtml (см. листинг 19.1) как раз возвращает экземпляр объекта HTMLElement, что нам на руку.
Первую задачу — соотношение пункта полосы навигации со списком связанных материалов — мы решили.
Найдем объявление функции prepareSamples, которая подготавливает текст примеров и, что важно для нас, выполняется после загрузки фрагмента содержимого. Добавим в конец тела функции, передаваемой в качестве параметра методу each, такое выражение:
generateRelated();
Это вызов функции generateRelated, которая и создаст раздел "См. также" и которую мы сейчас объявим.
Не будем откладывать дело в долгий ящик. Листинг 19.2 содержит объявление функции generateRelated.
Листинг 19.2
function generateRelated() {
var s = "";
var oRelated = elLastItem.dom.related;
if (oRelated) {
for (var i = 0; i < oRelated.length; i++) {
if (s!= "")
s += ", ";
s += "<CODE><A HREF=\"" + oRelated[i].url + "\">" +
oRelated[i].name + "</A></CODE>";
}
var htelRelated = Ext.get("cmain"). insertHtml("beforeEnd", "<P>См. также: " + s + "</P>"); Ext.fly(htelRelated). select("A"). on("click", function(e, t) {
var href = Ext.fly(this). getAttribute("href");
var elA = Ext.get("navbar"). child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
Рассмотрим приведенный код построчно.
Объявляем переменную s, в которой будет храниться HTML-код, формирующий раздел "См. также" в виде строки:
var s = "";
Первое, что нам нужно, — получить список материалов, связанных с загруженной в данный момент Web-страницей (точнее, фрагментом содержимого). Как его получить? Вспомним, что еще в главе 17 мы объявили переменную elLastItem. Она хранит пункт полосы навигации, на котором посетитель щелкнул мышью и который как раз и соответствует загруженному в данный момент фрагменту содержимого. Вот и решение:
var oRelated = elLastItem.dom.related;
Значение переменной elLastItem — это экземпляр объекта Element. Соответствующий ему экземпляр объекта HTMLElement мы можем получить через свойство dom. А полученный экземпляр объекта HTMLElement, в свою очередь, содержит свойство related, которое и хранит массив конфигураторов, представляющих Web-страницы со связанными материалами; мы сами создали это свойство при формировании пунктов вложенных списков (исправленная функция generateInnerList).
Проверяем, присутствует ли это свойство в экземпляре объекта HTMLElement, т. е. существует ли у данной Web-страницы список связанных материалов:
if (oRelated) {
Если существует, запускаем цикл со счетчиком, который обработает все элементы этого массива:
for (var i = 0; i < oRelated.length; i++) {
Фрагменты HTML-кода, формирующие отдельные гиперссылки раздела "См.
также", мы будем добавлять в строку, хранящуюся в переменной s:
if (s!= "")
s += ", ";
Эти гиперссылки следует разделить запятыми, что и выполняет приведенное выражение. Оно проверяет, есть ли в переменной s непустая строка, т. е. сформирована ли в ней хотя бы одна гиперссылка, и, если это так, добавляет к ней запятую — разделитель гиперссылок.
Формируем HTML-код, создающий гиперссылку на очередную Web-страницу из списка связанных материалов, и добавляем его к значению переменной s:
s += "<CODE><A HREF=\"" + oRelated[i].url + "\">" + oRelated[i].name + "</A></CODE>";
}
На этом тело цикла завершается.
Далее создаем на основе сформированного HTML-кода абзац, который и станет разделом "См. также". Добавляем его в самый конец контейнера cmain (перед его закрывающим тегом):
var htelRelated = Ext.get("cmain"). insertHtml("beforeEnd", "<P>См. также: " + s + "</P>");
Выбираем из сформированного в предыдущем выражении абзаца все гиперссылки и привязываем к ним функцию — обработчик события click, которую там же и объявляем:
Ext.fly(htelRelated). select("A"). on("click", function(e, t) {
Первым делом эта функция получит значение атрибута HREF — интернет-адрес — гиперссылки, на которой щелкнули мышью:
var href = Ext.fly(this). getAttribute("href");
Далее она ищет в списке navbar гиперссылку с тем же интернет-адресом:
var elA = Ext.get("navbar"). child("A[href=" + href + "]");
Пункты нашей полосы навигации не содержат повторяющихся интернет-адресов, поэтому такой прием будет работать.
Найдя такую гиперссылку, она получает ее родителя — сам пункт:
var elItem = elA.parent("LI");
который, вместе с экземпляром объекта EventObject, представляющим возникшее событие, "скармливает" объявленной нами в главе 17 функции loadFragment. Последняя выполнит загрузку соответствующего фрагмента содержимого и выделит соответствующий пункт полосы навигации:
loadFragment(elItem, e);
});
}
На этом выполнение функции generateRelated заканчивается.
Теперь отыщем код, объявляющий функцию cleanupSamples. Она, как мы помним, удаляет обработчики событий у текста примеров перед загрузкой другого фрагмента содержимого. Это нужно, чтобы не засорять внутренние структуры данных библиотеки Ext Core сведениями о привязке обработчиков событий к уже не существующим элементам Web-страницы.
Нам нужно дополнить этот код, чтобы он также удалял обработчики событий у гиперссылок раздела "См. также". Сделаем проще — будем выбирать все гиперссылки в контейнере cmain и удалять у них обработчики событий.
Листинг 19.3 содержит дополненное объявление функции cleanupSamples.
Листинг 19.3
function cleanupSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){ var elH6 = el.child(":first"); elH6.removeAllListeners();
});
var ceA = Ext.get("cmain"). select("A");
ceA.removeAllListeners();
}
Так, вторая и третья задачи решены. Мы сформировали раздел "См. также" и реализовали загрузку Web-страницы при щелчке на гиперссылке этого раздела.
Теперь представим
