Динамічна зміна документа

Під динамічною зміною документа розуміється зміна його відображення у вікні браузера як результат переміщення курсору миші над елементами сторінки. Наприклад, при розташуванні курсора миші над будь-яким текстом останній змінює колір або розмір. Або з'являється випливна підказка, що при натисненні кнопкою миші можна побачити додаткові елементи списку.

Список, що розкривається

Створити просте меню можна на основі HTML-елемента <UL> і властивості display каскадних таблиць стилів, що дозволяє приховувати елементи сторінки. Помістимо на сторінку вкладений список:

Список idList складено з трьох елементів <LI> і вкладеного списку idOneA, який не відображається (його властивість display має значення none). Список idOneA буде використаний для утворення списку, що розкривається при натисканні на першому елементі списку idList. Рядок, заданий у параметрі TITLE, відображається у вигляді підказки при розташуванні курсору миші над елементом. Цей фрагмент відображається як простий статичний список з трьох елементів (вкладений список не відображається).

Щоб зробити список саморозгортуваним, необхідно додати до першого елемента зовнішнього списку і до елементів внутрішнього списку обробники подій і визначити в них необхідні дії.

Спочатку запрограмуємо зміну кольору цих елементів при розташуванні над ними курсору, щоб користувач звернув увагу на їх динамічність. Для цього додамо в теги елементів параметри обробників подій:

ONMOUSEOVER = "flashMe(this,'red')"
ONMOUSEOUT = "flashMe(this,'black')"

У обробниках подій викликається функція flashMe, яка змінює колір елемента. Ім'я елемента (параметр this) і колір передаються параметрами функції:

function flashMe(eSrc,sColor) {
eSrc.style.color = sColor;
idOneA.style.color = "black";
}

Звернемо увагу на оператор установки чорного кольору списку idOneA. Якщо його не буде, то при розкритті першого елемента зовнішнього списку колір елементів вкладеного списку idOneA буде таким же, як і колір елемента-батька - червоним (властивість color успадковується нащадками).

Тепер залишається додати оброблювач клацання кнопкою миші в перший елемент списку idList. Цей оброблювач відображатиме вкладений список idOneA, якщо він прихований, та приховуватиме idOneA, якщо він видимий:

ONCLICK = "toggleListOneA()"

Код функції toggieListoneA такий:

function toggleListOneA() {
eTgt = idOneA;
eTgt.style.display=="none"? eTgt.style.display="block": eTgt.style.display="none";
eTgt.display=="none"? eTgt.display="block":eTgt.display="none";
}

Тепер ми маємо всі функції, що реалізують саморозкривний список. Проте ми не врахували однієї обставини. Якщо користувач клацне на будь-якому з елементів списку, що розкрився, то список закриється. Згадаймо "підйом" події по ієрархії об'єктів. Хоча в елементі списку, що розкривається, нема обробника події ONCLICK, ця подія передається вгору по ієрархії. Тому процедура обробки події ONCLICK зовнішнього списку закриє внутрішній (встановить display=none). Щоб цього не відбувалося, потрібно в обробниках подій елементів внутрішнього списку скасувати передачу події на обробку вгору по ієрархії об'єктів:

ONCLICK = "window.event.cancelBubble = true"

Аналогічну техніку можна застосувати для динамічного відображення частин документа, зв'язавши відображення, наприклад, будь-якого абзацу, з розташуванням курсору миші на певному слові документа, а його приховування - з переміщенням курсору від цього слова. Подібні прийоми динамічного розкриття документа дозволяють на одному екрані представити коротку повну інформацію, а деталі показати у великих розкривних частинах документа.

Рухомий елемент

Положення абсолютно позиціонованої елемента на сторінці легко змінити, встановивши нові значення його властивостей top і left з вбудованого сценарію. Якщо організувати зміну значень цих властивостей у часі, то елемент буде рухатися на сторінці по заданій траєкторії. Подібна поведінка розділу (елемент <DIV>) реалізована у такому коді:

<head>
<script language="JavaScript">
var action, coef_px=-1, coef_pt=1, p_move=5;
function startMove() {
Banner.style.left = parseInt(document.body.offsetWidth)/3+200;
Banner.style.top = 0;
action = window.setInterval("move()",100);
}
function move() {
px = parseInt(Banner.style.left);
px = px + coef_px * p_move;
Banner.style.left = px;
if (px <= parseInt(document.body.offsetWidth)/3-200 ||
px >= parseInt(document.body.offsetWidth)/3+200) {
coef_px =-coef_px;
}
pt = parseInt(Banner.style.top);
pt = pt + coef_pt * p_move;
Banner.style.top = pt;
if (pt <= 0 || pt >= 200) { coef_pt =-coef_pt }
}
</script>
<style type="text/css">
H1{background-color:lightgrey; font-family:Arial; font-size:11pt;
color: indianred;}
</style>
</head>
<body onload="startMove()">
<h1> Приклад 7.3: Рухомий елемент </h1>
<p> DHTML дозволяє програмно змінювати положення елемента!</p>
<div id="Banner" style="position:absolute; width:200px;
background-color:lightsteelblue;">
Ласкаво просимо на сторінку динамічного HTML! </div>
</body>

Ефекти переміщення частин тексту або графічних зображень можна використовувати для привернення уваги читача до важливої інформації.

Пошук у документі

Якщо документ великий і містить різноманітну інформацію, можна надати читачеві можливість пошуку за заданими словами та автоматичного створення покажчиків на знайдені входження (або переходу до першого входження слова).

Наступний код демонструє техніку пошуку у документі та зміну вмісту документа. У текстовому полі користувач задає слово або фразу, яку необхідно знайти в документі. Результати пошуку відображаються на сторінці. Якщо знайдено відповідний вираз, то автоматично утворюється кнопка переходу на перше входження введеної в текстовому полі фрази.

<SCRIPT>
function findme(cValue) {
if (cValue == null || cValue =='') {
Alert("Задайте слова для пошуку"); return;
}
var rng = document.body.createTextRange();
for(i=0; rng.findText(cValue)!=false; i++){
rng.collapse(false);
}
spanFound.innerHTML="Знайдено <span style='font-weight:bold'>"
+i+"</span> входжень слова:";
if (i!=0) {
search.innerHTML = '<BUTTON' +
'Style = "width:100; text-align:center"' +
'Onclick = "findme(txtToFind.value)"> Пошук' +
'</BUTTON>' +
'<BUTTON Style="width:100; text-align:center"' +
'onclick="move(txtToFind.value)"> Перейти </BUTTON>'
}
}
function move(cValue) {
var rng = document.body.createTextRange();
if (rng.findText(cValue)==true) {
rng.select();
rng.scrollIntoView();
}
}
</SCRIPT>

<BODY>
<h1> Приклад 7.4: Пошук у документі </h1>
<div id="buttons">
<span id="spanFound"> Введіть слово для пошуку: </span>
<input id="txtToFind" value="" type="text">
<span id="search">
<button style="text-align:center;" onclick="findme(txtToFind.value)">
Пошук </button>
</span>
</div>
<div style="font-size: 14pt;"> Якщо документ великий і містить
різноманітну інформацію, можна надати читачеві можливість пошуку за
заданими словами та автоматичного створення покажчиків на знайдені
входження (або переходу до першого входження слова). Наступний код
демонструє техніку пошуку у документі та зміну вмісту документа. У
текстовому полі користувач задає слово або фразу, яку необхідно знайти
в документі. Результати пошуку відображаються на сторінці. Якщо
знайдено відповідний вираз, то автоматично утворюється кнопка переходу
на перше входження введеної в текстовому полі фрази.
</div>
</ BODY>

У цьому прикладі в розділі buttons задано елемент <SPAN> з ім'ям spanFound, в який виводиться інформація про кількість знайдених входжень фрагментів тексту, що задаються в текстовому полі txtToFind, а також кнопка Пошук для запуску процедури пошуку. Ця кнопка міститься в елементі <SPAN> з ім'ям search, до якого, у разі успішного пошуку, додається кнопка переходу до першого входження фрази.

При натисканні на кнопку Пошук викликається процедура findMe(cValue), параметром якої є введена користувачем у текстовому полі txtToFind фраза. У процедурі методом createTextRange об'єкта body створюється об'єкт TextRange, в якому зберігається текстовий вміст всієї сторінки.

Методом findText цього об'єкта у циклі визначається число входжень введеної фрази. Виклик методу collapse необхідний, щоб встановити початок наступного циклу пошуку в кінець попереднього знайденого входження.

Переустановлення значення властивості inner об'єкта spanFound призводить до зміни його вмісту. Тепер у ньому міститься текст, який відображає кількість знайдених входжень заданої фрази.

Якщо число входжень не нульове, то утворюється кнопка Перейти, при натисненні на яку відбувається перехід до першого входження в документі введеної користувачем фрази. Перехід здійснюється функцією move(cValue), яка шукає перше входження фрази, виділяє її (метод select об'єкта rng) і здійснює, у разі необхідності, прокрутку сторінки (метод scrollIntoView об'єкта rng) до знайденої фрази.