Генерирование полосы навигации
Генерирование полосы навигации
Теперь можно заняться кодом, генерирующим вложенные списки в полосе навигации.
Снова откроем Web-страницу index.htm в Блокноте, если уже ее закрыли. Удалим весь HTML-код, формирующий пункты вложенных списков в полосе навигации, но оставим фрагмент, создающий сами вложенные списки. Результат приведен в листинге 18.2.
Листинг 18.2
<UL ID="navbar">
<LI><A HREF="chapters/html.htm">HTML</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/css.htm">CSS</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/samples.htm">Примеры</A>
<UL>
</UL>
</LI>
<LI><A HREF="chapters/about.htm">О разработчиках</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"));
generateInnerList(aCSS, Ext.get("navbar"). child("> LI: nth(2)UL"));
generateInnerList(aSamples, Ext.get("navbar"). child("> LI: nth(3) UL"));
Мы трижды вызываем функцию generateInnerList, поочередно передавая ей три массива, составляющих базу данных, и три вложенных списка, формирующих полосу навигации.
Три приведенных выражения создадут пункты вложенных списков, формирующих полосу навигации. Следующие выражения привяжут к ним обработчики событий. В результате наша полоса навигации будет работать как прежде, будто она не создается Web-сценарием, а полностью формируется в HTML-коде.
Откроем готовую Web-страницу index.htm, набрав интернет-адрес http://localhost в Web-обозревателе, и убедимся в этом. в
Данный текст является ознакомительным фрагментом.