jQuery UI Tabs is a user interface component that allows you to organize content into multiple tabs, presenting them in a visually appealing and space-efficient manner. Users can switch between tabs to view different sets of content without navigating to separate pages.
Installation
To use jQuery UI Tabs, you need to include the jQuery library and the jQuery UI library in your HTML file.
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include jQuery UI library -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Basic Usage
To create tabs, you need to structure your HTML with a container element for the tabs and content divs for each tab's content.
You can customize the appearance and behavior of tabs using various options and event handlers.
$("#tabs").tabs({
active: 1, // Set the initially active tab
collapsible: true, // Allow closing active tab
event: "mouseover" // Change tab on mouseover event
});
AJAX Tabs
You can load tab content dynamically from external sources using AJAX.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Tabs Example</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include jQuery UI library -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
// Initialize the tabs
$("#tabs").tabs({
collapsible: true, // Allow closing active tab
event: "mouseover" // Change tab on mouseover event
});
});
</script>
</head>
<body>
<h1>jQuery UI Tabs Example</h1>
<!-- Tabs container -->
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">
<p>This is the content of Tab 1.</p>
</div>
<div id="tab2">
<p>This is the content of Tab 2.</p>
</div>
<div id="tab3">
<p>This is the content of Tab 3.</p>
</div>
</div>
</body>
</html>
Conclusion
jQuery UI Tabs provide an efficient way to organize and present content, offering a smooth user experience by allowing users to switch between different sections of information without requiring separate page loads. The flexibility to customize appearance, handle events, and even nest tabs makes them a versatile choice for enhancing your web application's layout and usability.
Browser View