Дронов Владимир
Шрифт:
Если вложенный список есть, метод child вернет экземпляр объекта Element, в противном случае — значение null.
Проверяем, что мы получили в результате вызова метода child в предыдущем выражении:
if (elInnerList) {
Если этот метод вернул экземпляр объекта Element, последний будет преобразован в значение true, и условие выполнится. Если же он вернул значение null, оно будет преобразовано в false, и условие не выполнится.
Если вложенный список существует, открываем его:
elInnerList.setDisplayed(true);
Проверяем, был ли функции selectItem передан второй параметр — текст пункта вложенного списка, который следует выделить:
if (sText) {
Если он был передан, формируем строку с селектором CSS, выбирающим пункт вложенного списка, потомок которого содержит текст, переданный этим самым вторым параметром:
sSelector = "LI: has(:nodeValue(" + sText + "))";
Получаем пункт вложенного списка, удовлетворяющий сформированному ранее селектору, и сразу же привязываем к нему стилевой класс selected:
elOuterItem.child(sSelector). addClass("selected");
}
Если полученный ранее пункт "внешнего" списка с указанным порядковым номером не содержит вложенного списка, привязываем к этому пункту стилевой класс selected:
} else elOuterItem.addClass("selected");
На этом выполнение функции завершается.
В теле функции, передаваемой в качестве параметра методу onReady объекта Ext, ранее мы добавили вызов функции showInnerList. Удалим его и вместо него вставим такой код:
selectItem(outerIndex, innerText);
Здесь мы вызываем функцию selectItem, передавая ей в качестве параметров значения переменных outerIndex и innerText. Первая переменная будет хранить номер вложенного списка, который требуется открыть, а вторая — текст пункта вложенного списка, который нужно выделить.
Откроем Web-страницу index.htm, найдем код, вставленный ранее в ее секцию заголовка, и дополним его таким образом:
<SCRIPT> outerIndex = 1; innerText = null;
</SCRIPT>
Мы добавили выражение, присваивающее переменной innerText значение null. При выполнении Web-сценариев, хранящихся в файле main.js, в том числе и вызове функции selectItem, значения обеих этих переменных будут переданы данной функции в качестве параметров. В результате откроется первый вложенный список, и ни один его пункт не будет выделен.
Откроем Web-страницу t_audio.htm и дополним вставленный ранее код в ее секцию заголовка так:
<SCRIPT> outerIndex = 1; innerText = "AUDIO";
</SCRIPT>
В результате будет открыт первый вложенный список и в нем выделен пункт "AUDIO".
Аналогично заменим вставленный ранее код во всех остальных Web-страницах нашего Web-сайта и проверим их в действии.
Скрытие и открытие текста примеров
На Web-страницах, описывающих теги HTML и атрибуты стиля CSS, мы поместили текст примеров применения того или иного тега или атрибута стиля. Часто его делают скрывающимся и открывающимся в ответ на щелчок мышью — так можно сделать Web-страницы визуально менее громоздкими.
Давайте и мы реализуем нечто подобное на своих Web-страничках. Хотя бы в самом простом варианте.
— Текст примера мы поместим в блочный контейнер, к которому привяжем стилевой класс sample. Этот стилевой класс будет служить двум целям: во-первых, он обозначит данный контейнер как "вместилище" для примера, во-вторых, он задаст для контейнера особое представление, чтобы его выделить среди остального содержимого Web-страницы.
— Особое представление для контейнера с текстом примера будет включать внутренние отступы и рамку.
— Все содержимое контейнера изначально будет скрыто, за исключением первого его потомка (у нас — заголовок "Пример: " шестого уровня).
— При щелчке мышью на первом потомке контейнер (т. е. остальное его содержимое) будет открываться или снова скрываться.
— При наведении курсора мыши на первый потомок контейнера будет меняться цвет его рамки. Кроме того, мы зададим для него особое представление — форму курсора в виде "указующего перста". Так мы дадим посетителю понять, что данный элемент Web-страницы реагирует на щелчки мышью.