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

Програмування JavaScript на прикладі створення меню. Обробник подій onMouseOver. Використовування властивостей і методів об'єкту document. Масив та прапорці (bolean) для визначення зміни кольору. Робота з властивостями та індивідуальними елементами меню.

Рубрика Программирование, компьютеры и кибернетика
Вид лабораторная работа
Язык украинский
Дата добавления 20.03.2011
Размер файла 18,1 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru/

Лабораторна робота 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

· cookie визначає "ключик"

· 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();

Робота з властивостями та індивідуальними елементами меню

with (menu[currMenu][currItem]) {

Починаємо елемент меню зпозиційований вертикально, з подією миші та кольору

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;

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[5][5] = 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 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;

newRoot += endDL;

writeMenus(newRoot, '>');

eval(docObj + menu[0][0].id + styObj + '.visibility = "visible"');

// End -->

</script>

<p align="center"> </p>

</body>

</html>

Размещено на Allbest.ru


Подобные документы

  • Програма на мові програмування С++. Аналіз стану технологій програмування та обґрунтування теми. Розробка програми виконання завдання, методу вирішення задачі. Робота з файлами, обробка числової інформації і робота з графікою. Розробка програми меню.

    курсовая работа [41,0 K], добавлен 17.02.2009

  • Розробка візуальної програми, яка містить головне меню та забезпечує введення-виведення даних у діалоговому вікні. Створення панелі інструментів, рядку стану. Реалізація функції мовою Assembler. Створення та підключення бібліотеки Dll. Робота з файлами.

    курсовая работа [370,9 K], добавлен 01.04.2016

  • Отличие между обычным и системным меню: сообщения в оконной процедуре. Основные параметры сообщений, характеристики подсвеченного элемента меню. Способ размещения меню по горизонтали и вертикали. Способ выбора строк меню без указания окна-владельца.

    контрольная работа [65,8 K], добавлен 03.10.2010

  • Внешний вид и возможности меню Пуск - главного меню Windows XP. Содержание меню "Документы", "Избранное", "Справка", "Поиск", "Выполнить", "Завершение сеанса". Назначение папки "Автозагрузка". Создание ярлыков на рабочем столе для используемых программ.

    реферат [12,1 K], добавлен 23.07.2009

  • Розробка програми на мові програмування С++ з використанням об'єктно-орієнтованого програмування. Робота з файлами, графікою, класами, обробка числової інформації. Графічні засоби мови програмування. Алгоритм задачі та допоміжні програмні засоби.

    курсовая работа [102,5 K], добавлен 14.03.2013

  • Загальні відомості про мову програмування, історія створення та використовування. Програма мовою Паскаль складається з лексем і символів – розділювачів. Робота з масивами, створення алгортимів. Складання програм з використанням процедур та функцій.

    реферат [18,3 K], добавлен 22.10.2010

  • Середовище програмування Visual Studio 2010. Функції стандартного введення-виведення. Робота з побітовими операціями. Робота з функцією заміни у рядку символів. Робота з масивами. Тестування алгоритму роботи програми. Представлення двовимірного масиву.

    курсовая работа [652,2 K], добавлен 15.01.2014

  • Задачи, выполняемые главным меню оперативной системы. Разделы меню "пуск". Запуск программ компьютера. Использование поля поиска. Ссылки правой панели на часто используемые компоненты. Кнопка "Завершение работы". Настройка отображения элементов на панели.

    презентация [1,2 M], добавлен 21.03.2015

  • Окна Турбо отладчика, меню View, Module, Wathes, Breakpoints, Stack, Log. Окно сообщений Windows (Windows Messages). Подготовка программ Турбо Ассемблера. Команды, доступные из основного меню. Меню Ё (системное меню). Параметры командной строки.

    доклад [21,7 K], добавлен 22.09.2008

  • Концепції об'єктно-орієнтованого програмування. Методи створення класів. Доступ до методів базового класу. Структура даних, функції. Розробка додатку на основі діалогових вікон, програми меню. Засоби розробки програмного забезпечення мовами Java та С++.

    курсовая работа [502,5 K], добавлен 01.04.2016

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.