|
Учебник Дронова HTML,CSS,Javascript
Привет всем.
Изучаю Дронова. Возникла одна непонятка в тексте.
Есть картинка с кодом (листинг 16.9):
В коде на картинке прописано :
Ext.get(this).parent("DIV").addClass("hovered");
и
Ext.get(this).parent("DIV").removeClass("hovered") ;
а в описании картинки:
Ext.fly(this).parent("DIV").addClass("hovered");
и
Ext.fly(this).parent("DIV").removeClass("hovered") ;
Если здесь опечатка то где: в картинке или в описании?
Спасибо.
Это код на картинке:
function showHideSample(e, t) {
var elDiv = Ext.fly(t).parent(".sample");
var ceSampleText = elDiv.select("*:not(:first-child)");
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY );
ceSampleText.toggle();
}
function prepareSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){
var elH6 = el.child(":first");
elH6.on("click", showHideSample);
elH6.on("mouseover", function(e, t) {
Ext.get(this).parent("DIV").addClass("hovered");
});
elH6.on("mouseout", function(e, t) {
Ext.get(this).parent("DIV").removeClass("hovered") ;
});
var ceSampleText = el.select("*:not(:first-child)");
ceSampleText.setDisplayed(false);
});
}
А это описание к этой картинке:
Мы объявили функции showHideSample и prepareSamples. Первая будет обрабаты-вать событие click в первом потомке контейнера с текстом примера и в ответ на это событие скрывать или открывать данный контейнер. Вторая будет выполнять подготовительные действия: при открытии Web-страницы скрывать контейнеры с текстом примеров и привязывать к ним обработчики событий.
Рассмотрим код этих функций построчно. И начнем с функции prepareSamples.
Сначала получаем все контейнеры с привязанным стилевым классом sample, т. е. содержащие текст примеров:
var ceSamples = Ext.select(".sample");
Затем для каждого полученного контейнера выполняем описанные далее манипу-ляции:
ceSamples.each(function(el, cl, ind){
Получаем первый потомок контейнера:
var elH6 = el.child(":first");
Привязываем к нему в качестве обработчика события click функцию showHideSample:
elH6.on("click", showHideSample);
Привязываем к нему функцию — обработчик события mouseover, которую там же и объявляем:
elH6.on("mouseover", function(e, t) {
Ext.fly(this).parent("DIV").addClass("hovered");
});
Эта функция получит родитель элемента Web-страницы, в котором возникло дан-ное событие, т. е. контейнер с текстом примера, и привяжет к нему стилевой класс hovered.
Не забываем привязать функцию-обработчик события mouseout, которая будет уби-рать из привязки к контейнеру стилевой класс hovered:
elH6.on("mouseout", function(e, t) {
Ext.fly(this).parent("DIV").removeClass("hovered") ;
});
Получаем все остальные элементы-потомки контейнера (не являющиеся первым потомком):
var ceSampleText = el.select("*:not(:first-child)");
И скрываем их:
ceSampleText.setDisplayed(false);
});
|
