На Web-страницах, описывающих теги HTML и атрибуты стиля CSS, мы поместили текст примеров применения того или иного тега или атрибута стиля. Часто его делают скрывающимся и открывающимся в ответ на щелчок мышью — так можно сделать Web-страницы визуально менее громоздкими.
Давайте и мы реализуем нечто подобное на своих Web-страничках. Хотя бы в самом простом варианте.
— Текст примера мы поместим в блочный контейнер, к которому привяжем стилевой класс sample. Этот стилевой класс будет служить двум целям: во-первых, он обозначит данный контейнер как 'вместилище' для примера, во-вторых, он задаст для контейнера особое представление, чтобы его выделить среди остального содержимого Web-страницы.
— Особое представление для контейнера с текстом примера будет включать внутренние отступы и рамку.
— Все содержимое контейнера изначально будет скрыто, за исключением первого его потомка (у нас — заголовок 'Пример: ' шестого уровня).
— При щелчке мышью на первом потомке контейнер (т. е. остальное его содержимое) будет открываться или снова скрываться.
— При наведении курсора мыши на первый потомок контейнера будет меняться цвет его рамки. Кроме того, мы зададим для него особое представление — форму курсора в виде 'указующего перста'. Так мы дадим посетителю понять, что данный элемент Web-страницы реагирует на щелчки мышью.
— На Web-странице могут быть несколько контейнеров с текстом примеров. Это следует учесть при написании Web-сценария.
Откроем таблицу стилей main.css и добавим в нее такие стили:
sample { padding: 5px; border: thin dotted #B1BEC6 }
sample >:first-child { margin: 0px 0px; cursor: pointer }
Первый стиль — это стилевой класс sample, помечающий контейнер как 'вместилище' для примера. Он задает для контейнера параметры внутренних отступов и рамки.
Второй стиль задает для первого непосредственного потомка данного контейнера нулевые внешние отступы (чтобы убрать ненужное свободное пространство выше и ниже его) и форму курсора в виде 'указующего перста'.
Теперь откроем файл Web-сценария main.js и поместим где-либо в его начале, перед вызовом метода onReady объекта Ext, код листинга 16.9.
Листинг 16.9
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);
});
На очереди — функция showHideSample.
Получаем родитель элемента Web-страницы, в котором возникло событие:
var elDiv = Ext.fly(t). parent('.sample');
Поскольку этот обработчик привязан к первому потомку контейнера с текстом примера, здесь мы получим сам этот контейнер.
Получаем все элементы-потомки контейнера, не являющиеся первым потомком:
var ceSampleText = elDiv.select('*:not(:first-child)');
Указываем, что для управления их видимостью будет использован атрибут стиля display, и изменяем их видимость (открываем, если они скрыты, и скрываем, если они открыты):
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);
ceSampleText.toggle();
Использовать здесь метод toggle проще, чем setDisplayed — нам не придется проверять, открыты данные элементы Web-страницы или нет. Правда, перед этим потребуется указать, что видимостью элемента будет управлять атрибут стиля display, но это мелочи.
Еще нам нужно поставить вызов функции prepareSamples в самый конец функции, передаваемой методу onReady объекта Ext:
prepareSamples();
Теперь откроем любую Web-страницу, содержащую описание тега HTML или атрибута стиля CSS, и поместим текст примера в блочный контейнер с привязанным стилевым классом sample. Листинг 16.10
