Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.09.2010, 17:02
Интересующийся
Отправить личное сообщение для arwprod Посмотреть профиль Найти все сообщения от arwprod
 
Регистрация: 11.09.2010
Сообщений: 20

Затык с мини плагином меню
Добрый день, уважаемые!
Сел разбираться с jquery и решил попробывать написать собственный плагин jquery.

Собственно, суть плагина простая, при наводке на элемент ul>li списка, раскраывается вложенный ul>li список, убираем мышку, этот список пропадает... Но вот затык: после того, как мы убрали курсор и пытаемся навести на этот же элемент снова, плагин не срабатывает.

Это мой первый опыт, по-этому не судите строго ^_^'
Код плагина:
(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'slow'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function() {
			return this.each(function(){
				jQuery(this).find('ul')
					.css('display','none');
   				$(this).children().mouseover(function(){
					$(this).queue(function(){
    					$(this).children().fadeIn(options.fadeIn);
						$(this).dequeue();
					});
				}).mouseleave(function(){
					$(this).queue(function(){
						$(this).children().children().fadeOut(options.fadeOut);
					$(this).dequeue();
					});
    			});
			});
		}	
	}); 
})(jQuery);

html конструкция:
Код:
   <ul class="menu">
    	<li>
            <a>1</a>
            <ul class="sub">
            	<li><a href="#"><b>1.1</b></a></li>
                <li><a href="#"><b>1.2</b></a></li>
                <li><a href="#"><b>1.3</b></a></li>
                <li><a href="#"><b>1.4</b></a></li>
                <li><a href="#"><b>1.5</b></a></li>
            </ul>
        </li>
    </ul>
Заранее спасибо за помощь.

Последний раз редактировалось arwprod, 11.09.2010 в 17:06.
Ответить с цитированием
  #2 (permalink)  
Старый 11.09.2010, 17:32
Интересующийся
Отправить личное сообщение для arwprod Посмотреть профиль Найти все сообщения от arwprod
 
Регистрация: 11.09.2010
Сообщений: 20

кажется озарило... нужен какой-то триггер и в зависимости от него показывать либо скрывать элементы...
Ответить с цитированием
  #3 (permalink)  
Старый 11.09.2010, 17:48
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

Есть замечательная функция toggle().
__________________
Не хочешь, чтобы тебя послали? Не спрашивай куда идти.
Ответить с цитированием
  #4 (permalink)  
Старый 12.09.2010, 00:46
Интересующийся
Отправить личное сообщение для arwprod Посмотреть профиль Найти все сообщения от arwprod
 
Регистрация: 11.09.2010
Сообщений: 20

Тугл на сколько я понял работает только при клике =\ а хотелось при наводке...
Ответить с цитированием
  #5 (permalink)  
Старый 12.09.2010, 00:58
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

И для этого тоже есть замечательная функция hover()

Последний раз редактировалось monolithed, 12.09.2010 в 01:09.
Ответить с цитированием
  #6 (permalink)  
Старый 12.09.2010, 01:29
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

"Все уже украдено до нас" © Ю.Никулин
__________________
Не хочешь, чтобы тебя послали? Не спрашивай куда идти.
Ответить с цитированием
  #7 (permalink)  
Старый 12.09.2010, 20:21
Интересующийся
Отправить личное сообщение для arwprod Посмотреть профиль Найти все сообщения от arwprod
 
Регистрация: 11.09.2010
Сообщений: 20

Получилась вот такая штука. Буду рад выслушать советы, заранее спасибо))

(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'fast'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function(){
			jQuery(this).find('ul')
					.css('display','none');
			
			return this.each(function(){
   				$(this).children().hover(
					function(){
						self = $(this).children().eq(1);
						self.addClass('trigger');
						if(self.hasClass('trigger')) {
							self.fadeIn(options.fadeIn);
						}
					}, 
					function(){
						self.removeClass('trigger');
						if(!self.hasClass('trigger')) {
							self.fadeOut(options.fadeOut);						
						}
    				}
				);
				$(this).children().eq(1).each(function(){
					
				});
			});
		}	
	}); 
})(jQuery);
Ответить с цитированием
  #8 (permalink)  
Старый 12.09.2010, 20:26
Интересующийся
Отправить личное сообщение для arwprod Посмотреть профиль Найти все сообщения от arwprod
 
Регистрация: 11.09.2010
Сообщений: 20

прошу прощения, не то скинул :Р
(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'fast'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function(){
			$(this).find('ul')
					.css('display','none');
			
			return this.each(function(){
   				$(this).children().hover(
					function(){
						self = $(this).children().eq(1);
							self.fadeIn(options.fadeIn);
					}, 
					function(){
							self.fadeOut(options.fadeOut);
    				}
				);
			});
		}	
	}); 
})(jQuery);
Ответить с цитированием
  #9 (permalink)  
Старый 13.09.2010, 20:01
Интересующийся
Отправить личное сообщение для arwprod Посмотреть профиль Найти все сообщения от arwprod
 
Регистрация: 11.09.2010
Сообщений: 20

Переписал скрипт, проверил в браузерах, не работает в IE и Opera =\ Есть ли какие-то хаки, как в css или еще что?))) Подскажите что делать, заранее спасибо.

(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'fast',
		triggerClass: 'some_ave_class_for_jenvit_menu'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function(){
			
			$(this).find('ul').css('display','none');
			
			return this.each(function(){
   				$(this).find('li').hover(function(){
					self = $(this).children().next();
					if(!$(this).hasClass(options.triggerClass)){
						$(this).addClass(options.triggerClass);
						self.fadeIn();
					} else {
						self.css('display','block');
					}
						self.hover(function(){
							$(this).css('display','block');
						});
				},function(){
					$(this).removeClass(options.triggerClass);
					$(this).children().next().fadeOut();
    			});
			});			
		}	
	}); 
})(jQuery);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
анимированное меню на jquery глючит в ie leCadavreExquis jQuery 3 30.12.2009 17:30
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05