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

Question

[Иван Трофимов]

Всем привет. Учусь разрабатывать плагины для 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

Answer 1

[Николай Васильчук]

(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);

Comments

[egorinsk]

$(document).on('click') — по моему, это не совсем верный код, во-первых, надо использовать тут mousedown, во-вторых, у вас каждый вызов dropdown() будет устанавливать еще один обработчик на документ, это как минимум уродливо. Логичнее использовать единственный обработчик для всех дропдаунов.

Но этот способ, конечно лучше того, что придумал автор вопроса.

Также, желательно добавить индикацию загрузки и обработку ошибок при отправке запроса или получении ответа.

[Николай Васильчук]

Я даже код не проверял. Просто показал как слушать события и обрабатывать несколько входных элементов. Вот специально для вас:

(function($) {
  $.fn.dropdown = function(options) {
    if (this.length > 1) {
      return this;
    }

    // Устанавливаем стандартные значения
    options = $.extend({/* defaults */}, options);
    var $tree = this;

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

    $tree
      .on('click', '.item', function(e) {
        e.stopPropagation();
        e.preventDefault();
        // Показываем дочернее дерево
      });
  }
})(jQuery);

Чем вам не угодил метод .on и зачем тут mousedown??

[egorinsk]

> Зачем тут mousedown

Возьмите, например, в своей любимой операционной системе, откройте меню или выпадающий список, затем щелкните где-то в стороне, и посмотрите, в какой момент оно закрывается — в момент нажатия или отпускания кнопки мыши. Чтобы событие срабатывало в момент нажатия кнопки мыши, надо использовать mousedown. Это относится ко всяким менюшкам, выпадающим спискам и прочим похожим на них элементам.

Click вообще плохо здесь подходит, так как он не сработает например, при перетаскивании. Получается, если вы используете click, ваш элемент работает криво и не во всех случаях, что производит на пользователя впечатление, что что-то сломалось. Потому надо использовать mousedown, чтобы не производить вречатления, что что-то сломалось.

Плюс, есть еще одна маленькая хитрость. Использование mousedown производит впечатление, что программа реагирует быстрее. Попробуйте, например, сделать табы (вкладки), реагирующие на click и на mousedown — те, которые реагируют на click производят впечатление, что компьютер тормозит. Попробуйте и посмотрите сами.

[Николай Васильчук]

Ну в случае с перетаскиванием, вынужден с вами согласиться. Во всех остальных случаях — нет.
Всё зависит от задачи. Я предпочитаю, чтобы приложение срабатывало на отпускание кнопки (мыши, клавиатуры).
В Ubuntu, например, долгое время был баг — комбинации клавиш Ctrl + key обрабатывались по нажатию, а не отпусканию, в связи с чем были проблемы с хоткеями типа Shift + Ctrl + key.

[Иван Трофимов]

Провёл небольшой опрос на работе, 0 человек из 10 заметили разницу между click и mousedown.
mousedown может и логичнее, по крайней мере в Ubuntu и Win реализованы именно так все менюшки, хотя разницы особой не вижу.

[Иван Трофимов]

egorinsk, индикацию загрузки и обработку ошибок умышленно не стал приводить здесь, чтобы не загромождать.

Answer 2

[egorinsk]

Хочу также заметить, вот такие вещи писать неправильно:

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

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

Comments

[Николай Васильчук]

<a href="#next" class="next">Next →</a>

$('.next').on('click', function(e) {
  e.preventDefault();
  Gallery.showNextImage();
});

Что вас смущает в этом коде? Почему это не ссылка? Какие основы HTML я не понимаю и почему это быдлокод?

[egorinsk]

Потому, что, если например щелкнуть по вашей якобы ссылке правой кнопкой, и выбрать «открыть в новом окне», то откроется та же самая страница. Ссылка (по определению) куда-то указывает, на какой-то URL. Куда указывает ваша ссылка? Что это за адрес — #? Можно ли ее отправить через IM?

Вы используете тег A, чтобы создать синюю подчеркнутую надпись. То, что она подчеркнута и даже то, что на нее можно нажать, не делает ее ссылкой. Понимание того, чем ссылка отличается от подчеркнутой надписи и от кнопки и есть понимание основ HTML. Поэтому я сделал вывод, что вы пока плохо знаете этот язык. Надеюсь, вы со временем изучите все его особенности.

[Николай Васильчук]

Загллянул к вам в профиль. Желаю вам успехов в изучении HTML.

[EugeneOZ]

Зачем вешать обработчик события на класс, если 1 элемент нужно ловить? #id

[Николай Васильчук]

EugeneOZ, а если на странице будет 2 таких элемента? jQuery плагин подразумевает, что его можно применить к нескольким контейнерам на странице.

Answer 3

[Enuriru]

Все достаточно просто:

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

Comments

[Иван Трофимов]

Да я так и сделал.

(function($) {

	//Стандартные настройки
	var defaults = {
		'jsonResult' : '/'
	};

	var methods = {
		// Инициализация
		init : function(params) {

			// Актуальные настройки при вызове
			var options = $.extend({}, defaults, params);

			// Инициализируем только один раз
			var init = $(this).data("dropdown");

			if (init) {
				return this;
			} else {
				//Записали информация о том что уже инициализирован
				$(this).data('dropdown', true);

				//Дорисовали всякие круглые уголочки и стрелочки
				$(this).children("a").prepend("<span class='left'></span><span class='right'></span>");
				$(this).children("ul").append("<li class='bottom_border'><span class='left'></span><span class='right'></span></li>");
				$(this).find("ul li").prepend("<span class='left'></span><span class='right'></span>");

				//События
				return this.bind("click.dropdown", function() {
				
				});
			}

		},
		// Клик по пункту выпадающего списка (если в родителе, то data_id = 0)
		select : function(data_id) {
			$.getJSON('/php/service.php', function(data) {

				var items = [];

				//Сформировали массив значений
				$.each(data, function(key, val) {
					items.push('<li data-id="' + key + '">' + val + '</li>');
				});
				
				//Записали в UL
				$(this).find("ul").html(items.join(''));

			});
		},
		// Показать/скрыть выпадающий список
		toggle : function() {
			$(this).find("ul").toggle();
		},
		// Скрыть выпадающий список
		hide : function(){
			$(this).find("ul").hide();
		},
		// Сломать всё нахрен
		destroy : function() {
			$(this).unbind(".dropdown");
		}
	};

	$.fn.dropdown = function(method, params) {

		if (methods[method]) {
			// если запрашиваемый метод существует, мы его вызываем
			// все параметры, кроме имени метода пойдут в метод
			// this так же перекочует в метод
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if ( typeof method === 'object' || !method) {
			// если первым параметром идет объект, либо совсем пусто
			// выполняем метод init
			return methods.init.apply(this, arguments);
		} else {
			// если ничего не получилось
			$.error('Метод "' + method + '" не найден в плагине jQuery.dropdown');
		}
	};

})(jQuery);

Не могу понять как именно в этом коде слушать события и как вызывать созданные методы именно для выбранного объекта(в нашем случае для #rayon, если вызываем так: $("#rayon").dropdown();).

[smileonl]

cbone можно использовать метод ON api.jquery.com/on/

Answer 4

[Николай Васильчук]

---

Answer 5

[Алик Добров]

А есть что нибудь в синтаксисе кроме.on чтобы инициализировать событие клик ?кто нибудь может знает?

Answer 6

[Иван Фролов]

можно подписать элемент на событие с помощью addEventListener или attachEvent (в старых IE, до 9 по-моему):

document.getElementById("idSelector").addEventListener("click", function(event){
//your code here
});

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