HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

— Если посетитель щелкнул на пункте вложенного списка, эта функция:

удалит выделение с выделенного ранее пункта полосы навигации (если он был выделен и если это не тот же самый пункт, на котором щелкнули мышью);

выделит пункт, на котором щелкнули мышью.

Еще нам понадобятся две вспомогательные функции. Первая, совсем простая, будет вызвана после загрузки базовой 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)

e. stopEvent;

Этот код перекочевал из функции-обработчика события click пунктов полосы навигации нашего предыдущего Web-сайта (подробности — в главе 16).

Получаем гиперссылку, вложенную в пункт полосы навигации, на котором щелкнули мышью:

var elA = elLI.child("A");

Если эта гиперссылка существует, выполняем следующий

код:

if (elA) {

Вызываем функцию cleanupSamples, которая удалит обработчики событий у первых потомков контейнеров с текстами примеров:

cleanupSamples;

Мы объявим эту функцию потом. Получаем интернет-адрес гиперссылки:

var href = elA.getAttribute("HREF");

Загружаем в контейнер cmain содержимое файла, на который указывает полученный интернет-адрес:

Ext.get("cmain"). load({ url: href, success: prepareSamples });

После его загрузки вызываем функцию prepareSamples, которая добавит контейнерам с текстом примеров возможность скрытия и раскрытия в ответ на щелчки мышью. Эту функцию мы объявили в главе 16.

Получаем список — родитель пункта полосы навигации, на котором щелкнули мышью, и проверяем, navbar ли его имя:

if (elLI.parent("UL"). id == "navbar") {

Если это так, значит, данный пункт является пунктом "внешнего" списка navbar, в противном случае — вложенного.

Если это пункт "внешнего" списка, получаем вложенный в него список, если, конечно, он там присутствует:

var elInnerList = elLI.child("UL");

Проверяем, присутствует ли в пункте вложенный список:

if (elInnerList) {

Если вложенный список присутствует, проверяем, выделен ли в данный момент какой-либо пункт полосы навигации, т. е. содержит ли переменная elLastItem какое-либо значение, отличное от null:

if (elLastItem) { elLastItem.removeClass("selected"); elLastItem = null;

}

Если это так, удаляем из привязки к выделенному пункту стилевой класс selected, делая его невыделенным, и присваиваем переменной elLastItem значение null, указывая тем самым, что ни один пункт полосы навигации в данный момент не выделен.

Также проверяем, открыт ли в данный момент какой-либо вложенный список (содержит ли переменная elLastInnerList какое-либо значение, отличное от null), и не тот ли это список, что вложен в пункт, на котором щелкнули мышью:

if ((elLastInnerList) && (elLastInnerList.dom!=

elInnerList.dom))

elLastInnerList.setDisplayed(false);

Если это так, скрываем этот список.

Обратим внимание, как мы проверяем тождественность открытого в данный момент вложенного списка тому, что содержится в пункте, на котором щелкнули мышью. Мы сравниваем не экземпляры объекта Element, возвращенные методами библиотеки Ext Core, а экземпляры объекта HTMLElement Web-обозревателя. Дело в том, что методы библиотеки Ext Core в разные моменты времени могут вернуть совершенно разные экземпляры объекта Element, тем не менее, представляющие один и тот же элемент Web-страницы. В то время как экземпляр объекта HTMLElement, представляющий данный элемент Web-страницы, всегда один и тот же.

Чтобы получить доступ к экземпляру объекта HTMLElement, мы используем свойство dom объекта Element. Оно было описано в главе 15.

Далее нам остается только открыть вложенный список, присутствующий в пункте, на котором щелкнули мышью:

elInnerList.setDisplayed(true);

…и сохранить его в переменной elLastInnerList:

elLastInnerList = elInnerList;

Если вложенный список в пункте "внешнего" списка, на котором щелкнули

мышью, отсутствует, выполняется следующий код: