<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Simple manipulation</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.10.2.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script>* <link rel="stylesheet" href="../demos.css"> <style> #tabs { margin-top: 1em; } #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } #add_tab { cursor: pointer; } </style> <script> $(function() { var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>"; var tabCounter = 1; var tabs = $( "#tabs" ).tabs(); // actual addTab function: adds new tab using the input from the form above function addTab() { var label = tabCounter; var id = "tabs-" + tabCounter; var li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ); tabs.find( ".ui-tabs-nav" ).append( li ); tabs.append( "<div id='" + id + "'></div>" ); $("#"+id).load('test.html'); tabs.tabs( "refresh" ); tabCounter++; } // addTab button: just opens the dialog $( "#add_tab" ).click(function() { addTab(); }); // close icon: removing the tab on click tabs.delegate( "span.ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); }); }); </script> </head> <body> <button id="add_tab">Add Tab</button> <div id="tabs"> <ul> </ul> </div> </body> </html>