Создание выпадающего списка с использованием scriptaculous и прототипов BlindDown или SlideDown - PullRequest
Новая
       10

Создание выпадающего списка с использованием scriptaculous и прототипов BlindDown или SlideDown

2 голосов
/ 16 ноября 2008

Я пытаюсь создать выпадающий список javascript, используя scriptaculous и prototype. Я знаю, что это можно сделать с помощью псевдо-селекторов CSS: hover, но я бы хотел добавить к этому дополнительный талант. Проблема в том, что, хотя я могу заставить эффект выпадающего / всплывающего окна работать, он кажется очень ненадежным. Есть ли простой способ сделать это, или я должен придерживаться парения? Вот CSS, который я использую. 

<style type="text/css">
ul {list-style-type: none}

#navbar>li {
 position: relative;
 float: left;
 padding-right: 20px;
 height: 2em;
 background-color: #002;
}

ul.dropdown {
 display: block;
 position: absolute;
 top: 2em;
 left: 0px;
 background-color: #00c;
}
</style>

А вот HTML (я добавил style = "display: none" для документа, который сказал, чтобы поместить его туда, а не в таблицу стилей, если вы хотите, чтобы цель изначально была скрыта). 

<ul id="navbar">
  <li
    onmouseover="Effect.BlindDown('dropdownone', { duration: 0.8 })"
    onmouseover="Effect.BlindUp('dropdownone', { duration: 0.8 })"><a href="">Menu Link 1</a>
    <ul id="dropdownone" class="dropdown" style="display: none">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
    </ul>
  </li>
  <li><a href="">Menu Link 2</a>
    <ul id="dropdowntwo" class="dropdown">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
      <li>Drop Down Link 4</li>
      <li>Drop Down Link 5</li>
    </ul>
  </li>
  <li><a href="">Menu Link 3</a>
    <ul id="dropdownthree" class="dropdown">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
    </ul>
  </li>
</ul>

Ответы [ 4 ]

2 голосов
/ 16 ноября 2008

Этот эффект работает нормально с событиями onclick

Но при onmouseover я прочитал , что вам нужно использовать эффект queue , чтобы ваши слепые и слепые не наступали друг на друга, как в этом сценарии .

Очередь - это список событий (в текущем контексте Эффекты). Эти события происходят одно за другим (или параллельно) с целью предотвращения нарушения текущих действий.

0 голосов
/ 20 мая 2009

Использование: Effect.toggle ('id_of_element', 'blind', {duration: 2.0});

headfirstproductions.ca / прототипы и-Scriptaculous-выпадающее меню

0 голосов
/ 21 февраля 2009

BlindDown можно нарисовать так:

onmouseover = "if ($ ('dropdownone'). Style.display == 'none') {Effect.BlindDown ('dropdownone', {duration: 0.8})}"

Я работаю над BlindUp для события "onmouseout", но не могу заставить его работать. (

0 голосов
/ 16 ноября 2008

Очереди, похоже, не помогают. После того, как я попробую разные вещи в течение часа, я собираюсь сдаться и просто придерживаться простых меню при наведении курсора. Забавно, потому что я предположил, что это был базовый эффект улучшения пользовательского интерфейса, который эти библиотеки должны были упростить.

...