Листинг 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-страниц, содержащих примеры, мы вставим код… сами догадайтесь, какой. (Подсказка: он должен раскрыть третий вложенный список.)

А вот в секцию заголовка Web-страницы about.htm вставим такой код:

<SCRIPT>

outerIndex = null;

</SCRIPT>

Поскольку четвертый пункт "внешнего" списка не содержит вложенного списка, открывать там ничего не нужно — следует только скрыть уже открытые вложенные списки.

Сохраним все исправленные Web-страницы и опробуем их в деле. Неплохо получилось, правда?

 








Дата добавления: 2015-05-08; просмотров: 680;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.004 сек.