конфигуратору свойство related и присвоили этому свойству массив из трех конфигураторов, хранящихся в пятом, восьмом и одиннадцатом элементах (индексы 4, 7 и 10) того же массива. Таким образом мы указали, что для Web-страницы с описанием тега <!DOCTYPE> связанными являются Web-страницы с описаниями тегов <HEAD>, <META> и <TITLE>.
Но почему мы написали это выражение после кода, объявляющего все элементы массивов aHTML, aCSS и aSamples? Да потому, что перед тем, как присваивать какой- либо переменной или элементу массива экземпляр объекта, его нужно создать. Иначе данная переменная или элемент массива получит значение undefined, что нам совсем не нужно.
После этого выражения добавим такое:
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;
}
}
В
Первую задачу — соотношение пункта полосы навигации со списком связанных материалов — мы решили.
Найдем объявление функции 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-страницей (точнее, фрагментом содержимого). Как его получить? Вспомним, что еще в
var oRelated = elLastItem.dom.related;
Значение переменной elLastItem — это экземпляр объекта Element. Соответствующий ему экземпляр объекта HTMLElement мы можем получить через свойство dom. А полученный экземпляр объекта HTMLElement, в свою очередь, содержит свойство related, которое и хранит массив конфигураторов, представляющих Web-страницы со связанными материалами; мы сами создали это свойство при формировании пунктов вложенных списков (исправленная функция generateInnerList).
Проверяем, присутствует ли это свойство в экземпляре объекта HTMLElement, т. е. существует ли у данной Web-страницы список связанных материалов:
if (oRelated) {
