Упражнения
1. Разработать страницу для демонстрации возможностей свойств innerText, innerHTML, outerText, outerHTML и методов insertAdjacentText, insertAdjacentHTML. Страница может выглядеть следующим образом:
Страница состоит из абзаца и формы с полями, в которых отображаются значения указанных рядом с ними свойств абзаца. В этих же полях можно задать собственные значения свойств и нажатием расположенной слева соответствующей кнопки Изменить действительно изменить значения указанных свойств абзаца.
Для демонстрации работы методов в раскрывающемся списке Куда выбираются значения первого параметра, в поле Что задается второй параметр, а при нажатии на кнопку Вставить выполняется соответствующий метод абзаца.
2. Разработать страницу, текст которой представляет 3 главы книги (каждая глава занимает полторы области отображения браузера). В начале страницы поместить содержание, оформленное в виде гиперссылок. При щелчке на гиперссылке методом scrollIntoView() отобразить начало содержимого соответствующей главы. В конце каждой главы поставить ссылку, возвращающую пользователя на начало документа. Посмотреть действие параметра этого метода.
3. Разработать страницу, добавляющую при щелчке на любом элементе HTML к нему границу, определяемую с помощью свойств каскадных таблиц стилей.
4. Разработать страницу, тестирующую работу методов добавления, изменения и удаления атрибутов абзаца.
5. Разработать страницу, при загрузке которой в отдельном окне браузера отображается ее иерархическая структура DHTML со смещением названий тегов вложенных элементов вида:
body
p
img
b
i
p
ul
li
b
li
p
Урок 14. Примеры динамических страниц html Раскрывающийся список
Создать раскрывающийся список можно разными способами. Мы реализуем его с помощью вложенных элементов HTML UL и свойства display каскадных таблиц стилей, которое позволяет скрывать элементы страницы, не оставляя на ней даже выделенных под них блоков.
Поместим на страницу вложенный список:
<UL ID="idList" NAME="idList">
<LI TITLE="Щелкни и раскрой"
STYLE="cursor: hand;"> Один
<UL ID="idListOneA" NAME="idListOneA"
STYLE="display: none; cursor: default;">
<LI TITLE="Файл А">A
<LI TITLE="Файл Б">Б
</UL>
<LI TITLE="Нераскрывающийся список"> Два
<LI TITLE="Нераскрывающийся список"> Три
</UL>
Список idList составлен из трех элементов <LI> и вложенного списка idListOneA, который не отображается (его свойство display равно none) и будет использован для создания раскрывающегося списка при щелчке на первом элементе списка. Строка, заданная в атрибуте TITLE, отображается в виде всплывающей подсказки при расположении курсора мыши над элементом. Этот фрагмент отображается как простой статический список из трех элементов (вложенный список не отображается!) с маркерами.
Чтобы сделать список раскрывающимся, необходимо запрограммировать действия для первого элемента внешнего списка.
Но сначала запрограммируем изменение цвета этого элемента при наведении на него указателя мыши, чтобы пользователь обратил внимание на их "динамичность". Для этого добавим в его открывающий тег обработчики событий:
ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')"
Функция flashMe(), изменяющая цвет шрифта элемента, задается следующим кодом:
function flashMe(eSrc, sColor) {
eSrc.style.color=sColor
}
Теперь остается добавить обработчик щелчка кнопки мыши в первый элемент списка idList, выполняющий функцию отображения вложенного списка idListOneA, если он скрыт, и скрывающий его, если он видим:
ONCLICK="toggleList(this.children[0])"
При вызове функции для ссылки на вложенный список idListOneA используется конструкция this.children[0]. В ней this ссылается на элемент LI, а он непосредственно порождает единственный вложенный элемент — требуемый нам список idListOneA.
Исходный текст функции toggleList() приведен ниже:
function toggleListOneA(eTarget){
eTarget.style.display == "none" ?
eTarget.style.display="block":
eTarget.style.display="none";
eTarget.style.color = 'black';
}
Для того, чтобы раскрывшийся список idListOneA не был красного цвета, как и элемент LI, в который он вложен (свойство color наследуется), в функции toggleList() его цвет устанавливается черным.
Окончательно исходный текст сценария раскрывающегося списка выглядит так:
Раскрывающийся список
<HEAD>
<SCRIPT>
<!--
function toggleListOneA(eTarget){
eTarget.style.display == "none" ?
eTarget.style.display = "block":
eTarget.style.display = "none";
eTarget.style.color = 'black';
}
function flashMe(eSrc, sColor) {
eSrc.style.color=sColor
}
//-->
</SCRIPT>
<STYLE TYPE="text/css"><!--
H1 {background-color:lightgrey;
font-family: Arial;
font-size: 11pt;
color: indianred;
}
#idListOne {
list-style-image:url(leaf.jpg);
color: black;
list-style-position:inside;
}
--></STYLE>
</HEAD>
<H1> Пример 2.4: Раскрывающийся список </H1>
<UL ID="idListOne" NAME="idListOne">
<LI ONCLICK="toggleListOneA(this.children[0])"
ONMOUSEOVER="flashMe(this,'red')"
ONMOUSEOUT="flashMe(this,'black')"
TITLE="Щелкни и раскрой"
STYLE="cursor:hand;"> Один
<UL ID="idListOneA"
NAME="idListOneA"
STYLE="display:none; cursor: default;">
<LI TITLE="Файл А">A
<LI TITLE="Файл Б">Б
</UL>
<LI TITLE="Нераскрывающийся список"> Два
<LI TITLE="Нераскрывающийся список"> Три
</UL>
Графический файл item.jpg в свойстве каскадных таблицей стилей item-style-image задает изображение маркера в списках. Свойство cursor определяет тип курсора мыши, когда он располагается над элементом. В нашем примере курсор будет меняться на изображение руки (значение свойства hand).
Раскрывшийся список закроется при щелчке на нем или на элементе LI, в который он вложен, так как в этом случае сработает эффект "всплытие" события. Если требуется, чтобы список закрывался только при щелчке на элементе LI, следует добавить в открывающий тег <UL> списка idListOneA обработчик события ONCLICK с кодом, прекращающим "всплытие" события:
ONCLICK="window.event.cancelBubble=true"