Робота з випадаючими графічними меню
Лабораторна
робота 8-9
Тема: Робота з випадаючими графічними
меню
Мета роботи: набути практичних навичок з
програмування JavaScript , на прикладі створення меню
Теоретичні
відомості
Будь який, навіть
найпростіший Web-проект повинен містити навігаційний елемент, за допомогою
якого і можна доступитись до всіх сторінок Web-сайту. На сторінках часто можна
зустріти різни типи меню. Найбільш поширеними є меню з використанням
JavaScript.
Наведемо приклад
програми яка виводить горизонтальне меню вверху екрану. Пункти підменю
випадають при наведенні курсора миші.
Метод setTimeout
Виконує вираз
після закінчення встановленої кількості мілісекунд.
Синтаксис
timeoutID=setTimeout(expression, msec)
timeoutID ідентифікатор, який
використовується тільки для закінчення виконання, використовуючи метод
clearTimeout.
expression рядковий вираз або
властивість існуючого об'єкту.
msec числове значення, числовий
ряд або властивість існуючого об'єкту в мілісекундах.
Опис
Метод setTimeout
виконує вираз після встановленої кількості часу. Він не виконує вираз багато
разів. Наприклад, якщо метод setTimeout встановлений на 5 секунд, то вираз
виконається через 5 секунд, але не кожні 5 секунд.
Функція eval
Функція eval
виконує рядок-аргумент і підставляє отримане значення замість себе.
Синтаксис
eval("string")
string будь-який рядок, що є
JavaScript виразом, командою або послідовністю команд. Вираз може включати
змінні і властивості існуючого об'єкту.
Опис
Функція eval є
вбудованою функцією JavaScript. Вона не є методом, пов'язаним з будь-яким
об'єктом, але є частиною самої мови.
Аргументом функції eval є рядок. Не використовуйте eval для обчислень
арифметичних виразів. JavaScript обчислює арифметичні вирази автоматично. Якщо
аргумент є виразом, eval обчислює вираз. Якщо аргумент є одним або більш
JavaScript команд, то eval виконує команди.
Якщо ви побудували арифметичний вираз як рядок, ви можете використовувати eval
для її обчислення.
Обробник подій
onMouseOver
Подія mouseOver
відбувається кожного разу, коли курсор миші потрапляє на об'єкт. Обробник подій
onMouseOver виконує програму JavaScript, коли відбувається подія mouseOver.
Ви повинні
повертати true усередині обробника подій, якщо ви хочете використовувати
властивості status або defaultStatus з обробником подій onMouseOver.
Синтаксис
onMouseOver дивитеся в описі відповідних об'єктів.
Обробник подій
onClick
Подія click
відбувається при клацанні мишею на об'єкті форми. Обробник подій onClick
виконує програму JavaScript, коли відбувається подія click.
Обробник подій:
button checkbox radio link reset submit
Масив elements
Масив об'єктів,
що містить елементи форми (такі як об'єкти checkbox, radio і text) по порядку
того, що зустрічається.
Синтаксис
1.
formName.elements[index]
2.
formName.elements.length
formName будь-яке ім'я форми або
елемента в масиві forms.
index ціле число, що представляє об'єкт у формі.
Опис
Ви можете
посилатися на елементи форми у вашій програмі, використовуючи масив elements.
Цей масив містить запис для кожного об'єкту (button, checkbox, password, radio,
select, submit, text, textarea) у формі по порядку того, що зустрічається.
Наприклад, якщо форма містить поле text і два елементи checkbox, то ці елементи
виглядають так formNameelements, formNameelements, formNameelements.
Хоча ви можете
також посилатися на елементи форми, використовуючи ім'я елемента (з атрибута
NAME), масив elements дозволяє посилатися на об'єкти форми без використовування
їх імен. Наприклад, якщо перший об'єкт у формі userInfo є об'єктом text
userName, ви можете отримати його значення будь-яким з наступних способів:
userInfo.userName.value
userInfo.userName[0].value
Для отримання
кількості елементів форми, використовується властивість length:
formName.elements.length
Кожна кнопка
radio в об'єкті radio представляється як окремий елемент в масиві elements.
Елементи в масиві
elements були відкриті тільки для читання. Наприклад, вираз
formName.elements[0]="music" не має ефекту.
Значення кожного
елемента в масиві elements є повним HTML виразом для об'єкту.
Властивості:
·
length
відображає кількість елементів форми
Об'єкт
document
Змінений в
Navigator 3.0.
Містить
інформацію про поточний документ і забезпечений методами відображення
HTML-документа.
Синтаксис:
Для визначення
об'єкту document використовується стандартний HTML синтаксис
кольор створення меню елемент
<BODY
BACKGROUND="backgroundImage" BGCOLOR="backgroundColor"
TEXT="foregroundColor" LINK="unfollowedLinkColor"
ALINK="activatedLinkColor" VLINK="followedLinkColor"
[onLoad="handlerText"] [onUnload="handlerText"]>
</BODY>
BACKGROUND
визначає картинку, яка виконує роль фону документа.
BGCOLOR, TEXT,
LINK, ALINK, VLINK визначає колір як шестирозрядне шістнадцяткове число (у
форматі "rrggbb" або "#rrggbb") або як одна з рядкових назв
в Color Value.
Використовування
властивостей і методів об'єкту document:
1.
document.propertyName
2.
document.methodName(parameters)
propertyName одна з властивостей,
описаних нижче.
methodName один з методів, описаних нижче.
Опис
HTML документ
складається з тагів <HEAD>и <BODY>. <HEAD> містить інформацію
про заголовок документа і підставу (абсолютний URL підстави, що
використовується для відносних URL посилань в документі). Таг <BODY>
містить в собі тіло документа, який був визначений поточним URL. Все тіло
документа (всі інші елементи HTML документа) знаходяться усередині
тага<BODY>.
Ви можете
завантажити новий документ, використовуючи об'єкт location.
Ви можете
посилатися на якорі, форми і посилання документа, використовуючи масиви anchors,
forms і links
Ці масиви містять
запис для кожного якоря, форми і посилання в документі.
Властивості:
·
alinkColor
відображає атрибут ALINK
·
anchors
масив, що відображає всі якорі в документі
·
bgColor
відображає атрибут BGCOLOR
·
fgColor
відображає атрибут TEXT
·
forms
масив, що відображає всі форми в документі
·
lastModified
відображає дату останньої модифікації документа
·
linkColor
відображає атрибут LINK
·
links
масив, що відображає всі посилання в документі
·
referrer
відображає URL документа, з якого був викликаний поточний документ
·
title
відображає зміст тага <TITLE>
·
URL
відображає повний URL документа
·
vlinkColor
відображає атрибут VLINK
Текст програми
<html>
<head>
<SCRIPT
LANGAUGE="JAVASCRIPT 1.3 TYPE="text/javascript">
<!-- Begin
var isDOM =
false, isNS4 = false;
if (document.all)
var isDOM = true, docObj = 'document.all.', styObj = '.style';
else if
(document.layers) var isNS4 = true, docObj = 'document.', styObj = '';
var popTimer = 0;
var litNow = new
Array();
function
popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow =
getTree(menuNum, itemNum);
changeCol(litNow,
true);
targetNum =
menu[menuNum][itemNum].target;
if (targetNum
> 0) {
targetName =
menu[targetNum][0].id;
menuName =
menu[menuNum][0].id;
menuRef =
eval(docObj + menuName + styObj);
thisX =
parseInt(menuRef.left);
thisY =
parseInt(menuRef.top);
Визначаємо
позиції меню X, Y
itemPath =
docObj;
if (isNS4)
itemPath += menuName + '.document.';
itemRef =
eval(itemPath + menuName + itemNum.toString() + styObj);
thisX +=
parseInt(itemRef.left);
thisY +=
parseInt(itemRef.top);
Визначаємо
позиції зліва і зверху
with (eval(docObj
+ targetName + styObj)) {
left =
parseInt(thisX + menu[targetNum][0].x);
top =
parseInt(thisY + menu[targetNum][0].y);
visibility =
'visible';
}
}
}
function
popOut(menuNum, itemNum) {
Приховуємо меню
на дві секунди, якщо інший mouseover не очистить timeout!
popTimer =
setTimeout('hideAllBut(0)', 500);
}
function
getTree(menuNum, itemNum) {
Провіряємо чи
меню не є пустим
визначаємо
довжину меню в кількості елементів
itemArray = new
Array(menu.length);
while(1) {
itemArray[menuNum]
= itemNum;
if (menuNum == 0)
return itemArray;
itemNum =
menu[menuNum][0].parentItem;
menuNum =
menu[menuNum][0].parentMenu;
}
}
Розглядаємо масив
та прапорці (bolean) для визначення зміни кольору
function
changeCol(changeArray, isOver) {
for (menuCount =
0; menuCount < changeArray.length; menuCount++) {
if
(changeArray[menuCount]) {
thisMenu =
menu[menuCount][0].id;
thisItem =
thisMenu + changeArray[menuCount].toString();
newCol = isOver ?
menu[menuCount][0].overCol : menu[menuCount][0].backCol;
if (isDOM)
document.all[thisItem].style.backgroundColor = newCol;
if (isNS4)
document[thisMenu].document[thisItem].bgColor = newCol;
}
}
function
hideAllBut(menuNum) {
var keepMenus =
getTree(menuNum, 1);
for (count = 0;
count < menu.length; count++)
if
(!keepMenus[count])
eval(docObj +
menu[count][0].id + styObj + '.visibility = "hidden"');
changeCol(litNow,
false);
}
*** Функція
утворення меню ***
var endDL = isDOM
? '</div>' : '</layer>';
function Menu(id,
x, y, width, overCol, backCol, borderCol) {
this.id = id;
this.x = x;
this.y = y;
this.width =
width;
Кольора меню і
елементів
this.overCol =
overCol;
this.backCol =
backCol;
this.borderCol =
borderCol;
Головне меню та
елементи. Індексація
this.parentMenu =
null;
this.parentItem =
null;
}
function
Item(text, href, height, target) {
this.text = text;
this.href = href;
this.height =
height;
this.target =
target;
}
function
startDL(id, x, y, width, height, vis, back, border, zIndex, extraProps) {
if (isDOM) {
str = '<div
id="' + id + '" style="position: absolute; left: ' + x + '; top:
' + y +
'; width: ' +
width + '; height: ' + height + '; visibility: ' + vis + '; ';
if (back) str +=
'background: ' + back + '; ';
if (border) str
+= 'padding: 3px; border: 1px solid ' + border + '; ';
if (zIndex) str
+= 'z-index: ' + zIndex + '; ';
// Завершення
декларації стилів
str += '" ';
}
if (isNS4) {
str = '<layer
id="' + id + '" left="' + x + '" top="' + y + '"
width="' + width +
'"
height="' + height + '" visibility="' + vis + '" ';
if (back) str +=
'bgcolor="' + back + '" ';
if (border) str
+= 'style="border: 1px solid ' + border + '" ';
if (zIndex) str
+= 'z-index="' + zIndex + '" ';
}
return str +
extraProps + '>';
}
function
mouseProps(currMenu, currItem) {
return
'onMouseOver="popOver(' + currMenu + ',' + currItem + ')"
onMouseOut="popOut(' + currMenu + ',' + currItem + ')"';
}
function
writeMenus(customRoot, popInd) {
for (currMenu =
0; currMenu < menu.length; currMenu++) {
showMenu = true;
if ((currMenu ==
0) && customRoot) {
document.write(customRoot);
showMenu = false;
}
with
(menu[currMenu][0]) {
Початок генерації
проміжків з позиції зміщення - без співвідношень кольорів та mouseovers
Ця позиція є
завжди відносною до головного меню
menuHTML =
startDL(id, x, y, 0, 0, 'hidden', null, null, 100, '');
var back =
backCol, bord = borderCol, currWidth = width - 8;
}
Y-позиція
наступного елементу збільшується
itemPos = 0;
Запамятайте,
елементи в масивах завжди починаються з 1(нуль-обєкт меню, який вказує сам на
себе)
for (currItem =
1; currItem < menu[currMenu].length; currItem++) {
trigID =
menu[currMenu][0].id + currItem.toString();
Робота з
властивостями та індивідуальними елементами меню
Починаємо елемент
меню зпозиційований вертикально, з подією миші та кольору
menuHTML +=
startDL(trigID, 0, itemPos, 0, 0, 'inherit', back, bord, 100,
mouseProps(currMenu, currItem)) + '<table width="' + currWidth +
'" border="0" cellspacing="0"
cellpadding="0"><tr>' + '<td align="left"><a>
if (target >
0) {
menu[target][0].parentMenu
= currMenu;
menu[target][0].parentItem
= currItem;
}
// Пересовуємо
наступний елемент вниз, на висоту самого елемента
itemPos +=
height;
}
}
Вивід меню
if (showMenu)
document.write(menuHTML + endDL);
litNow[currMenu]
= null;
}
}
// End -->
</script>
<style>
<!--
.Item {
text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }
-->
</style>
<title></title>
</head>
<body>
<SCRIPT
LANGAUGE="JAVASCRIPT 1.3 TYPE="text/javascript">
var menu = new
Array();
Встановлення
початкових кольорів
var defOver =
'#336699', defBack = '#003366', defBorder = '#FFFFFF';
Встановлюємо
початкову висоту елементу
var defHeight =
18;
Меню 0 є
спеціальним головним меню звідки все інше появляється
menu[0] = new
Array();
menu[0][0] = new
Menu('rootMenu', 0, 0, 80, '#669999', '#006666', defBorder);
menu[0][1] = new
Item('меню1', '#', defHeight, 1);
menu[0][2] = new
Item('меню2', '#', defHeight, 2);
menu[0][3] = new
Item('меню3', '#', defHeight, 3);
menu[0][4] = new
Item('меню4', '#', defHeight, 4);
menu[0][5] = new
Item('меню5', '#', defHeight, 5);
menu[0][6] = new
Item('меню6', '#', defHeight, 6);
menu[0][7] = new
Item('меню7', '#', defHeight, 7);
menu[1] = new
Array();
menu[1][0] = new
Menu('УкраїнаMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[1][1] = new
Item('Київ', 'http://kyiv.com.ua', defHeight, 0);
// Не нольовий
target Означає що потрібно перейти на суб-меню.
menu[1][2] = new
Item('Львів', 'http://lviv.com.ua', defHeight, 7);
menu[1][3] = new
Item('Харків', 'http://lviv.com.ua', defHeight, 0);
menu[1][4] = new
Item('Донецьк', 'http://lviv.com.ua', defHeight, 0);
menu[1][5] = new
Item('Одеса', 'http://Odessa.com.ua', defHeight, 0);
menu[1][6] = new
Item('Вінниця','http://lviv.com.ua', defHeight, 0);
menu[2] = new
Array();
menu[2][0] = new
Menu('РосіяMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[2][1] = new Item('Москва',
'#', defHeight, 0);
menu[2][2] = new
Item('СанктПетербург', '#', defHeight, 0);
menu[2][3] = new
Item('Воронеж', '#', defHeight, 0);
menu[3] = new
Array();
menu[3][0] = new
Menu('США', 0, 22, 100, defOver, defBack, defBorder);
menu[3][1] = new
Item('Нью Йорк', '#', defHeight, 0);
menu[3][2] = new
Item('Чікаго', '#', defHeight, 0);
menu[3][3] = new
Item('Каліфорнія', '#', defHeight, 0);
menu[4] = new
Array();
menu[4][0] = new
Menu('АвстраліяMenu', 0, defHeight, 100, defOver, defBack, defBorder);
menu[4][1] = new
Item('Сідней', '#', defHeight, 0);
menu[4][2] = new
Item('Канберра', '#', defHeight, 0);
menu[5] = new
Array();
menu[5][0] = new
Menu('ФранціяMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[5][1] = new
Item('Париж', '#', defHeight, 0);
menu[5][2] = new
Item('Марсель', '#', defHeight, 0);
menu[5][3] = new
Item('Монако', '#', defHeight, 0);
menu[5][4] = new
Item('Бордо', '#', defHeight, 0);
menu[6] = new
Array();
menu[6][0] = new
Menu('ІталіяMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[6][1] = new
Item('Рим', '#', defHeight, 0);
menu[6][2] = new
Item('Флоренція', '#', defHeight, 0);
menu[6][3] = new
Item('Венеція', '#', defHeight, 0);
menu[6][4] = new
Item('Неаполь', '#', defHeight, 0);
menu[6][5] = new
Item('Мілан', '#', defHeight, 0);
menu[7] = new
Array();
menu[7][0] = new
Menu('reopenMenu', 75, 0, 100, defOver, defBack, defBorder);
menu[7][1] = new
Item('Левандівка', '#', defHeight, 0);
menu[7][2] = new
Item('Сихів', '#', defHeight, 0);
menu[7][3] = new
Item('Центр', '#', defHeight, 0);
Головне
горизонтальне меню
Повинно
закінчуватись на endDL
newRoot =
startDL('rootMenu', 0, 50, '100%', 17, 'hidden', '#006666', null, 100, '');
newRoot +=
startDL('rootMenu1', 5, 0, 60, 17, 'inherit', '#006666', null, 100,
mouseProps(0, 1));
newRoot +=
'<span>
newRoot +=
startDL('rootMenu2', 75, 0, 40, 17, 'inherit', '#006666', null, 100,
mouseProps(0, 2));
newRoot +=
'<span>
newRoot +=
startDL('rootMenu3', 125, 0, 40, 17, 'inherit', '#006666', null, 100,
mouseProps(0, 3));
newRoot +=
'<span>
newRoot +=
startDL('rootMenu4', 175, 0, 40, 17, 'inherit', '#006666', null, 100,
mouseProps(0, 4));
newRoot +=
'<span>
newRoot +=
startDL('rootMenu5', 255, 0, 40, 17, 'inherit', '#006666', null, 100,
mouseProps(0, 5));
newRoot +=
'<span>
newRoot +=
startDL('rootMenu6', 325, 0, 40, 17, 'inherit', '#006666', null, 100,
mouseProps(0, 6));
newRoot +=
'<span>
newRoot += endDL;
writeMenus(newRoot,
'>');
eval(docObj +
menu[0][0].id + styObj + '.visibility = "visible"');
// End -->
</script>
<p
align="center"> </p>
</body>
</html>
Размещено на