Binding functions to events in Jquery UI custom widget

Jquery UI allows you to extend the features of the default widgets using UI Widget factory. If offers safe way to bind and unbind events without impacting the other instances. Check out this jQuery UI Scrolltabs plugin that extends the default UI Tabs with scrollable tabs functionality, which is best suited for responsive and fluid layouts by keeping all tabs in single line & yet accessible/usable.

When a widget is extended, you cannot directly bind to the event names mentioned in the API documentation.

For example:
In default ui.tabs widget, you will bind to the tabs activation event through on 'tabsactivate'

$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );

This binding will not work with the custom widget. If your widget name is ui.scrollTabs, then the name of the same activate event will be emitted as scrolltabsactivate. So you have to bind it as shown below

$('.selector').on('scrolltabsactivate', 
    function (event: JQuery.Event, ui: JQueryUI.TabsActivationUIParams) => {
       this._animateToActiveTab(event);
});