Лабораторная работа: Робота з випадаючими графічними меню

⚡ 👉🏻👉🏻👉🏻 ИНФОРМАЦИЯ ДОСТУПНА ЗДЕСЬ ЖМИТЕ 👈🏻👈🏻👈🏻

Тема: Робота з випадаючими графічними меню
Мета роботи: набути практичних навичок з програмування JavaScript , на прикладі створення меню
Будь який, навіть найпростіший Web-проект повинен містити навігаційний елемент, за допомогою якого і можна доступитись до всіх сторінок Web-сайту. На сторінках часто можна зустріти різни типи меню. Найбільш поширеними є меню з використанням JavaScript.
Наведемо приклад програми яка виводить горизонтальне меню вверху екрану. Пункти підменю випадають при наведенні курсора миші.
Виконує вираз після закінчення встановленої кількості мілісекунд.
timeoutID=setTimeout(expression, msec)
timeoutID ідентифікатор, який використовується тільки для закінчення виконання, використовуючи метод clearTimeout.
expression рядковий вираз або властивість існуючого об'єкту.
msec числове значення, числовий ряд або властивість існуючого об'єкту в мілісекундах.
Метод setTimeout виконує вираз після встановленої кількості часу. Він не виконує вираз багато разів. Наприклад, якщо метод setTimeout встановлений на 5 секунд, то вираз виконається через 5 секунд, але не кожні 5 секунд.
Функція eval виконує рядок-аргумент і підставляє отримане значення замість себе.
string будь-який рядок, що є JavaScript виразом, командою або послідовністю команд. Вираз може включати змінні і властивості існуючого об'єкту.
Функція eval є вбудованою функцією JavaScript. Вона не є методом, пов'язаним з будь-яким об'єктом, але є частиною самої мови. Аргументом функції eval є рядок. Не використовуйте eval для обчислень арифметичних виразів. JavaScript обчислює арифметичні вирази автоматично. Якщо аргумент є виразом, eval обчислює вираз. Якщо аргумент є одним або більш JavaScript команд, то eval виконує команди. Якщо ви побудували арифметичний вираз як рядок, ви можете використовувати eval для її обчислення.
Подія mouseOver відбувається кожного разу, коли курсор миші потрапляє на об'єкт. Обробник подій onMouseOver виконує програму JavaScript, коли відбувається подія mouseOver.
Ви повинні повертати true усередині обробника подій, якщо ви хочете використовувати властивості status або defaultStatus з обробником подій onMouseOver.
Синтаксис onMouseOver дивитеся в описі відповідних об'єктів.
Подія click відбувається при клацанні мишею на об'єкті форми. Обробник подій onClick виконує програму JavaScript, коли відбувається подія click.
button checkbox radio link reset submit
Масив об'єктів, що містить елементи форми (такі як об'єкти checkbox, radio і text) по порядку того, що зустрічається.
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:
Кожна кнопка radio в об'єкті radio представляється як окремий елемент в масиві elements.
Елементи в масиві elements були відкриті тільки для читання. Наприклад, вираз formName.elements[0]="music" не має ефекту.
Значення кожного елемента в масиві elements є повним HTML виразом для об'єкту.
· length відображає кількість елементів форми
Містить інформацію про поточний документ і забезпечений методами відображення HTML-документа.
Для визначення об'єкту document використовується стандартний HTML синтаксис

BACKGROUND визначає картинку, яка виконує роль фону документа.
BGCOLOR, TEXT, LINK, ALINK, VLINK визначає колір як шестирозрядне шістнадцяткове число (у форматі "rrggbb" або "#rrggbb") або як одна з рядкових назв в Color Value.
Використовування властивостей і методів об'єкту document:
propertyName одна з властивостей, описаних нижче. methodName один з методів, описаних нижче.
HTML документ складається з тагів и . містить інформацію про заголовок документа і підставу (абсолютний URL підстави, що використовується для відносних URL посилань в документі). Таг містить в собі тіло документа, який був визначений поточним URL. Все тіло документа (всі інші елементи HTML документа) знаходяться усередині тага.
Ви можете завантажити новий документ, використовуючи об'єкт location.
Ви можете посилатися на якорі, форми і посилання документа, використовуючи масиви anchors, forms і links
Ці масиви містять запис для кожного якоря, форми і посилання в документі.
· alinkColor відображає атрибут ALINK
· anchors масив, що відображає всі якорі в документі
· bgColor відображає атрибут BGCOLOR
· forms масив, що відображає всі форми в документі
· lastModified відображає дату останньої модифікації документа
· linkColor відображає атрибут LINK
· links масив, що відображає всі посилання в документі
· referrer відображає URL документа, з якого був викликаний поточний документ
· title відображає зміст тага
· URL відображає повний URL документа
· vlinkColor відображає атрибут VLINK
<SCRIPT LANGAUGE="JAVASCRIPT 1.3 TYPE="text/javascript">
if (document.all) var isDOM = true, docObj = 'document.all.', styObj = '.style';
else if (document.layers) var isNS4 = true, docObj = 'document.', styObj = '';
function popOver(menuNum, itemNum) {
litNow = getTree(menuNum, itemNum);
targetNum = menu[menuNum][itemNum].target;
targetName = menu[targetNum][0].id;
menuRef = eval(docObj + menuName + styObj);
if (isNS4) itemPath += menuName + '.document.';
itemRef = eval(itemPath + menuName + itemNum.toString() + styObj);
with (eval(docObj + targetName + styObj)) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
function popOut(menuNum, itemNum) {
Приховуємо меню на дві секунди, якщо інший mouseover не очистить timeout!
popTimer = setTimeout('hideAllBut(0)', 500);
function getTree(menuNum, itemNum) {
визначаємо довжину меню в кількості елементів
itemArray = new Array(menu.length);
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++) {
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;
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
eval(docObj + menu[count][0].id + styObj + '.visibility = "hidden"');
var endDL = isDOM ? '</div>' : '</layer>';
function Menu(id, x, y, width, overCol, backCol, borderCol) {
Головне меню та елементи. Індексація
function Item(text, href, height, target) {
function startDL(id, x, y, width, height, vis, back, border, zIndex, extraProps) {
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 = '<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 + '" ';
function mouseProps(currMenu, currItem) {
return 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')"';
function writeMenus(customRoot, popInd) {
for (currMenu = 0; currMenu < menu.length; currMenu++) {
if ((currMenu == 0) && customRoot) {
Початок генерації проміжків з позиції зміщення - без співвідношень кольорів та mouseovers
Ця позиція є завжди відносною до головного меню
menuHTML = startDL(id, x, y, 0, 0, 'hidden', null, null, 100, '');
var back = backCol, bord = borderCol, currWidth = width - 8;
Y-позиція наступного елементу збільшується
Запамятайте, елементи в масивах завжди починаються з 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 class="Item" href="' + href + '">' + text + '</a></td>' + '<td class="Item" align="right">' + (target ? popInd : '') + '</td></tr></table>' + endDL;
menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;
// Пересовуємо наступний елемент вниз, на висоту самого елемента
if (showMenu) document.write(menuHTML + endDL);
.Item { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }
<SCRIPT LANGAUGE="JAVASCRIPT 1.3 TYPE="text/javascript">
var defOver = '#336699', defBack = '#003366', defBorder = '#FFFFFF';
Встановлюємо початкову висоту елементу
Меню 0 є спеціальним головним меню звідки все інше появляється
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][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][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][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][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][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[5][5] = new Item('Тулуза', '#', defHeight, 0);
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][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);
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 class="Item"> Україна </span>' + endDL;
newRoot += startDL('rootMenu2', 75, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 2));
newRoot += '<span class="Item"> Росія </span>' + endDL;
newRoot += startDL('rootMenu3', 125, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 3));
newRoot += '<span class="Item"> США </span>' + endDL;
newRoot += startDL('rootMenu4', 175, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 4));
newRoot += '<span class="Item"> Австралія </span>' + endDL;
newRoot += startDL('rootMenu5', 255, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 5));
newRoot += '<span class="Item"> Франція </span>' + endDL;
newRoot += startDL('rootMenu6', 325, 0, 40, 17, 'inherit', '#006666', null, 100, mouseProps(0, 6));
newRoot += '<span class="Item"> Італія </span>' + endDL;
eval(docObj + menu[0][0].id + styObj + '.visibility = "visible"');

Название: Робота з випадаючими графічними меню
Раздел: Рефераты по информатике, программированию
Тип: лабораторная работа
Добавлен 01:09:30 20 марта 2011 Похожие работы
Просмотров: 22
Комментариев: 15
Оценило: 2 человек
Средний балл: 5
Оценка: неизвестно   Скачать

Срочная помощь учащимся в написании различных работ. Бесплатные корректировки! Круглосуточная поддержка! Узнай стоимость твоей работы на сайте 64362.ru
Привет студентам) если возникают трудности с любой работой (от реферата и контрольных до диплома), можете обратиться на FAST-REFERAT.RU , я там обычно заказываю, все качественно и в срок) в любом случае попробуйте, за спрос денег не берут)
Да, но только в случае крайней необходимости.

<strong>Лабораторная работа: Робота з випадаючими графічними меню</strong>
Реферат по теме СНІД: шляхи зараження, розвиток, профілактика
Реферат: Вентиляция: виды и назначение
Курсовая работа по теме Анализ закупок сельскохозяйственной продукции и сырья
Развитие Основных Физических Качеств Реферат
Реферат по теме Окклюзия магистральных артерий
Республиканские Контрольные Работы 2022 2022 В Беларуси
Курсовая работа: Аудиторская выборка
Мир Человека И Предметности Культуры Реферат
Методичка На Тему Основные Понятия Статистики
Дипломная работа: Спортивно-оздоровительное плавание
Курсовая работа: Организация регистрации предприятий
Сочинение по теме Дворянское общество в романе «Война и мир»
Темы Рефератов По Социальной Психологии
Сочинение С Личным Откликами Воспоминанием Свидетелей
Курсовая работа по теме Безработица. Проблемы безработицы в Восточной Европе
Реферат по теме Роль банковского кредита в условиях рыночной экономики
Курсовая работа по теме Разговорный язык
Сочинение По Произведению Пикник На Обочине
Компьютерные Развивающие Игры Реферат
Контрольная работа по теме Общая характеристика химического состава масличных семян
<a href="https://telegra.ph/">Курсовая работа: Учет расходов на оплату труда и их роль в себестоимости продукции</a>
<a href="https://telegra.ph/Referat-Tataro-mongolskoe-nashestie-i-ego-posledstviya-dlya-russkih-zemel-09-24">Реферат: Татаро-монгольское нашестие и его последствия для русских земель</a>
<a href="https://telegra.ph/Doklad-Cactus-09-23">Доклад: Cactus</a>