Дронов Владимир
Шрифт:
}
На этом тело цикла завершается.
Далее создаем на основе сформированного HTML-кода абзац, который и станет разделом "См. также". Добавляем его в самый конец контейнера cmain (перед его закрывающим тегом):
var htelRelated = Ext.get("cmain"). insertHtml("beforeEnd", "См. также: " + s + "");
Выбираем из сформированного в предыдущем выражении абзаца все гиперссылки и привязываем к ним функцию — обработчик события 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="#"]");
Пункты нашей полосы навигации не содержат повторяющихся интернет-адресов, поэтому такой прием будет работать.
Найдя такую гиперссылку, она получает ее родителя — сам пункт:
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-страницы при щелчке на гиперссылке этого раздела.
Теперь представим себе такую ситуацию. Посетитель щелкает на каком-либо пункте полосы навигации, Web-обозреватель выводит соответствующую Web-страницу и формирует на ней раздел "См. также". Этот раздел содержит несколько гиперссылок, указывающих на Web-страницы с описаниями тегов HTML (первый раздел — "HTML"), и несколько гиперссылок, указывающих на Web-страницы с описаниями атрибутов стиля CSS (второй раздел — "CSS"). Предположим, что загруженная в данный момент Web-страница также содержит описание тега HTML (принадлежит к первому разделу); значит, первый, представляющий Web-страницы из первого раздела, вложенный список в полосе навигации открыт, остальные — скрыты.
В этот момент посетитель щелкает на гиперссылке раздела "См. также", ведущей на Web-страницу с описанием атрибута стиля CSS (принадлежащей второму разделу), и Web-страница успешно загружается. По идее, второй вложенный список (который представляет все Web-страницы второго раздела) в полосе навигации должен быть открыт, а первый, открытый ранее, — скрыт. Ничего подобного! Первый вложенный список так и останется открытым.
Дело в том, что, создавая в главе 17 Web-сценарий, управляющий скрытием и раскрытием вложенных списков в полосе навигации и выделением ее пунктов, мы полагали, что щелкать на пунктах полосы навигации будет человек. А он в принципе не может щелкнуть на пункте, находящемся в скрытом списке, — ведь скрытый список вообще не присутствует на Web-странице. Поэтому мы не реализовали в функции loadFragment возможность открытия вложенного списка, на пункте которого щелкнул посетитель, — это было просто незачем.
Сейчас же мы написали функцию generateRelated, которая создает раздел "См. также" с набором гиперссылок и привязывает к ним обработчик события click. Этот обработчик находит в полосе навигации пункт, который имеет гиперссылку с тем же интернет-адресом, и, если можно так сказать, программно "щелкает" на нем. А он ведь может "щелкнуть" и на пункте скрытого списка!
Вывод: нам потребуется дополнить объявление функции loadFragment так, чтобы она открывала вложенный список, на пункте которого "щелкнули", если, конечно, он еще не открыт. Найдем это объявление и отыщем в нем фрагмент кода, приведенный в листинге 19.4.
Листинг 19.4
.
} else {
if ((elLastItem) && (elLastItem.dom!= elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
Этот код управляет выделением пункта вложенного списка, на котором щелкнули мышью или "щелкнули" программно. Дополним его так, как показано в листинге 19.5.
Листинг 19.5
} else {
var elInnerList = elLI.parent("UL");
if ((elLastInnerList) && (elLastInnerList.dom!= elInnerList.dom))
elLastInnerList.setDisplayed(false); elInnerList.setDisplayed(true); elLastInnerList = elInnerList;
if ((elLastItem) && (elLastItem.dom!= elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}