jquery 插件添加事件监听器

Question

我有一个我创建的 jquery 插件，它在类似界面的选项卡中显示和隐藏内容。我想要的是在显示某些内容时触发一个事件，然后我可以在我的源代码中侦听，并基于此触发一个事件是否可能？

这是我的插件，

$.fn.appsTabs = function(options){

  // These are the defaults.
  var settings = $.extend({
    // These are the defaults.
    selected: "home"
  }, options );

  // Set Active
  $(this).find('.pops-tabs-navigation li[data-route="'+settings.selected+'"]').addClass('active');

  // Hide All Boxes and show first one
  $(this).find('.apps-tabs-content .pops-tab-content').addClass('cloak');
  $(this).find('.pops-tabs-content .pops-tab-content#content-'+settings.selected).removeClass('cloak');
  // Get Clicks on Li in Navigation
  $(this).find('.apps-tabs-navigation li').click(function(){
    if($(this).hasClass('active') == false) {
      // Get ID of Tab
      id = $(this).attr('id');
      tabid = 'content-'+id;

      // Set Active
      $(this).parent('.apps-tabs-navigation').find('li').removeClass('active');
      $(this).addClass('active');

      // Hide all boxes
      $(this).parent('.apps-tabs-navigation').parents('.pops-tabs').find('.pops-tabs-content .pops-tab-content').addClass('cloak');
      $(this).parent('.apps-tabs-navigation').parents('.pops-tabs').find('.pops-tabs-content #'+tabid).removeClass('cloak');
    }
  });
}

是否可以向原型添加一些东西并在我的主要应用程序代码中监听它？

Answer 1

在你的插件代码中，你可以触发自定义事件并在页面中监听它javascript:

插件

// Show your element (example)
$('#myElement').show();
// Trigger custom event
$(document).trigger('myCustomPluginEvent');

页数

// Event listener for custom event 'myCustomPluginEvent'
$(document).on('myCustomPluginEvent', function() {
   // Do something when custom event occurs
});

jquery 插件添加事件监听器

jquery plugin add event listener

javascript

jquery

jquery-plugins