Листинг 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;
Если вложенный список в пункте "внешнего" списка, на котором щелкнули
мышью, отсутствует, выполняется следующий код:
} else {
Проверяем, открыт ли в данный момент какой-либо вложенный список (содержит ли переменная elLastInnerList какое-либо значение, отличное от null):
if (elLastInnerList) { elLastInnerList.setDisplayed(false); elLastInnerList = null;
}
Если это так, скрываем открытый вложенный список и присваиваем переменной elLastInnerList значение null, указывая, что ни один вложенный список в данный момент не открыт.
Затем проверяем, выделен ли в данный момент какой-либо пункт полосы навигации (содержит ли переменная elLastItem какое-либо значение, отличное от null), и не тот ли это пункт, на котором щелкнули мышью:
if ((elLastItem) && (elLastItem.dom!= elLI.dom))
elLastItem.removeClass("selected");
Здесь мы также сравниваем экземпляры объекта HTMLElement Web-обозревателя. Если какой-то пункт выделен и это не тот же самый пункт, на котором щелкнули мышью, снимаем с него выделение, убрав стилевой класс selected из привязки к нему.
Выделяем пункт, на котором щелкнули мышью, привязав к нему стилевой класс selected:
elLI.addClass("selected");
И сохраняем этот пункт в переменной elLastItem:
elLastItem = elLI;
}
Если пункт, на котором щелкнули мышью, находится во вложенном списке, выполняется следующий код:
} else {
Далее все нам уже знакомо:
if ((elLastItem) && (elLastItem.dom!= elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
}
Проверяем, выделен ли в данный момент какой-либо пункт полосы навигации, и не тот ли это пункт, на котором щелкнули мышью. Если это так, снимаем с него выделение, убрав стилевой класс selected из привязки к нему. Далее выделяем пункт, на
котором щелкнули мышью, привязав к нему стилевой класс selected, и сохраняем этот пункт в переменной elLastItem. На этом выполнение функции loadFragment закончено.
Теперь объявим функцию hideInnerLists, которая скроет все вложенные списки в полосе навигации после загрузки базовой Web-страницы index.htm. Вот соответствующий код:
function hideInnerLists() {
var ceInnerLists = Ext.get("navbar"). select("UL");
ceInnerLists.setDisplayed(false);
}
Комментировать здесь особо нечего. Мы получаем все списки, вложенные во "внешний" список navbar, и скрываем их.
На очереди — функция cleanupSamples (листинг 17.2). Она удалит обработчики событий, привязанные к первым потомкам контейнеров с текстом примеров (тех, к которым привязан стилевой класс sample).
Дата добавления: 2015-05-08; просмотров: 759;