Дронов Владимир
Шрифт:
— При открытии Web-страницы, содержащей один из разделов Web-сайта ("HTML", "CSS" или "Примеры"), будет открываться тот вложенный список, что вложен в соответствующий пункт "внешнего" списка.
— При открытии Web-страницы, описывающей тег, атрибут стиля или пример, будет открываться вложенный список, содержащий указывающий на эту Web- страницу пункт.
— В данный момент может быть открыт только один вложенный список — остальные будут скрыты.
— Для скрытия и раскрытия вложенного списка мы будем менять у него значение атрибута стиля display (см. главу 9) с помощью методов объекта Element, управляющих видимостью элемента Web-страницы.
Откроем файл Web-сценария main.js и запишем где-либо в его начале, еще до вызова метода onReady объекта Ext, объявление функции, приведенное в листинге 16.6.
Листинг 16.6
function showInnerList(iIndex) {
var elNavbar = Ext.get("navbar");
var ceInnerLists = elNavbar.select("UL");
ceInnerLists.setDisplayed(false);
if (iIndex) {
var sSelector = "UL: nth(" + iIndex + ")";
elNavbar.child(sSelector). setDisplayed(true);
}
}
Данная функция с именем showInnerList будет скрывать все вложенные списки и открывать только тот из них, порядковый номер которого передан ей в качестве единственного параметра. Если параметр опущен, но никакой вложенный список открыт не будет.
Рассмотрим код этой функции построчно.
Сначала получаем "внешний" список, формирующий полосу навигации:
var elNavbar = Ext.get("navbar");
Затем получаем все вложенные в него списки:
var ceInnerLists = elNavbar.select("UL");
Далее скрываем все вложенные списки, для чего используем метод setDisplayed — так проще:
ceInnerLists.setDisplayed(false);
Проверяем, был ли функции showInnerList передан параметр:
if (iIndex) {
Если он был передан, переменная iIndex будет содержать число, которое преобразуется в значение true, и условие выполнится. В противном случае переменная iIndex получит значение null, которое будет преобразовано в false, и условие не выполнится.
Если параметр функции showInnerList был передан, выполняется следующий код. Формируем строку с селектором CSS, который будет выбирать вложенный список, чей порядковый номер был передан с параметром:
var sSelector = "UL: nth(" + iIndex + ")";
Выбираем вложенный список с заданным номером и открываем его:
elNavbar.child(sSelector). setDisplayed(true);
}
На этом выполнение функции showInnerList завершится.
Теперь вставим в конец тела функции, которая передается в качестве параметра методу onReady объекта Ext, такое выражение:
showInnerList(outerIndex);
Здесь мы вызываем функцию showInnerList, передавая ей в качестве параметра значение переменной outerIndex. Эта переменная будет хранить номер вложенного списка, который требуется открыть.
Теперь откроем Web-страницу index.htm и в секцию ее заголовка (в теге <HEAD>) вставим такой код:
<SCRIPT>
outerIndex = 1;
</SCRIPT>
Мы присваиваем переменной outerIndex число 1 — номер вложенного списка, который должен быть открыт при открытии Web-страницы index.htm (это список раздела "HTML"). Когда будут выполняться Web-сценарии, хранящиеся в файле main.js, в том числе и вызов функции showInnerList, значение этой переменной будет передано данной функции в качестве параметра.
Здесь мы немного нарушили требования концепции Web 2.0, предписывающие хранить поведение Web-страницы отдельно от ее содержимого. Но в данном случае это оправдано, т. к. этот Web-сценарий у разных Web-страниц нашего Web-сайта будет различаться, и создавать ради него для каждой Web-страницы "персональный" файл Web-сценария слишком расточительно.
Такой же Web-сценарий мы вставим в секцию заголовка Web-страниц, описывающих теги HTML. И не забываем сохранять исправленные Web-страницы.
В секцию заголовка Web-страницы css_index.htm и Web-страниц, описывающих атрибуты стиля CSS, мы вставим аналогичный код:
<SCRIPT>
outerIndex = 2;
</SCRIPT>
Он укажет, что при открытии данных Web-страниц должен быть открыт второй по счету вложенный список — раздела "CSS".
В секцию заголовка Web-страницы samples_index.htm и Web-страниц, содержащих примеры, мы вставим код… сами догадайтесь, какой. (Подсказка: он должен раскрыть третий вложенный список.)