Выделение пункта полосы навигации при наведении на него курсора мыши

Выделение пункта полосы навигации при наведении на него курсора мыши

Ну, это мы уже сделали. В листинге 16.3 приведен написанный нами в главе 14 JavaScript-код.

Листинг 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 из привязки к данному пункту списка, и его рамка примет прежний цвет.