使用JQuery的全局事件注册表

时间:2009-08-06 11:25:03

标签: jquery user-interface events

我正在使用JQuery开发一个基于AJAX的Web应用程序,其中包含许多GUI组件。有些应用程序状态会影响所有GUI组件。

E.g。当执行AJAX请求时,我希望我的工具栏按钮“冻结”,并且在请求完成之前不会触发任何单击事件。这同样适用于我的滑块控件和一些可拖动的GUI组件。

为了简化应用程序状态之间的转换,我想开发一个提供以下功能的全局事件注册表:

  • 每个gui组件都可以在注册表中注册,删除,触发其事件
  • 暂停事件的能力(即在我的应用状态处于特定状态时取消绑定它们然后自动重新绑定它们)
  • 将应用状态与gui行为匹配(例如,在绘图模式下,只有“退出绘图模式”按钮处于活动状态)

有没有人知道可以帮助我的jQuery插件?

1 个答案:

答案 0 :(得分:3)

我将处理注册,触发和解除自定义事件的绑定。

jQuery具有注册,绑定和解除绑定到自定义事件所需的所有工具。

下面是将两个div连接到名为customAjaxStart的自定义事件的示例。然后我可以触发这个函数,两个处理程序都会被调用。

快速演示Here - 启用firebug / ie8控制台。

e.g

$( 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'); 
});

以上面的例子为例,我将从全局ajaxStart触发customAjaxStart。无论何时进行xhr调用,都会自动触发任何侦听器(非常适合禁用小部件或显示加载gif等),例如

$.ajaxStart( function(){

    $.event.trigger('customAjaxStart');

});