Листинг 15.7
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered"); e.stopEvent();});
ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered"); e.stopEvent();});
Объект CompositeElementLite
Вернемся в начало этой главы и вспомним, как мы получали доступ к нужному нам элементу Web-страницы.
Мы можем получить доступ к одному элементу Web-страницы:
var elCMain = Ext.get("cmain");
Или сразу к нескольким:
var clContainers = Ext.select("DIV");
Мы помним, что метод select объекта Ext возвращает экземпляр объекта CompositeElementLite — коллекцию экземпляров объекта Element, представляющих все подходящие под указанный селектор CSS элементы Web-страницы. Настала пора рассмотреть объект CompositeElementLite подробнее.
Прежде всего, объект CompositeElementLite поддерживает все методы объекта Element, предназначенные для управления привязкой стилевых классов, атрибутами
тега и стиля, привязкой обработчиков событий и т. п. Так что мы можем привязывать стилевые классы и обработчики событий сразу к нескольким элементам Web-страницы. (Собственно, мы это уже делали.)
Метод getCount возвращает число элементов данной коллекции. Он не принимает параметров:
var i = clContainers.getCount();
В переменной i окажется число элементов в полученной ранее коллекции
clContainers — 5.
Метод item возвращает элемент данной коллекции с указанным индексом в виде экземпляра объекта Element:
<экземпляр объекта CompositeElementLite> .item(<индекс> )
Как видим, этот метод принимает единственный параметр — индекс требуемого элемента коллекции в виде числа.
Пример:
var elDiv = clContainers.item(i — 1);
В переменной elDiv окажется последний элемент коллекции clContainers. Поскольку элементы коллекции, как и элементы обычного массива, нумеруются, начиная с нуля, мы передали методу item значение, на единицу меньшее, чем число элементов в коллекции.
А в следующем примере мы последовательно извлекаем все элементы коллекции clContainers и выполняем над ними какие-то действия:
for(var k = 0; k < i; k++) {
var elDiv = clContainers.item(k);
// Что-то делаем
}
Метод indexOf возвращает индекс указанного элемента в данной коллекции в виде числа:
<экземпляр объекта CompositeElementLite> .indexOf(<элемент> )
Единственным параметром этому методу передается искомый элемент. Им может быть строка с именем элемента, экземпляр объекта Element или HTMLElement.
Если переданный элемент в коллекции отсутствует, метод indexOf возвращает –1.
Пример:
var ind = clContainers.indexOf("cnavbar");
В переменной ind окажется индекс контейнера cnavbar в коллекции clContainers — 1.
Метод each вызывает для каждого элемента данной коллекции указанную функцию:
<экземпляр объекта CompositeElementLite> .each(<функция> )
Единственным параметром этому методу передается функция, которая будет вызвана для каждого элемента данной коллекции. Она должна принимать следующие параметры:
— элемент коллекции в виде экземпляра объекта Element;
— сама эта коллекция в виде экземпляра объекта CompositeElementLite;
— индекс элемента коллекции в виде числа.
Кроме того, элемент коллекции доступен в теле этой функции через переменную this.
В примере из листинга 15.8 мы привязываем к каждому контейнеру, входящему в коллекцию clContainers, стилевой класс hovered.
Дата добавления: 2015-05-08; просмотров: 703;