jQuery Tabbed Interface With Dynamic Closeable Tabs - Dynatabs

Dynatabs is a small jQuery plugin that allows you to organize a set of DIVs to a tabbed interface with dynamic closeable tabs.

Features:

• Support of Tabs with Close Buttons
• Support of Tabs with close confirmation & custom confirm message
• Add Dynamic New Tabs Using Ajax Request or Static HTML
• Support of Nested Tabs
• Cross browser

You might also like:

• Flexible-jQuery-Tabbed-Interface-Plugin-SmartTab
• Tabbed Content Slider Plugin with jQuery and XML - tNews
• Google Play Tabbed Navigation with jQuery and CSS3
• Simple jQuery Tab Navigation Menu Plugin - simpleTab
• Android-Like jQuery Tab Navigation Plugin - ShiftyNav
• Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent
• Easy & Animated jQuery Tabbed Content Plugin - Tabulous

Basic Usage:

1. Load the latest version of jQuery javascript library on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Load the jQuery Dynatabs Plugin files on the web page, after jQuery

<link type="text/css" rel="stylesheet" href="tabs.css"></link>
<script type="text/javascript" src="tdi.tabs.js"></script>

3. Create the html for your tabbed content

<div id="closabletabs"> 
<!-- Tab Headers Start -->
<ul class="tabs" id="closabletab1">
<li><a href="#tabview1">Tab 1</a></li>
<li><a href="#tabview2">Tab 2</a></li>
<li><a href="#tabview3">Tab 3</a></li>
</ul>
<!-- Tab Headers End --> 
<!-- Tab Body Start -->
<div class="tabcontents" id="closabletabbody1">
<div id="tabview1"> ... </div>
<div id="tabview2"> .... </div>
<div id="tabview3"> ... </div>
</div>
<!-- Tab Body End --> 
</div>

4. Call the plugin with options

<script type="text/javascript">
$(document).ready(function() {
	
$("#closabletab1").dynatabs({
tabBodyID : "closabletabbody1",
showCloseBtn: true
});
});

</script>

---

This awesome jQuery plugin is developed by dazzlers. For more Advanced Usages, please check the demo page or visit the official website.