Листинг 16.3

var ceLinks = Ext.select("UL[id=navbar] LI");

ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");

});

ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered");

});

 

Разберем его построчно.

Сначала получаем все пункты списков, формирующих полосу навигации, — и "внешнего", и всех вложенных:

var ceLinks = Ext.select("UL[id=navbar] LI");

Затем привязываем к событию mouseover полученных пунктов функцию-обработчик, которую там же и объявляем:

ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");});

Этот обработчик сначала получит из переменной this экземпляр объекта HTMLElement, представляющий пункт списка, к которому, собственно, он и привязан. Вызовом метода get он преобразует его в экземпляр объекта Element и вызовом метода addClass привяжет к нему стилевой класс hovered (его определение см. в главе 14 ), который изменит цвет рамки этого пункта.

Также привязываем обработчик к событию mouseout полученных пунктов:

ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered");});

Он уберет стилевой класс hovered из привязки к данному пункту списка, и его рамка примет прежний цвет.

 








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


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

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

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

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