Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Май 2010   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Java Script: Делаем меню».

 

Сегодня мы научимся делать меню. Для начала сделаем меню простенькое, в левой части страницы у нас будут располагаться пункты меню, а в правой текст, связанный с этим пунктом меню. И так, вот текст программы:

 

<HTML>
<HEAD>
<TITLE>Урок 34. Java Script: Делаем меню</TITLE>
</HEAD>

<SCRIPT Language="JavaScript" type="text/javascript">
       function on_load() {
            texts=new Array;
            texts.push('<font size=5 color=red>Здесь будет главная страница</font>');
            texts.push('<font size=5 color=blue>Мой телефон 123-456-789</font>');
            texts.push('<font size=5>Мы, наконец то создали меню</font>');
            texts.push('<a href="http://www.easyprog.ru">www.easyprog.ru</a><br>'+
                            '<a href="http://www.bitm.ru">www.bitm.ru</a>');
     }
    function on_div_click(id) {
          obj=document.getElementById("br");
          obj.innerHTML=texts[id];
     }
</SCRIPT>

<BODY onload="on_load()">
<table>
   <tr>
       <td>
           <div><a href="javascript:on_div_click(0)">Главная</a></div>
           <div><a href="javascript:on_div_click(1)">Контакты</a></div>
           <div><a href="javascript:on_div_click(2)">Новости</a></div>
           <div><a href="javascript:on_div_click(3)">Ссылки</a></div>
       </td>
       <td>&nbsp&nbsp</td>
       <td>
            <div id="br"></div>
       </td>
     </tr>
</table>
</BODY>
</HTML>
 

 

Если мы откроем это файл и щелкнем мышкой по пункту меню, то у нас отобразиться справа связанный с ним текст:

 

Теперь разберемся с самой программой. Начнем с функции on_load

 

       function on_load() {
            texts=new Array;
            texts.push('<font size=5 color=red>Здесь будет главная страница</font>');
            texts.push('<font size=5 color=blue>Мой телефон 123-456-789</font>');
            texts.push('<font size=5>Мы, наконец то создали меню</font>');
            texts.push('<a href="http://www.easyprog.ru">www.easyprog.ru</a><br>'+
                            '<a href="http://www.bitm.ru">www.bitm.ru</a>');
     }

 

Эта функция создаем у нас массив текстов, связанных с меню. Массив мы создаем командой

 

texts=new Array;

 

а добавляем новый элементы

 

texts.push('<font size=5 color=red>Здесь будет главная страница</font>');

 

собственно выводит текст у нас функция on_div_click(id)

 

    function on_div_click(id) {
          obj=document.getElementById("br");
          obj.innerHTML=texts[id];
     }

 

Она находит в документе нужный элемент по его идентификатору

 

obj=document.getElementById("br")

 

и вставляет в него текст из массива

 

obj.innerHTML=texts[id];

 

где соответствующий элемент находит по номеру (id), который передается в функцию как параметр.

 

Переходим к телу HTML файла.

 

<BODY onload="on_load()">

 

атрибут onload="on_load()" показывает, что при загрузке страницы нам нужно выполнить функцию on_load().

 

Далее, при помощи тэга Div мы создаем пункты меню:

 

<div><a href="javascript:on_div_click(0)">Главная</a></div>

 

обратите внимание на ссылку javascript:on_div_click(0) - она показывается, что при кликании на ссылке нужно запустить Java Script функцию on_div_click(0). В скобках у нас задан параметр id - номер элемента в массиве текстов. Счет, как вы поняли, начинается с нуля.

 

Ну, а теперь, тэг

<div id="br"></div>

 

вы, наконец то изучили назначение загадочного атрибута id в тэгах - в них задается идентификатор, по которому созданный данным тэгом элемент можно найти в программе на JS, что бы потом что то сделать с ним - например, отобразить в нем какой то свой текст.

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное