Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Медленно выпадающее меню, Давайте разберем код 
:(
    Опции темы
GIK
Дата 3.4.2006, 12:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Всем привет.
Накнулся недавно на код-выпадающее меню, который написал Sardar. Принцип кода понятен, возникли пара вопросов.
Что такое obj.tmr? Вроде таймер, но почему ссылаетсс на obj, т.е. на эллемент item first
Что такое obj.open?
Все, что ниже понятно, перебор всех ээлементов и изменение значения top, вот только function closeMenu(obj) не задействован?

Код

<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.menu {
  position: relative;
}
.item {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid navy;
  background-color: white;
  cursor: pointer;
  padding: 3px;
  font-family: Tahoma;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  width: 100px;
}
.first { }
</style>
<script type="text/javascript">
<!--
function toggleMenu(obj) {
  if(obj.tmr) window.clearInterval(obj.tmr);
  if(obj.open) {
    obj.open=false;
    obj.tmr=window.setInterval(function() {moveMenuAnim(obj, false);}, 10); 
  } else {
    obj.open=true;
    obj.tmr=window.setInterval(function() {moveMenuAnim(obj, true);}, 10);
  }
}
 function closeMenu(obj) {
  if(obj.tmr) window.clearInterval(obj.tmr);
  obj.tmr=window.setInterval(function() {moveMenuAnim(obj, false);}, 50);
}
 function moveMenuAnim(obj, open) {
  var o=obj.previousSibling;
  var cum=0;
  while(o) { 
    if(open) 
    {      
      if(o.offsetTop>=(o.nextSibling.offsetHeight+o.nextSibling.offsetTop)) //Высота + расположение 
        {
        window.clearInterval(obj.tmr);
        return;
         }
  o.style.top=(o.offsetTop+(++cum))+'px';                                           
   } 
  else
   {  
      if(o.offsetTop<=0)
     {
        window.clearInterval(obj.tmr);
        return;
      }
     o.style.top=(o.offsetTop-(++cum))+'px';
   }
    o=o.previousSibling; //Перемещаемся к прдыдущему 
   }
}
//-->
</script>
</head>
<body>
<div class="menu">
 <div class="item">Item5</div>
 <div class="item">Item4</div>
 <div class="item">Item3</div>
 <div class="item">Item2</div>
 <div class="item">Item1</div>
 <div class="item first" onclick="toggleMenu(this)">Menu</div>
</div>
</body>
</html>


Это сообщение отредактировал(а) GIK - 3.4.2006, 12:26


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
dstorm81
Дата 3.4.2006, 21:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39



ну не используется, может не весь код здесь
напиши ему письмо smile может снизойдет и объяснит


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
Ciber SLasH
Дата 3.4.2006, 22:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Цитата(GIK @ 3.4.2006, 13:25 Найти цитируемый пост)
Что такое obj.tmr?

Это id таймера. Просто сначала в функции проверяется, установлено ли поле tmr у элемента obj и если да, то останавливается интервал, иначе устанавливаем элементу obj поле tmr и присваиваем ему id интервала.
PM   Вверх
GIK
Дата 4.4.2006, 09:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Цитата

Просто сначала в функции проверяется, установлено ли поле tmr у элемента obj и если да, то останавливается интервал, иначе устанавливаем элементу obj поле tmr и присваиваем ему id интервала.

Не понял. Где можно Ман по теме посмотреть, если конечно кто нибуть не разъяснит....

Что значит поле tmr у эллемента obj, т.е. как я понял конструкция obj.tmr=window.setInterval(function() {moveMenuAnim(obj, false);}, 10);
устанавливает прямо в тег элемент tmr которому присваивает таймер??? И если он был установлен этот таймер вырубается, или более того удаляется когда происходит повторный вызов.
if(obj.tmr) window.clearInterval(obj.tmr);

Это сообщение отредактировал(а) GIK - 4.4.2006, 09:17


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
GIK
Дата 4.4.2006, 09:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



И еще что есть obj.open? оно возникает при событии???


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Ciber SLasH
Дата 8.4.2006, 01:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Цитата(GIK @ 4.4.2006, 10:07 Найти цитируемый пост)
как я понял конструкция obj.tmr=window.setInterval(function() {moveMenuAnim(obj, false);}, 10);
устанавливает прямо в тег элемент tmr которому присваивает таймер?

Почти, tmr в данном случае это поле объекта (RTFM по ООП), которое мы создаём. А т.к. в JS поля можно создавать всего лишь присвоив ему значение, то теперь у элемента (объекта) появилось поле со значением, которое вернула функция setInterval().

Цитата(GIK @ 4.4.2006, 10:07 Найти цитируемый пост)
И если он был установлен этот таймер вырубается, или более того удаляется когда происходит повторный вызов.
if(obj.tmr) window.clearInterval(obj.tmr);

Угу, если поле существует, то значит мы его уже создали, что означает, что мы уже вызывали setInterval() — следовательно нужно отключить интервал.
PM   Вверх
GIK
Дата 8.4.2006, 16:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Понял.
Еще вопрос: Отличается ли обычная переменная, которой присвоили некоторое значение, например установили таймер, от так называемого поля которое создается динамически как в данном случае, которому так же присваивается значение?

Это сообщение отредактировал(а) GIK - 8.4.2006, 16:45


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Ciber SLasH
Дата 8.4.2006, 17:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Цитата(GIK @ 8.4.2006, 17:43 Найти цитируемый пост)
Отличается ли обычная переменная

Формально нет.
PM   Вверх
Cristall512
Дата 17.8.2006, 14:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 24
Регистрация: 29.7.2006

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



Чуваки, эта [censored], по ходу, только в ослике пашет! По крайней мере, в файерфоксе не работает ни фига! smile 
PM MAIL   Вверх
Sardar
Дата 18.8.2006, 13:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


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

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



Cristall512, просто GIK не подумал что DOM через чур универсален, он содержит коменты, отступы в вёрстке и прочее, отсюда previousSibling и подобные становяться бесполезны. В ИЕ с трезвой головой подошли к этому делу и нарушили стандарт W3C, из дерева убираються пробелы и коменты до тех пор пока не выставишь валидный <!DOCTYPE.

Выход: заменить все previousSibling/nextSibling на итерации через childNodes, либо поставить на цикл и отфильтровывать не ноды, либо убрать из вёрстки все пробелы для выравнивания - последний вариант самый кривой.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 17.12.2006, 23:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(Sardar @  18.8.2006,  14:03 Найти цитируемый пост)
В ИЕ с трезвой головой подошли к этому делу и нарушили стандарт W3C, из дерева убираються пробелы и коменты до тех пор пока не выставишь валидный <!DOCTYPE.

Опять же вспоминая мой недавний случай, у меня стоит доктайп, при чем хштмл и он валиден - но скрипт не работал. Что же тогда значит "валидный"? И еще, на quircksmode есть что-нибудь по этому поводу почитать?
PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 18.12.2006, 12:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


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

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



Цитата(Aliance @  17.12.2006,  22:22 Найти цитируемый пост)
но скрипт не работал

Угу, именно не работал, потому что ты обращался к нодам в childNodes по индексу, не думая, что от одной ноды до другой может быть ещё несколько нод комментов и строковых с отступами твоей вёрстки. Убрав DOCTYPE у ИЕ он должен выпасть в quirksmode и автоматом отфильтровывать всё лишнее из DOM дерева, оставляя только элементы. Тогда доступ по индексу должен работать, ибо childNodes сокращается в давно сущствующую в ИЕ коллекцию children.

Парни из W3C делали DOM так, что бы не потерять и бита информации. Но сам по себе DOM слишком громоздкий и "низкоуровневый", поэтому поверх него для селекций используется XPath (часть DOM3)

Валидный DOCTYPE, это тот, который в правильном синтаксисе (как минимум публичный идентификатор нужен), понимается ИЕ и от которого он не выпадает в quirksmode. Таблица.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1941 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.