jQuery Tabbed Interface With Dynamic Closeable Tabs - Dynatabs

jQuery Tabbed Interface With Dynamic Closeable Tabs - Dynatabs
File Size: 46.9KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.