Уроки Web-программирования: «Java Script(JS): Делаем меню». |
Автор megabax | |||||||
29.08.2010 г. | |||||||
Уроки Web-программирования: «Java Script(JS): Делаем меню».
Сегодня мы научимся делать меню. Для начала сделаем меню простенькое, в левой части страницы у нас будут располагаться пункты меню, а в правой текст, связанный с этим пунктом меню. И так, вот текст программы:
Если мы откроем это файл и щелкнем мышкой по пункту меню, то у нас отобразиться справа связанный с ним текст:
Теперь разберемся с самой программой. Начнем с функции on_load
Эта функция создаем у нас массив текстов, связанных с меню. Массив мы создаем командой
texts=new Array;
а добавляем новый элементы
texts.push('<font size=5 color=red>Здесь будет главная страница</font>');
собственно выводит текст у нас функция on_div_click(id)
Она находит в документе нужный элемент по его идентификатору
obj=document.getElementById("br")
и вставляет в него текст из массива
obj.innerHTML=texts[id];
где соответствующий элемент находит по номеру (id), который передается в функцию как параметр.
Переходим к телу HTML файла.
атрибут onload="on_load()" показывает, что при загрузке страницы нам нужно выполнить функцию on_load().
Далее, при помощи тэга Div мы создаем пункты меню:
обратите внимание на ссылку javascript:on_div_click(0) - она показывается, что при кликании на ссылке нужно запустить Java Script функцию on_div_click(0). В скобках у нас задан параметр id - номер элемента в массиве текстов. Счет, как вы поняли, начинается с нуля.
Ну, а теперь, тэг
вы, наконец то изучили назначение загадочного атрибута id в тэгах - в них задается идентификатор, по которому созданный данным тэгом элемент можно найти в программе на JS, что бы потом что то сделать с ним - например, отобразить в нем какой то свой текст.
|
|||||||
Последнее обновление ( 29.08.2010 г. ) |
« След. | Пред. » |
---|