Дронов Владимир
Шрифт:
Что ж, цель поставлена. За работу!
Создадим текстовый файл с именем data.js и поместим его в папке Site 2. Откроем его и наберем код, приведенный в листинге 18.1.
Листинг 18.1
var aHTML = [];
aHTML[0] = { name: "!DOCTYPE", url: "tags/t_doctype.htm" };
aHTML[1] = { name: "AUDIO", url: "tags/t_audio.htm" };
aHTML[2] = { name: "BODY", url: "tags/t_body.htm" };
aHTML[3] = { name: "EM", url: "tags/t_em.htm" };
aHTML[4] = { name: "HEAD", url: "tags/t_head.htm" };
aHTML[5] = { name: "HTML", url: "tags/t_html.htm" };
aHTML[6] = { name: "IMG", url: "tags/t_img.htm" };
aHTML[7] = { name: "META", url: "tags/t_meta.htm" };
aHTML[8] = { name: "P", url: "tags/t_p.htm" };
aHTML[9] = { name: "STRONG", url: "tags/t_strong.htm" };
aHTML[10] = { name: "TITLE", url: "tags/t_title.htm" };
aHTML[11] = { name: "VIDEO", url: "tags/t_video.htm" };
var aCSS = [];
aCSS[0] = { name: "border", url: "attrs/a_border.htm" };
aCSS[1] = { name: "color", url: "attrs/a_color.htm" };
aCSS[2] = { name: "margin", url: "attrs/a_margin.htm" };
var aSamples = [];
aSamples[0] = { name: "Гиперссылки", url: "samples/a_hyperlinks.htm" };
aSamples[1] = { name: "Контейнеры", url: "samples/a_containers.htm" };
aSamples[2] = { name: "Таблицы", url: "samples/a_tables.htm" };
Здесь мы объявили массивы aHTML, aCSS и aSamples, которые будут хранить списки Web-страниц, описывающих, соответственно, теги HTML, атрибуты стиля CSS и примеры.
Элементы каждого из этих массивов хранят конфигураторы с двумя свойствами:
— name — название соответствующего пункта вложенного списка в виде строки;
— url — интернет-адрес файла с фрагментом содержимого также в виде строки.
Сохраним набранный код в кодировке UTF-8. Вообще, не забываем, что после любых правок кода его нужно сохранять.
Затем откроем в Блокноте Web-страницу index.htm и вставим в ее секцию заголовка такой код:
<SCRIPT SRC="data.js"></SCRIPT>
Он загрузит и выполнит только что созданный нами файл Web-сценария data.js. В результате в памяти компьютера будут созданы три массива — наша база данных.
Отметим, что файл Web-сценария загружается и выполняется в самом начале загрузки Web-страницы index.htm. Поэтому, когда дело дойдет до исполнения Web- сценариев, хранящихся в файле main.js (а они выполняются в конце загрузки Web-страницы), наша база данных уже будет сформирована и готова к работе.
Генерирование полосы навигации
Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.
Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент, создающий сами вложенные списки. Результат приведен в листинге 18.2.
Листинг 18.2
<UL ID="navbar">
<LI><A href="#">HTML</A>
<UL>
</UL>
</LI>
<LI><A href="#">CSS</A>
<UL>
</UL>
</LI>
<LI><A href="#">Примеры</A>
<UL>
</UL>
</LI>
<LI><A href="#">О разработчиках</A></LI>
</UL>
После этого откроем файл Web-сценария main.js и поместим перед вызовом метода onReady объекта Ext код из листинга 18.3.
Листинг 18.3
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>"; elInnerList.insertHtml("beforeEnd", s);
}
}
Он объявляет функцию generateInnerList, которая будет создавать пункты одного вложенного списка. Эта функция принимает два обязательных параметра:
— один из формирующих нашу базу данных массивов; на основе этого массива будут созданы пункты указанного вложенного списка;
— вложенный список, в котором будут создаваться эти пункты, в виде экземпляра объекта Element.
Ее код очень прост. Рассмотрим его построчно.
Запускаем цикл со счетчиком, в теле которого будут создаваться пункты списка:
for (var i = 0; i < aDataBase.length; i++) {
Счетчик цикла — переменная i, начальное значение счетчика — 0, конечное значение — размер массива, переданного первым параметром (он берется из свойства length объекта Array; подробнее — в главе 14), приращение — инкремент счетчика. В результате цикл выполнится столько раз, сколько элементов содержит массив, переданный первым параметром.
Формируем строку с HTML-кодом, создающим пункт списка:
var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" + aDataBase[i].name + "</A></CODE></LI>";
Название пункта и интернет-адрес файла с фрагментом содержимого берем из соответствующих свойств конфигуратора, являющегося элементом переданного первым параметром массива.
Создаем пункт списка на основе строки, сформированной в предыдущем выражении:
elInnerList.insertHtml("beforeEnd", s);
}
В качестве места, куда будет помещен новый пункт, мы указываем "beforeEnd" — перед закрывающим тегом. В результате новые пункты будут добавляться в конец списка.
На этом выполнение тела цикла завершается. А после того, как цикл закончит работу, завершится выполнение самой функции generateInnerList.
Теперь вставим в самое начало тела функции, передаваемой методу onReady объекта Ext, три выражения:
generateInnerList(aHTML, Ext.get("navbar"). child("> LI: nth(1) UL"));