Лабораторнаробота 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 radiolink 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 є об'єктом textuserName, ви можете отримати його значення будь-яким з наступних способів:
userInfo.userName.valueuserInfo.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 синтаксис
кольор створення меню елемент
BACKGROUNDвизначає картинку, яка виконує роль фону документа.
BGCOLOR, TEXT,LINK, ALINK, VLINK визначає колір як шестирозрядне шістнадцяткове число (уформаті «rrggbb» або "#rrggbb") або як одна з рядкових назвв Color Value.
Використовуваннявластивостей і методів об'єкту document:
1. document.propertyName
2. document.methodName(parameters)
propertyName одна з властивостей,описаних нижче.
methodName один з методів, описаних нижче.
Опис
HTML документскладається з тагів и . містить інформаціюпро заголовок документа і підставу (абсолютний URL підстави, щовикористовується для відносних URL посилань в документі). Таг містить в собі тіло документа, який був визначений поточним URL. Все тілодокумента (всі інші елементи HTML документа) знаходяться усерединітага.
Ви можетезавантажити новий документ, використовуючи об'єкт location.
Ви можетепосилатися на якорі, форми і посилання документа, використовуючи масиви anchors,forms і links
Ці масиви містятьзапис для кожного якоря, форми і посилання в документі.
Властивості:
· alinkColorвідображає атрибут ALINK
· anchorsмасив, що відображає всі якорі в документі
· bgColorвідображає атрибут BGCOLOR
· cookieвизначає «ключик»
· fgColorвідображає атрибут TEXT
· formsмасив, що відображає всі форми в документі
· lastModifiedвідображає дату останньої модифікації документа
· linkColorвідображає атрибут LINK
· linksмасив, що відображає всі посилання в документі
· referrerвідображає URL документа, з якого був викликаний поточний документ
· titleвідображає зміст тага
· URLвідображає повний URL документа
· vlinkColorвідображає атрибут VLINK
Текст програми
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 = newArray();
functionpopOver(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';
}
}
}
functionpopOut(menuNum, itemNum) {
Приховуємо менюна дві секунди, якщо інший mouseover не очистить timeout!
popTimer =setTimeout('hideAllBut(0)', 500);
}
functiongetTree(menuNum, itemNum) {
Провіряємо чименю не є пустим
визначаємодовжину меню в кількості елементів
itemArray = newArray(menu.length);
while(1) {
itemArray[menuNum]= itemNum;
if (menuNum == 0)return itemArray;
itemNum =menu[menuNum][0].parentItem;
menuNum =menu[menuNum][0].parentMenu;
}
}
Розглядаємо масивта прапорці (bolean) для визначення зміни кольору
functionchangeCol(changeArray, isOver) {
for (menuCount =0; 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;
}
}
}
functionhideAllBut(menuNum) {
var keepMenus =getTree(menuNum, 1);
for (count = 0;count
if(!keepMenus[count])
eval(docObj +menu[count][0].id + styObj + '.visibility = «hidden»');
changeCol(litNow,false);
}
*** Функціяутворення меню ***
var endDL = isDOM? '': '';
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;
}
functionItem(text, href, height, target) {
this.text = text;
this.href = href;
this.height =height;
this.target =target;
}
functionstartDL(id, x, y, width, height, vis, back, border, zIndex, extraProps) {
if (isDOM) {
str = '
'; 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 = '
'"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 + '>';
}
functionmouseProps(currMenu, currItem) {
return 'onMouseOver=«popOver('+ currMenu + ',' + currItem + ')» onMouseOut=«popOut(' + currMenu +',' + currItem + ')»';
}
functionwriteMenus(customRoot, popInd) {
for (currMenu =0; 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
trigID =menu[currMenu][0].id + currItem.toString();
Робота звластивостями та індивідуальними елементами меню
with(menu[currMenu][currItem]) {
Починаємо елементменю зпозиційований вертикально, з подією миші та кольору
menuHTML +=startDL(trigID, 0, itemPos, 0, 0, 'inherit', back, bord, 100,mouseProps(currMenu, currItem)) + '' + '' + text + '' + '' + (target? popInd: '') +'' + endDL;
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 -->
.Item {text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }
-->
var menu = newArray();
Встановленняпочаткових кольорів
var defOver ='#336699', defBack = '#003366', defBorder = '#FFFFFF';
Встановлюємопочаткову висоту елементу
var defHeight =18;
Меню 0 єспеціальним головним меню звідки все інше появляється
menu[0] = newArray();
menu[0][0] = newMenu('rootMenu', 0, 0, 80, '#669999', '#006666', defBorder);
menu[0][1] = newItem('меню1', '#', defHeight, 1);
menu[0][2] = newItem('меню2', '#', defHeight, 2);
menu[0][3] = newItem('меню3', '#', defHeight, 3);
menu[0][4] = newItem('меню4', '#', defHeight, 4);
menu[0][5] = newItem('меню5', '#', defHeight, 5);
menu[0][6] = newItem('меню6', '#', defHeight, 6);
menu[0][7] = newItem('меню7', '#', defHeight, 7);
menu[1] = newArray();
menu[1][0] = newMenu('УкраїнаMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[1][1] = newItem('Київ', 'http://kyiv.com.ua', defHeight, 0);
// Не нольовийtarget Означає що потрібно перейти на суб-меню.
menu[1][2] = newItem('Львів', 'http://lviv.com.ua', defHeight, 7);
menu[1][3] = newItem('Харків', 'http://lviv.com.ua', defHeight, 0);
menu[1][4] = newItem('Донецьк', 'http://lviv.com.ua', defHeight, 0);
menu[1][5] = newItem('Одеса', 'http://Odessa.com.ua', defHeight, 0);
menu[1][6] = newItem('Вінниця','http://lviv.com.ua', defHeight, 0);
menu[2] = newArray();
menu[2][0] = newMenu('РосіяMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[2][1] = newItem('Москва', '#', defHeight, 0);
menu[2][2] = newItem('СанктПетербург', '#', defHeight, 0);
menu[2][3] = newItem('Воронеж', '#', defHeight, 0);
menu[3] = newArray();
menu[3][0] = newMenu('США', 0, 22, 100, defOver, defBack, defBorder);
menu[3][1] = newItem('Нью Йорк', '#', defHeight, 0);
menu[3][2] = newItem('Чікаго', '#', defHeight, 0);
menu[3][3] = newItem('Каліфорнія', '#', defHeight, 0);
menu[4] = newArray();
menu[4][0] = newMenu('АвстраліяMenu', 0, defHeight, 100, defOver, defBack, defBorder);
menu[4][1] = newItem('Сідней', '#', defHeight, 0);
menu[4][2] = newItem('Канберра', '#', defHeight, 0);
menu[5] = newArray();
menu[5][0] = newMenu('ФранціяMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[5][1] = newItem('Париж', '#', defHeight, 0);
menu[5][2] = newItem('Марсель', '#', defHeight, 0);
menu[5][3] = newItem('Монако', '#', defHeight, 0);
menu[5][4] = newItem('Бордо', '#', defHeight, 0);
menu[5][5] = newItem('Тулуза', '#', defHeight, 0);
menu[6] = newArray();
menu[6][0] = newMenu('ІталіяMenu', 0, 22, 100, defOver, defBack, defBorder);
menu[6][1] = newItem('Рим', '#', defHeight, 0);
menu[6][2] = newItem('Флоренція', '#', defHeight, 0);
menu[6][3] = newItem('Венеція', '#', defHeight, 0);
menu[6][4] = newItem('Неаполь', '#', defHeight, 0);
menu[6][5] = newItem('Мілан', '#', defHeight, 0);
menu[7] = newArray();
menu[7][0] = newMenu('reopenMenu', 75, 0, 100, defOver, defBack, defBorder);
menu[7][1] = newItem('Левандівка', '#', defHeight, 0);
menu[7][2] = newItem('Сихів', '#', defHeight, 0);
menu[7][3] = newItem('Центр', '#', 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 +=' Україна ' + endDL;
newRoot +=startDL('rootMenu2', 75, 0, 40, 17, 'inherit', '#006666', null, 100,mouseProps(0, 2));
newRoot +=' Росія ' + endDL;
newRoot +=startDL('rootMenu3', 125, 0, 40, 17, 'inherit', '#006666', null, 100,mouseProps(0, 3));
newRoot +=' США ' + endDL;
newRoot +=startDL('rootMenu4', 175, 0, 40, 17, 'inherit', '#006666', null, 100,mouseProps(0, 4));
newRoot +=' Австралія ' + endDL;
newRoot +=startDL('rootMenu5', 255, 0, 40, 17, 'inherit', '#006666', null, 100,mouseProps(0, 5));
newRoot +=' Франція ' + endDL;
newRoot +=startDL('rootMenu6', 325, 0, 40, 17, 'inherit', '#006666', null, 100,mouseProps(0, 6));
newRoot +=' Італія ' + endDL;
newRoot += endDL;
writeMenus(newRoot,'>');
eval(docObj +menu[0][0].id + styObj + '.visibility = «visible»');
// End -->