VPF::Мое выподающее меню.... - Форум программистов

Step

Дата 29.10.2004, 14:12 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 5151
Регистрация: 26.9.2002
Где: дурдом.UA

Репутация: нет
Всего: 25

Хочу вырозить свою благодарность 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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 5151
Регистрация: 26.9.2002
Где: дурдом.UA

Репутация: нет
Всего: 25

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

--------------------

- Дурак учится на своих ошибках, умный на чужих.
- умные учатся у дураков

Alx

Дата 2.11.2004, 15:13 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

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

--------------------

Step

Дата 2.11.2004, 16:34 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 5151
Регистрация: 26.9.2002
Где: дурдом.UA

Репутация: нет
Всего: 25

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

--------------------

- Дурак учится на своих ошибках, умный на чужих.
- умные учатся у дураков

Alx

Дата 2.11.2004, 16:42 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

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

--------------------

Step

Дата 2.11.2004, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 5151
Регистрация: 26.9.2002
Где: дурдом.UA

Репутация: нет
Всего: 25

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

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

--------------------

- Дурак учится на своих ошибках, умный на чужих.
- умные учатся у дураков

Sardar

Дата 2.11.2004, 18:09 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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);
  }
}

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

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Step

Дата 2.11.2004, 18:23 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 5151
Регистрация: 26.9.2002
Где: дурдом.UA

Репутация: нет
Всего: 25

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

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

--------------------

- Дурак учится на своих ошибках, умный на чужих.
- умные учатся у дураков

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »