Разглеждане на JavaScript функциите
Като начало трябва да дефинираме няколко променливи, които по-късно ще са ни необходими в различните функции. Към всяка една променлива съществува и коментар, така, че няма нужда да се коментират по отделно.
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| var timerID = null;
var timerOn = false;
var timecount = 700;
var what_browser = null;
var layerRef;
var styleSwitch;
var check = false;
var selectednow = null; |
Следва функцията
init(). В тази функция се провежда проверката за различните броузъри. Това е важно, защото все пак трябва да се знае как точно да се обръщаме към различните компоненти на документа.
CODE1
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
32
| function init()
{
if (document.layers)
{
layerRef="document.layers";
styleSwitch="";
visibleVar="show";
screenSize = window.innerWidth;
what_browser ="ns4";
}
else if(document.all)
{
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
screenSize = document.body.clientWidth + 18;
what_browser ="ie";
}
else if(document.getElementById)
{
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what_browser="moz";
}
else
{
what_browser="none";
}
check = true;
} |
Функцията
reDo() се активира само когато се променят размерите на броузъра. За различните броузъри се използват различни команди за презареждането на страницата. А това презареждане е важно, за да могат да се изчислят на ново координатите на менютата, който ще се показват.
CODE1
2
3
4
5
6
7
8
9
10
11
12
| function reDo()
{
if(what_browser == "moz")
{
window.location.replace(self.location.href);
}
else
{
window.location.reload();
}
}
window.onresize = reDo; |
Следващата функция показва скритото меню като се обръща към него с команда зависима от клиента. Тук не се прави нищо друго освен да се промени атрубута за видимост на менюто от
hidden във
visible.
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function showLayer(layerName)
{
if(check)
{
if (what_browser =="none")
{
return;
}
else if (what_browser == "moz")
{
document.getElementById(layerName).style.visibility="visible";
}
else
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}
else
{
return;
}
} |
Съответната функция
hideLayer скрива показново вече меню, като променя атрибута от
visible в
hidden.
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function hideLayer(layerName)
{
if(check)
{
if (what_browser =="none")
{
return;
}
else if (what_browser == "moz")
{
document.getElementById(layerName).style.visibility="hidden";
}
else
{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
}
else
{
return;
}
} |
Следващата функция скрива всички менюта, които са били отворени.
CODE1
2
3
4
5
6
7
| function hideAll()
{
hideLayer('rel_layer1');
hideLayer('rel_layer2');
hideLayer('rel_layer3');
hideLayer('rel_layer4');
} |
Следващата функция стартира таймера на менютата. Това с таймера е хитро, защото като отместите маркера на мишката от дадено меню, няма да ви се затвори менюто веднага, а след определеното от вас по-горе време. Ефекта е много по-добър отколкото внезапно скриване на менюто. Но това си е ваш избор, може да зададете и като стойност на таймера 0, за да избегнете този ефект.
CODE1
2
3
4
5
6
7
8
| function startTime()
{
if (timerOn == false)
{
timerID=setTimeout( "hideAll()" , timecount);
timerOn = true;
}
} |
Следващата функция спира таймера и изтрива референцията към него.
CODE1
2
3
4
5
6
7
8
9
| function stopTime()
{
if (timerOn)
{
clearTimeout(timerID);
timerID = null;
timerOn = false;
}
} |
Функцията
showStatus се използва за изпринтиране на даден текст в лентата за състояние на съответния броузър. Приятен ефект, който прикрива адреса на препратката, но може и без него.
CODE1
2
3
4
5
| function showStatus(sMsg)
{
window.status = sMsg ;
return true ;
} |
Следващата функция
setSelected не се използва в този скрипт, но нарочно съм е оставил, защото всеки може да си я доразвива функцията. Целта и е да отбележи, кой елемент в момента е селектиран. Това може да влезне в употреба, ако искате да запазите даден елемент от главната навигация маркиран, по време на преминаване върху маркираното от вас
меню. Все пак трябва да знаете, кой елемент е родител на отварящото се меню.
CODE1
2
3
4
| function setSelected(sel_id)
{
selectednow = sel_id;
} |
Следващата функция е важна за разположението на дъщерните менюта. Тя определя позицията на родителските менюта, като връща обект от координатите
(x,y) на зададения елемент. В примера ще видите как точно се използва тази функция.
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| function getPosition(element)
{
var elem=element,tagname="",x=0,y=0;
while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
{
y+=elem.offsetTop;
x+=elem.offsetLeft;
tagname=elem.tagName.toUpperCase();
if (tagname=="BODY")
elem=0;
if (typeof(elem)=="object")
if (typeof(elem.offsetParent)=="object")
elem=elem.offsetParent;
}
position=new Object();
position.x=x;
position.y=y;
return position;
} |
Последната функция изпринтира съответните
CSS настройки на всички дъщерни менюта, спрямо родителските менюта. Позиционирането на менютата е динамично, тъй като при промяна размерите на броузъра с променят и координатите на родителските менюта.
CODE1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function getCSS(elementId)
{
var a,element,top_position;
element=document.getElementById(elementId);
a=getPosition(element);
top_position = a.y + 20;
document.write('<style type=text/css>');
document.write('#rel_'+ elementId +' {');
document.write('width : 122px;');
document.write('top : ' +top_position+ 'px;');
document.write('left : ' +a.x+ 'px;');
document.write('z-index : 1;');
document.write('position : absolute;');
document.write('visibility : hidden;');
document.write('}');
document.write('</style>');
} |
Това беше скрипта за управление на менютата. Селдва използването му.
