How do I detect a tab change event in XenForo.Tabs?

[KenSmith]

In an addon I am developing, I'm using the XenForo.Tabs feature in one of my templates.
One of the tabs includes a Google map, and I want to create the map only if the user clicks on that particular tab.

I can't figure out how to fire my custom Javascript when the visitor clicks on the Map tab.
It seems like I should be able to use the tabsactivate event documented in Jquery UI here:
http://api.jqueryui.com/tabs/#event-activate

As a way to illustrate my issue, if I wanted to do something similar on the member view page of a stock install of XenForo:

If I edit the 'member_view' template and add this to the top:

<script type="text/javascript">
$(function() {
   $('.Tabs').on('tabsactivate', function() { alert('User clicked a tab'); });
});
</script>

Why don't I get an alert on a page like
http://mysite.com/members/1/
when I click another tab like 'Recent Activity'?

 

[Jeremy]

If you are adding your own link into the navigation bar, you should add your own class (Map or MapOverlay for example which would follow XenForo practices) and use XenForo.register() to bind your event to them.

The links in the navigation bar are not actual tabs.

 

[KenSmith]

I'm not talking about the navtab links, but instead the panes inside the member view screen (or a custom template in my actual case.)
These tabs:

 

[Dan]

http://api.jqueryui.com/tabs/#event-activate won't work because xf doesn't use jquery ui
Try http://jquerytools.org/demos/tabs/index.html

 

[KenSmith]

Ah, I've been wading through the wrong stuff all along!
Until now, I wasn't even aware these were different libraries.
Thanks for turning on the lightbulb for me.

 

[KenSmith]

Referring to the right docs makes all the difference.

With JQuery Tools, this works:

  $('.Tabs').on("onClick", function(event, tabIndex) { alert('User clicked tab ' + tabIndex); });

 

[Jeremy]

You should use XenForo.register to insert your code into the XenForo scope.

 

[KenSmith]

Thanks Jeremy...
This works, and I assume it looks OK?

!function($, window, document, _undefined)
{
   XenForo.ActivateMapTab = function($tabs)
   {
     $tabs.on('onClick', function(event, tabIndex)
     {
       if (tabIndex == 4) {
         alert('ActivateMapTab code here');
       }
     });
   }

   XenForo.register('.Tabs', 'XenForo.ActivateMapTab');
}
(jQuery, this, document);

 

[Jeremy]

I'm not a master it XenForo JavaScript, but I see nothing glaringly wrong.