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

We use cookies. Read the Privacy and Cookie Policy

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

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

Данный текст является ознакомительным фрагментом.