Листинг 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; просмотров: 663;