jQuery UI Tabs create Event

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Tabs widget is used to create a single content area with multiple panels that are associated with a header in a list.

The jQuery UI Tabs create event is used to trigger when the tabs widget is created. The ui.tab and ui.panel object will be empty if the tabs are collapsed.

The tabs create event accepts 2 values that are listed below.

• event: It represents the event for the tabs widget.
• ui: It is of an object type, and contains the following values:
  • tab: It represents the active tabs.
  • panel: It represents the active panel.

Syntax:

Initialize the tabs with the create callback.

$( ".selector" ).tabs({
 create: function( event, ui ) {}
});

Bind an event listener to the tabscreate event.

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

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: This example describes the uses of the jQuery UI Tabs create events.

Output:

👁 Image

Reference: https://api.jqueryui.com/tabs/#event-create