HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Фактически мы реализуем семантическую связь между "локальными" и "глобальной" базами данных средствами JavaScript. Это будет связь типа "метка — собственно данные".
"Локальную" базу данных мы также оформим в виде Web-сценария, который объявляет соответствующий массив (или массивы), и сохраним его в том же файле, в котором хранится HTML-код Web-страницы (точнее, подгружаемого фрагмента содержимого). Так будет проще — на одну Web-страницу будет приходиться один файл, а не два.
Но тут возникает большая проблема. Дело в том, что средства подгрузки содержимого, предоставляемые Web-обозревателем, не выполняют ни хранящиеся в подгружаемом фрагменте внутренние Web-сценарии,
Что же нам делать?
Поместить связанные данные, на основе которых будет формироваться раздел "См. также", прямо в "глобальную" базу данных. Для этого мы создадим в конфигураторах, описывающих отдельные Web-страницы, еще одно свойство — related. Оно будет хранить массив элементов массивов aHTML, aCSS и aSamples, описывающих связанные Web-страницы. Это свойство мы сделаем необязательным, т. е. в каких-то случаях его можно не указывать, и Web-сценарий, создающий раздел "См. также", сработает правильно.
Так мы создадим семантические связи типа "главный — подчиненный". В качестве связи будет выступать механизм массивов JavaScript.
Сказано — сделано! Откроем файл Web-сценариев data.js, найдем в нем место, где заканчивается код, который объявляет массивы aHTML, aCSS и aSamples, и вставим туда такое выражение:
aHTML[0].related = [aHTML[4], aHTML[7], aHTML[10]];
Мы взяли первый элемент массива aHTML (с индексом 0), добавили к хранящемуся в нем конфигуратору свойство related и присвоили этому свойству массив из трех конфигураторов, хранящихся в пятом, восьмом и одиннадцатом элементах (индексы 4, 7 и 10) того же массива. Таким образом мы указали, что для Web-страницы с описанием тега <!DOCTYPE> связанными являются Web-страницы с описаниями тегов <HEAD>, <META> и <TITLE>.
Но почему мы написали это выражение после кода, объявляющего все элементы массивов aHTML, aCSS и aSamples? Да потому, что перед тем, как присваивать какой- либо переменной или элементу массива экземпляр объекта, его нужно создать. Иначе данная переменная или элемент массива получит значение undefined, что нам совсем не нужно.
После этого выражения добавим такое:
aHTML[8].related = [aHTML[3], aHTML[9], aCSS[0]];
Здесь мы указали, что для Web-страницы с описанием тега (именно эту 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", "См. также: " + 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).