Web-страницы готовы. Настала пора создавать соответствующее поведение. Откроем Web-страницу index.htm нового Web-сайта в Блокноте и удалим из секции ее заголовка код, объявляющий переменные outerIndex и innerText. Они нам больше не потребуются, так что незачем засорять память компьютера ненужными данными.
Потом откроем файл main.js нового Web-сайта, найдем в нем объявление функции selectItem и удалим его. Также удалим выражение, вызывающее эту функцию, из тела функции, которая передается методу onReady объекта Ext. Весь этот код нам больше не понадобится — скрытие и открытие вложенных списков и выделение пунктов полосы навигации мы реализуем по-другому, более 'интеллектуально'.
Но как?
Прежде всего, мы будем хранить ссылки на выделенный в данный момент пункт полосы навигации и открытый вложенный список. Для этого мы объявим две переменные.
Далее мы напишем функцию, которая станет обработчиком события click пунктов полосы навигации. Эта функция будет выполнять три задачи. Во-первых, она реализует подгрузку содержимого из файла, чей интернет-адрес указан в гиперссылке
пункта меню, на котором щелкнули мышью, и вывод его в контейнере cmain. Во-вторых, она будет делать тексты примеров скрывающимися и открывающимися при щелчке мышью на их первых потомках (для этого мы используем код, написанный в
— Если посетитель щелкнул на пункте 'внешнего' списка, формирующего полосу навигации, который имеет вложенный список, эта функция:
удалит выделение с выделенного ранее пункта полосы навигации (если он был выделен). Выделенный пункт полосы навигации будет храниться в особой переменной, которую мы собираемся объявить;
скроет открытый ранее вложенный список (если он был открыт и не вложен в пункт, на котором щелкнули мышью, — в этом случае нам нет нужды скрывать его, чтобы тотчас открыть). Открытый вложенный список также будет храниться в особой переменной, которую мы собираемся объявить;
развернет список, вложенный в пункт, на котором щелкнули мышью.
— Если посетитель щелкнул на пункте 'внешнего' списка, не имеющего вложенного списка, эта функция:
скроет открытый ранее вложенный список (если он был открыт);
удалит выделение с выделенного ранее пункта полосы навигации (если он был выделен и если это не тот же самый пункт, на котором щелкнули мышью, — в этом случае незачем снимать с него выделение, чтобы сразу же выделить);
выделит пункт, на котором щелкнули мышью.
— Если посетитель щелкнул на пункте вложенного списка, эта функция:
удалит выделение с выделенного ранее пункта полосы навигации (если он был выделен и если это не тот же самый пункт, на котором щелкнули мышью);
выделит пункт, на котором щелкнули мышью.
Еще нам понадобятся две вспомогательные функции. Первая, совсем простая, будет вызвана после загрузки базовой Web-страницы index.htm и сделает все вложенные списки в полосе навигации скрытыми.
Вторая функция удалит все обработчики событий, привязанные к первым потомкам контейнеров со стилевым классом sample ('вместилища' для текста примеров). Перед тем как выводить в контейнере cmain новое содержимое, нужно удалить обработчики событий, привязанные к старому его содержимому. Так мы очистим память компьютера от не нужных более обработчиков событий и устраним потенциальную возможность появления ошибок. Данная функция будет вызываться в теле функции, которую мы описали чуть раньше, перед подгрузкой и выводом содержимого другого файла.
Что ж, задачи ясны. За работу!
В самом начале файла main.js поместим два выражения:
var elLastInnerList = null;
var elLastItem = null;
Они объявляют переменные elLastInnerList и elLastItem и присваивают им значение null. Первая переменная будет хранить открытый в данный момент вложенный список, вторая — выделенный в данный момент пункт полосы навигации.
Далее объявим функцию loadFragment, которая будет обрабатывать событие click пунктов полосы навигации (листинг 17.1). Она будет принимать два параметра: пункт, на котором щелкнули мышью, в виде экземпляра объекта Element и экземпляр объекта EventObject, хранящий сведения о событии. Второй параметр необязательный.
Листинг 17.1
function loadFragment(elLI, e) {
if (e)
e. stopEvent();
var elA = elLI.child('A');
if (elA) {
cleanupSamples();
var href = elA.getAttribute('HREF');
Ext.get('cmain'). load({ url: href, success: prepareSamples });
if (elLI.parent('UL'). id == 'navbar') {
var elInnerList = elLI.child('UL');
if (elInnerList) {
if (elLastItem) { elLastItem.removeClass('selected'); elLastItem = null;
}
if ((elLastInnerList) && (elLastInnerList.dom!=
elInnerList.dom))
elLastInnerList.setDisplayed(false); elInnerList.setDisplayed(true); elLastInnerList = elInnerList;
} else {
if (elLastInnerList) { elLastInnerList.setDisplayed(false); elLastInnerList = null;
}
if ((elLastItem) && (elLastItem.dom!= elLI.dom))
elLastItem.removeClass('selected');
elLI.addClass('selected');
elLastItem = elLI;
}
} else {
if ((elLastItem) && (elLastItem.dom!= elLI.dom))
elLastItem.removeClass('selected');
elLI.addClass('selected');
elLastItem = elLI;
}
}
}
Рассмотрим листинг 17.1 построчно.
Если функции loadFragment был передан второй параметр — экземпляр объекта EventObject, хранящий сведения о событии, — отменяем действие события по умолчанию и останавливаем его всплытие:
if (e)
