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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Событие mouseout при наведении мыши на пункт меню 
V
    Опции темы
ksnk
Дата 3.6.2009, 00:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

Репутация: 84
Всего: 386
А если немного посмотреть на то, как делается обычное меню на CSS и постараться понять, то получится чего-то такое. Найдите, пожалуйста, десять отличий в скрипте и  разметке  smile Кстати, прелести использования visible по сравнению с display не осознал...

<span> добавлен в разметку, чтобы впоследствии проще было писать CSS правила для этого элемента.
Код

<html>
<head>
    <style>        
        div.menu ul {margin:0;padding-top:0; float:right;}
        div.menu ul li {float:left; list-style:none; font-weight:bold; padding-right:15px;  }
        div.menu ul li ul.fall {float:none; visibility:hidden; background-color:#4682B4; }*/
    </style>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function() {
        $("div.menu>ul>li").hover(function(e) {
            $(this).find('ul').css('visibility','visible')
          },function(){ 
            $(this).find('ul').css('visibility','hidden')
        })
    });
    </script>        
</head>
<body>
<div class="menu"> 
    <ul>
        <li><span><a href="">Menu 1</a></span>
            <ul class="fall">
                <li><a href="">item 1</a></li>
                <li><a href="">item 2</a></li>
                <li><a href="">item 3</a></li>
            </ul>
        </li>
        <li><span><a href="">Menu 2</a></span>
            <ul class="fall">
                <li><a href="">item 1</a></li>
                <li><a href="">item 2</a></li>
                <li><a href="">item 3</a></li>
            </ul>
        </li>
        <li><span><a href="">Menu 3</a></span>
            <ul class="fall">
                <li><a href="">item 1</a></li>
                <li><a href="">item 2</a></li>
                <li><a href="">item 3</a></li>
            </ul>
        </li>
        <li><span><a href="">Menu 4</a></span>
            <ul class="fall">
                <li><a href="">item 1</a></li>
                <li><a href="">item 2</a></li>
                <li><a href="">item 3</a></li>
            </ul>
        </li>
    </ul> 
</div>
</body>
</html>




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
XEugene
Дата 3.6.2009, 12:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 2
Цитата(ksnk @  3.6.2009,  00:13 Найти цитируемый пост)
Кстати, прелести использования visible по сравнению с display не осознал...
Использование visibility позволяет избежать лишних движений на странице, при появлении/исчезновении подменю. При использовании display оно могло бы подвинуть ниже стоящий элемент, если он не абсолютно позиционирован.  



Цитата(ksnk @  2.6.2009,  23:53 Найти цитируемый пост)
Я обще не понимаю, а зачем тут нужна JQuery? На мой взгляд, все фреймворки пытаются скрыть такую убогую магию от программиста. 
jQuery мне в данном случае вообще не важен. Я просто хотел разобраться получше в некоторых вещах, конкретно с эффектом "лишних" событий, с которым я уже прежде сталкивался.
А JQuery мне тут нужен только для того чтобы скрыть убогую магию поиска DOM-элемента за селетором который у меня в стилях и так уже описан))
Код

var titles = $("div.menu ul li #tab a");
PM MAIL   Вверх
ksnk
Дата 3.6.2009, 12:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

Репутация: 84
Всего: 386
Цитата(XEugene @  3.6.2009,  12:15 Найти цитируемый пост)
Я просто хотел разобраться получше в некоторых вещах, конкретно с эффектом "лишних" событий, с которым я уже прежде сталкивался.

Тогда можно посмотреть на мой последний пример. 
Функция hover в jQuery определяет 2 события, onmouseover и onmouseout. Без всяких дополнительных телодвижений. 
"Выход за пределы" ставится единственный раз для "Объемлющего" LI, и как не странно - он работает без перевычислений положения элемента. Правда придется поменять разметку, как у меня. Впрочем, так даже "чище" получается.

Добавлено через 41 секунду
Некоторой магии лучше избегать ;-)


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
youri
Дата 3.6.2009, 14:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 2
Всего: 16
Цитата(ksnk @  3.6.2009,  12:30 Найти цитируемый пост)
Некоторой магии лучше избегать ;-)

а можно подробнее: какой и почему?


--------------------
С кем разговаривает Microsoft
PM   Вверх
ksnk
Дата 3.6.2009, 16:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

Репутация: 84
Всего: 386
youri, Вся предыдущая страница была посвящено такой магии, которую можно несложно избежать изменением разметки.



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
XEugene
Дата 3.6.2009, 23:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 2
В общем, все заработало, как требовалось, после добавления return для выхода из обработчиков mouseover и добавления аналогичных обработчиков для ссылок.  Попутно выяснилось, что остановка всплытия события mouseout требуется только в обработчиках для ссылок
Код

var submenus = $("div.menu ul li div.fall");
for (var j = 0; j < submenus.length; j++) {
        if (submenus[j].style.visibility == "visible") 
            submenus[j].style.visibility == "hidden";
        var links = $("a", submenus[j]);
        for (var i = 0; i < links.length; i++) {
            links[i].onmouseout = function(e) {
                if (!window.event) {
                    e.stopPropagation();  
                    return;
                }
                else {
                    e.cancelBubble = true;
                    return;
                }    
            }
        }
}
так-как mouseout происходящий на ссылках всплывает до дива.  Для обработчиков mouseout на дивах достаточно return.

Прошу поставить за меня плюс youri, кому несложно.


 
Цитата(ksnk @  3.6.2009,  16:08 Найти цитируемый пост)
Вся предыдущая страница была посвящено такой магии, которую можно несложно избежать изменением разметки.
Ага, использование списков <ul> вместо дивов для подменю, как я понял, избавляет от ненужных событий mouseout.
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




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


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

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