Мое выподающее меню....

 
0
 
JavaScript
ava
Step | 29.10.2004, 15:12
Хочу вырозить свою благодарность Sardar, GoodBoy, ALEXANDRO, также тем кто просто давал некоторые коментарии , не смотря на тупость вопросов - проявлял бешенную терпимость, и отвечал.....


теперь о моем выподающем меню.....

Скролл - пофени,
размер экрана - пофени,
позиция выподающего меню - динамическая

нету смысла задумываться о координатах при написанни штмл кода...


и наконецто код
<html>

<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню</title>
<script language="JavaScript">
<!--
function getPosition(obj) { //Данная функция любезно предоставил Sardar
var x=0, y=0;
while(obj) {
x+=obj.offsetLeft;
y+=obj.offsetTop;
obj=obj.offsetParent;
}
return {x: x, y:y};
}
function FP_callJS(visible,objp,obj) {//v1.0

//var obj=document.getElementById("layer1");


if (visible) {

var dx=parseInt(obj.style.width);
var dy=objp.offsetWidth;
var pos=getPosition(objp);
var sx=document.body.clientWidth;
obj.style.top=pos.y+objp.offsetHeight; //позиционирования слоя прямо под пунктом меню
if (pos.x>sx-dx) obj.style.left=pos.x+dy-dx; //позиционирования слоя по х если слой не помещаеться в пределах экрана
else obj.style.left=pos.x; // если слой помещаеться в пределах экрана

obj.style.visibility="visible";
}
else { // закрытие слоя
var x=parseInt(obj.style.left);
var y=parseInt(obj.style.top);
var dx=parseInt(obj.style.width);
var dy=parseInt(obj.style.height);
var xc=window.event.x;
var yc=window.event.y;


if ((xc-2<x)|(xc>x+dx)|(yc-2<y)|(yc>y+dy)) obj.style.visibility="hidden"; // приходиться извращаться ввиду неоднозначности
}
}
// -->
</script>
</head>

<body>

<table border="1" cellspacing="1" style="border-collapse: collapse" width="100%" id="table1">
<tr>
<td>&nbsp;</td>
<td width="97">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="97"><p onmouseover="FP_callJS(true,this,layer1)" >Меню</p></td>
</tr>
</table>
<p ><span lang="ru"></span></p>
<div style="border-style:solid;position: absolute; z-index: 1; width: 127px; height: 45px; left: 8px; top: 31px;
background-color: #7777f8; visibility:hidden; border-width:1px" id="layer1" onmouseout="FP_callJS(false,this,this)">
<a href="ыва">Частного лица</a> <a href="выа">Компании</a></div>

<p>reuertujrtj</p>



</body>

</html>



Скажите что я делаю не правильно...

подскажите может возможна оптимизация...


Вообщем поругайте меня за бездарность
Comments (7)
ava
Step | 02.11.2004, 12:17 #
может все таки пообсуждаем
ava
Alx | 02.11.2004, 15:13 #
Step
сразу бросается в глаза, если сделать mouseover на Меню, а потом не обращать внимания на выпавший слой, он так и будет там торчать. лучше повесить на Меню при mouseout`е скрытие слоя, а при mouseover`е на слой его открытия, либо убирать слой спустя некоторое время, если на него никто не обращает внимания. а по поводу кода - он вообще какой-то странный.
ava
Step | 02.11.2004, 16:34 #
ALEXANDRO, твою основную мысль понял, спасибо... а в чем заключаеться странность кода...
ava
Alx | 02.11.2004, 16:42 #
ну я бы сделал просто display="block" и "none"...
ava
Step | 02.11.2004, 16:49 #
ALEXANDRO, я бы возможно тоже бы сделал, тем более что вы об этом говорили, но я об этом ничего не знаю, и мой характер требовал что бы я довел этот код до конца....

вот теперь я бы и хотел узнать что это такое, и как это приминить к моему меню
ava
Sardar | 02.11.2004, 18:09 #
Step извини, прикупил новое железо, крохи свободного времени трачу на него. А теперь еххе и диск полетел :(

Замечания:
Не стоит опрашивать obj.style.width, т.к. поле может оказатся пустым(не понятно зачем это так сделали...), вместо это пользуйся obj.offsetWidth. То же самое для высоты. Парсить их не нужно, т.к. дурацких суфиксов нет.

Не стоит проверять выход мышки за границу, все равно правильно не будет ;-) Лучше сделай паузу, если за это время мы не перепрыгнули назад, то скрываем слой.

hiddeLayer.target=hiddeLayer.tmr=null;
function hiddeLayer(obj) {
if(obj) {
if(hiddeLayer.target&&hiddeLayer.target!=obj) hiddeLayer.target.style.visibility='hidden';
hiddeLayer.target=obj;
window.clearTimeout(hiddeLayer.tmr);
hiddeLayer.tmr=window.setTimeout(hiddeLayer, 100);
} else {
if(hiddeLayer.target) hiddeLayer.target.style.visibility="hidden";
hiddeLayer.target=null;
}
}
// и в твоем коде
function FP_callJS(visible,objp,obj) {//v1.0
//var obj=document.getElementById("layer1");
if (visible) {
window.clearTimeout(hiddeLayer.tmr);
var dx=obj.offsetWidth;
var dy=objp.offsetWidth;
var pos=getPosition(objp);
var sx=document.body.clientWidth;
obj.style.top=pos.y+objp.offsetHeight; //позиционирования слоя прямо под пунктом меню
if (pos.x>sx-dx) obj.style.left=pos.x+dy-dx; //позиционирования слоя по х если слой не помещаеться в пределах экрана
else obj.style.left=pos.x; // если слой помещаеться в пределах экрана
obj.style.visibility="visible";
} else { // закрытие слоя
hiddeLayer(obj);
}
}


Код не проверил, негде, т.к. сейчас на работе.
ava
Step | 02.11.2004, 18:23 #
Sardar, спасибо.... мои знания растут smile
added later:
железо обмывать будем smile
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
  Sardar   Step   Alx
advanced
Submit