cbone
@cbone
Серверная инфраструктура

Разработка jQuery-плагина: как правильно обрабатывать события?

Всем привет. Учусь разрабатывать плагины для jQuery.

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

Подобный функционал реализован на mamondo.ru на главной странице при выборе страны, области, города.

Хочу чтобы данный плагин можно было инициализировать следующим образом и после инициализации обрабатывались все события:

$("#selector").dropdown({<br>
  'url' : '/result.json' //скрипт возвращает JSON списка (реализован тут: http://innovatis.ru/php/service.php?id=3)<br>
});<br>




Не пойму как в плагине повесить обработчика событий.

Получается будут следующие события:

1. клик по селектору -> .show()

2. клик по любой части страницы кроме селектора -> .hide()

3. клик по элементу из выпадающего списка -> ajax-загрузка json-массива при помощи $.getJSON (если результат != [ ], тогда отображаем новые пункты выпадающего списка, иначе передаем значение в форму )



Сейчас реализован простейший функционал (показать/скрыть). Для этого приходится писать такой javascript:

$(document).ready(function() {<br>
	$("#rayon").dropdown();<br>
	$("#rayon a").click(function() {<br>
		$("#rayon").dropdown('toggle');<br>
		return false;<br>
	});				<br>
	$("div:not(#rayon)").click(function(){<br>
	    $("#rayon").dropdown('hide');<br>
	});<br>
});<br>




А в идеале хочется получить это:

$(document).ready(function() {<br>
	$("#rayon").dropdown({<br>
		'url' : 'result.json'<br>
	});<br>
});<br>




Это не красиво и теряется весь смысл разработки плагина. Как сделать так, чтобы все события обрабатывались внутри плагина?



Быдлокод: html, css, js, PHP
  • Вопрос задан
  • 6943 просмотра
Решения вопроса 1
Anonym
@Anonym
Программирую немного )
(function($) {
  $.fn.dropdown = function(options) {
    // Устанавливаем стандартные значения
    options = $.extend({/* defaults */}, options);

    $(document)
      .on('click', function() {
        // Прячем деревья
      });    

    return this.each(function() {
      $(this)        
        .on('click', '.item', function(e) {
          e.stopPropagation();
          e.preventDefault();
          // Показываем дочернее дерево
        });
    });
  }
})(jQuery);
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@egorinsk
Хочу также заметить, вот такие вещи писать неправильно:

[a class=«title» href="#"]Выберите район города[/a]

Если вы хотите сделать кнопку, для этого есть тег button. Использовать тут тег a неправильно, так как это не ссылка. А писать «href=#» — это быдлокод и непонимание основ HTML.
Ответ написан
Enuriru
@Enuriru
Дизайнер, веб-разработчик
Все достаточно просто:

(function( $ ) {
	
	$.fn.dropdown = function(options) {
		// options.url
		// сам элемент (или несколько элементов) будут в this
		// код плагина
	}
	
})( jQuery );

Ответ написан
Anonym
@Anonym
Программирую немного )
---
Ответ написан
Комментировать
@Ork00
Я любопытный человек
А есть что нибудь в синтаксисе кроме.on чтобы инициализировать событие клик ?кто нибудь может знает?
Ответ написан
Комментировать
@uragun
Web-программист, web-дизайнер
можно подписать элемент на событие с помощью addEventListener или attachEvent (в старых IE, до 9 по-моему):
document.getElementById("idSelector").addEventListener("click", function(event){
//your code here
});

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы