Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Мое выподающее меню....

Автор: Step 29.10.2004, 14: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>

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

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

Вообщем поругайте меня за бездарность

Автор: Step 2.11.2004, 12:17

может все таки пообсуждаем

Автор: Alx 2.11.2004, 15:13

Step
сразу бросается в глаза, если сделать mouseover на Меню, а потом не обращать внимания на выпавший слой, он так и будет там торчать. лучше повесить на Меню при mouseout`е скрытие слоя, а при mouseover`е на слой его открытия, либо убирать слой спустя некоторое время, если на него никто не обращает внимания. а по поводу кода - он вообще какой-то странный.

Автор: Step 2.11.2004, 16:34

ALEXANDRO, твою основную мысль понял, спасибо... а в чем заключаеться странность кода...

Автор: Alx 2.11.2004, 16:42

ну я бы сделал просто display="block" и "none"...

Автор: Step 2.11.2004, 16:49

ALEXANDRO, я бы возможно тоже бы сделал, тем более что вы об этом говорили, но я об этом ничего не знаю, и мой характер требовал что бы я довел этот код до конца....

вот теперь я бы и хотел узнать что это такое, и как это приминить к моему меню

Автор: Sardar 2.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);
  }
}

Код не проверил, негде, т.к. сейчас на работе.

Автор: Step 2.11.2004, 18:23

Sardar, спасибо.... мои знания растут

Добавлено @ 18:26
железо обмывать будем