Дронов Владимир
Шрифт:
— Обеспечить загрузку 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", "См. также: " + s + ""); 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="#"]");
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>";