Раскрывающийся список

Создать раскрывающийся список можно разными способами. Мы реализуем его с помощью вложенных элементов HTML UL и свойства display каскадных таблиц стилей, которое позволяет скрывать элементы страницы, не оставляя на ней даже выделенных под них блоков.

Поместим на страницу вложенный список:

<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>

<!--

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>

<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"

Движущийся элемент

Положение абсолютно позиционированного элемента на странице легко изменить, установив новые значения его свойств top и left из встроенного сценария. Если организовать изменение значений этих свойств во времени, то элемент будет двигаться на странице по заданной траектории. В следующем примере реализовано движение раздела (элемент DIV) по окружности.

Движущийся раздел текста

<HTML>

<HEAD>

<!--

function StartGlide() {

x = parseInt(document.body.offsetWidth)/2,

y = parseInt(document.body.offsetHeight)/2,

r = 3*y/5,

dt = 0.1,

t = 0;

action = window.setInterval("Glide()",100);

}

function Glide() {

t += dt;

Banner.style.left = x + r*Math.sin(t);

Banner.style.top = y + r*Math.cos(t);

}

-->

</SCRIPT>

<STYLE TYPE="text/css"><!--

H1 {background-color:lightgrey;

font-family: Arial;

font-size: 22pt;

color: indianred;

}

--></STYLE>

</HEAD>

<H1> Движущийся элемент </H1>

<P>Динамический HTML позволяет программно менять положение

элемента!</P>

<DIV ID="Banner" STYLE="position:absolute;

width: 200; background-color: lightsteelblue;">

Добро пожаловать на страницу динамического HTML!</DIV>

</BODY>

В теле документа определяется абсолютно позиционированный раздел с именем Banner. При загрузке документа вызывается функция startMove(), в которой определяются координаты x и y центра области отображения браузера, радиус r окружности и начальное значение параметра t вместе с его шагом изменения dt, используемое в параметрических уравнениях движения верхнего левого угла элемента Banner. Далее в этой же функции методом setInterval() объекта window с интервалом в 100 миллисекунд вызывается функция move(), которая и реализует перемещение во времени раздела.

Каждый раз при вызове функции move() изменяется значение параметра уравнений движения и в соответствии с ним определяется новое положение раздела — значения его свойств top и left. Уравнения движения — параметрическое уравнение окружности с центром в точке с координатами (x,y) и радиусом r.

Метод parseInt() используется в сценариях для выделения целого числа из значения свойств объектов, которые задаются вместе с размерностью. К ним относятся все размерные свойства, соответствующие атрибутам элементов HTML, и свойства каскадных таблиц стилей, задающие размеры и положение.

<21 222324 25 26 27 >

Дата добавления: 2018-09-24; просмотров: 639;