Глобальный реестр событий с JQuery

Question

Я занимаюсь разработкой веб-приложения на основе AJAX в JQuery, которое включает в себя множество компонентов графического интерфейса. Существуют некоторые состояния приложений, которые влияют на все компоненты графического интерфейса.

например. пока выполняется AJAX-запрос, я хочу, чтобы кнопки на панели инструментов «зависали» и не вызывали никаких событий щелчка, пока запрос не завершится. То же самое относится и к моему ползунку управления и некоторые перетаскиваемые компоненты графического интерфейса.

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

• каждый компонент графического интерфейса может регистрировать, удалять, запускать свои события в реестре
• возможность приостановить события (т.е. отменить их привязку, когда мое приложение находится в определенном состоянии, а затем автоматически связать их)
• сопоставлять состояния приложения с поведением графического интерфейса (например, в режиме рисования активна только кнопка «Выйти из режима рисования»)

Кто-нибудь знает о плагинах jQuery, которые могут мне помочь?

Answer 1

Я займусь регистром, запуском и отменой привязки пользовательских событий.

jQuery имеет все инструменты, необходимые для регистрации, привязки и отмены привязки к пользовательским событиям.

Ниже приведен пример подключения двух div к пользовательскому событию customAjaxStart. Затем я могу вызвать эту функцию, и оба обработчика будут вызваны.

Quick Demo Здесь - Включите консоль firebug / ie8.

1011 * например *

$( function() {

  $('#div1').bind('customAjaxStart', function(){
    console.log('#div1 ajax start fired');
    $(this).fadeTo('slow', 0.3);
  });

  $('#div2').bind('customAjaxStart', function(){
    console.log('#div1 ajax start fired');
    $(this).fadeTo('slow', 0.3);
  });

  //fire the custom event
  $.event.trigger('customAjaxStart');

  //unbind div1 from custom event
  $('#div1').unbind('customAjaxStart');

  //again trigger custom event - div1 handler will not fire this time
 $.event.trigger('customAjaxStart'); 
});

Взяв вышеизложенное в качестве примера, я бы вызвал customAjaxStart из глобального ajaxStart. Любые слушатели будут запускаться автоматически всякий раз, когда собирается сделать вызов xhr (идеально для отключения ваших виджетов или показа загрузочного GIF и т. Д.), Например,

$.ajaxStart( function(){

    $.event.trigger('customAjaxStart');

});