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

Статьи по web-дизайну и web-программированию

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2008   →
 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
Автор
Александр Левитас

Статистика

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

Статьи по web-дизайну и web-программированию


Существенное достижение - это по собственному желанию ставить перед собой трудную цель и прочно удерживать её в сознании.
                                                                            Уильям Джеймс.

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

Итак, приступим.

**********************************

Сегодня мы хотим рассказать о создании простенького двухуровнего меню с помощью JavaScript и слоёв (Div). Надеемся, что Вы уже имеете представление о HTML и с JavaScript. Если нет, то постараемся все прокомментировать в наиболее понятной форме, и разбор данного материала не составит определенного труда.

Что мы хотим…..

Первый уровень меню будет представлять собой постоянно видимую таблицу, в ячейках которой будут находиться гиперссылки. Это и будут пункты основного меню, при наведении курсора на которые будут отображаться соответствующие подменю (одно появляется, другое исчезает). Всё это будет реализовано с помощью слоёв.

Представили? А теперь давайте приступим к реализации задуманного.

Реализация:

Для выполнения операций со слоями мы будем использовать JavaScript.
Соответствующий сценарий приведён ниже: 

<Script Language="JavaScript">
 
//  Установка глобальных переменных
.
 
cm=null;                    // сюда будем запоминать 
                                // видимый слой. Начальное 
                               // значение - null.
hide_delay=500;       // Время задержки (в м.с.) авто-закр.
                              // меню. 
tstat=0;                  // Признак активности таймера авто-закр.
 
// Определяем браузер пользователя
 
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
 
 
// Функция отображающая и скрывающая слои
 
// Вход:
// objElement - идентификатор(id) слоя;
// bolVisible - булева переменная:
// true  - отобразить слой;
// false - скрыть слой.
 
// Выход:
// 1
// P.S: В зависимости от типа браузера
// сценарий для манипуляции с видимостью слоёв
// несколько различается.
 
function switchDiv(objElement,bolVisible){
if(isNS4||isIE4){
     if(!bolVisible) {
       objElement.visibility ="hidden"
     } else {
       objElement.visibility ="visible"
     }     
 } else if (isIE5 || isNS6) {
      if(!bolVisible){
         objElement.style.display = "none";
         
      } else {
        objElement.style.display = "";
      }
     }
 
return 1;
}
// Функция возвращающая значение указанного ей 
// свойства объекта (не обязательно слоя).
 
// Вход:
// el    - идентификатор элемента;
// sProp - свойство (left,top...)
 
// Выход:
// Значение какого-нибудь свойства объекта.
 
 function getPos(el,sProp) {
        var iPos = 0;
        while (el!=null) {
               iPos+=el["offset" + sProp]
               el = el.offsetParent
        }
        return iPos
 
}
// Функция выдаёт объект с указанным
// ей названием.
 
// Вход:
// myid - название объекта
 
// Выход: объект.
 
function getelementbyid(myid) {
   if (isNS4){
        objElement = document.layers[myid];
     }else if (isIE4) {
        objElement = document.all[myid];
     }else if (isIE5 || isNS6) {
             objElement = document.getElementById(myid);
     }
return(objElement);
}
 // Функция отображающая|скрывающая
// ,а предварительно ещё и передвигающая
// должным образом слои.
 
 
// Вход:
// el - яйчейка таблицы на которой 
// находится указатель;
// m  - наименование слоя, который надо
// отобразить под этой яйчейкой.
 
function show(el,m) {
 
// Если имеется видимый слой,
// сделать его невидимым.
 
 if (cm!=null) {
 switchDiv(cm,false);
 }
 
// Если указано название слоя для отображения,
// то:
// 1) Получаем его объект;
// 2) X слоя = X яйчейки;
// 3) Y слоя = Y яйчейки + высота яйчейки;
// 4) Делаем слой видимым;
// 5) Сохраняем копию слоя в cm.  
 
 
 if (m!=null) {
 m=getelementbyid(m);
 m.style.left = getPos(el,"Left")+"px";
 m.style.top =  getPos(el,"Top")+el.offsetHeight+"px";
 switchDiv(m,true);
 cm=m;
 }
 }
 
 // Функция "закрывающая" меню.
 // Функция ничего не принимает на вход
// и возвращает 1.
 
function hidemenu() {
 // Устанавливаем задержку равную 
// hide_delay м.с. с помощью таймера; 
 
timer1=setTimeout("show(null,null)",hide_delay);
 
// Устанавливаем tstat=1 - признак, того, что таймер запущен.
tstat=1;
 return 1;
}
 
 // Функция, останавливающая таймер запущенный
// прошлой функцией. Таким образом,
// меню не пропадает.
 
// Функция ничего не принимает на вход
// и возвращает 1.
 
function cancelhide() {
 if (tstat==1) {
 clearTimeout(timer1);
 tstat=0;
 }
return 1;
}
 </Script>
 

Итак, со сценарием мы познакомились, теперь перейдем к знакомству со слоями, для которых этот сценарий и был написан.

Рассмотрим слои (div), а также таблицу, выполняющую роль основного меню. Вот пример HTML работающий со сценарием:

<TABLE WIDTH=300 BORDER=1 onMouseOut="hidemenu()" onMouseOver="cancelhide()">
<TR>
<TD width=100 align="center" onMouseOver="show(this,'submenu1')"><a href="">Меню 1</a></TD>
<TD Width=100 align="center" onMouseOver="show(this,'submenu2')"><a href="">Меню 2</a></TD>
<TD width=100 align="center" onMouseOver="show(this,'submenu3')"><a href="">Меню 3</a></TD>
</TR>
</TABLE>

Таблица - основное меню. При наведении курсора на неё (самый первый onMouseOver ) вызывается функция “cancelhide()”. Когда курсор отъезжает (первый onMouseOver) выполняется функция “hidemenu()”.

При наведении курсора на какую-нибудь из её яйчеек, вызывается функция “show(this,[id_слоя])”. Где [id_ слоя] - наименование слоя.


<DIV ID="submenu1" style="LEFT: -1000px;OVERFLOW: hidden;xPOSITION: absolute;TOP: -1000px;" onMouseOut="hidemenu()" onMouseOver="cancelhide()">
<table cellpadding=1 cellspacing=0 BORDER=1 width=100>
<tr>
<td width=”100%”><a href="">SubMenu1_1</a></td>
</tr>
<tr>
<td><a href="">SubMenu1_2</a></td>
</tr>
<tr>
<td><a href="">SubMenu1_3</a></td>
</tr>
<tr>
<td><a href="">SubMenu1_4</a></td>
</tr>
</table>
</DIV>


Один из изначально невидимых (OVERFLOW: hidden), находящихся за пределами экрана (LEFT: -1000px; TOP: -1000px) слоёв. При наведении курсора мыши на него (onMouseOver) вызывается функция “cancelhide()”, а когда курсор мыши «уходит» (onMouseOut), то “hidemenu()” (описания этих функций см. выше).

 

   Вот такая небольшая статья.

***************************************************

Останавливает гибддшник девятку, оттуда выходит маленький щупленький мужичок.
- Вы превысили скорость.
- Товарищ милиционер... товарищ милиционер, я ехал...
- Вы не ехали, вы обгоняли, у вас не горел поворотник, вы были не пристегнуты и разговаривали по сотовому телефону!
- Кто? Я?! Не может быть!..
- Еще раз удивитесь - проедете на красный свет, пересечете две сплошные линии и, отстреливаясь, начнете удирать от милиции.
 
*****************************************************
Урок в летней экологической школе. Учительница:
- Так чему нас учит сказка Пушкина "О рыбаке и рыбке"?
Встает девочка-крохотулечка:
- Эта сказка учит нас, что неуемный рост потребления в современном капиталистическом мире неизбежно приведет человечество к экологической и гуманитарной катастрофе!
 
*****************************************************
 
 И , наконец, несколько ссылок :
 
» http://seo-monitor.ru - русский сервис определения и мониторинга позиций сайтов в поисковых системах по заданным запросам. Система разделена на 2 независимых сервиса: on-line сканер (предназначен для моментального определения позиции вашего сайта в поисковых системах ) и off-line сканер (предназначен для мониторинга положения вашего сайта в поисковых системах).
» http://www.goldposition.ru - русский интернет-сервис, призванный решить часто встречаемую проблему среди веб-мастеров. Сервис позволяет узнать, на каких местах находится интернет-сайт в ведущих российских и мировых поисковиках - Yandex, Rambler, Google, Aport, Mail. Роботы сервиса регулярно сканируют информацию и выявляют, на каких местах в поисковых результатах находится ваш ресурс, что позволяет в перспективе: оценивать развитие ресурса, “признание” его популярности.
 
***********************************************
Удачи Вам во всех начинаниях несущих пользу и благополучие

  С уважением
Максим Егоров , Анжела Бабухина
Наши контакты: mailto:angelamax62@gmail.com
ISQ - 400-580-237
наши друзья: www.bookspro.net.ru
В избранное