Dynamic jquery-ui tab

by JMMS_85

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div class="menu">
<a title="Option 1" href="http://jsfiddle.net/"><span> Option 1</span></a>
<a title="Option 2" href="http://jsfiddle.net/"><span> Option 2</span></a>
<a title="Option 3" href="http://jsfiddle.net/"><span>Option 3</span></a>
</div>							
<div id="tabs" class="contenido_main">
<ul>
</ul>
</div>

<div  class="oculto" id="dialog-message" title="Número máximo de Pestañas">
<p>
Número máximo de pestañas permitidas.
</p>
<p>
<b>Por favor cierre alguna pestaña para continuar.</b>
</p>
</div>

CSS

.oculto{
    display: none;
}
.contenido_main{
	margin:20px;
	min-height: 65vh;
}

#tabs{
	margin:1px;
	padding: 1px;
	font-size: 15px;
}
#tabs ul{
	min-height: 2em;
}
#tabs li a{
	padding: 4px;

}

#dialog-message{
	font-size: 15px;
	margin-top: 10px;
}
#dialog-message  p b{
	margin-top: 20px;
	display: inline-block;
}

JavaScript

$(document).ready(function () {
       $("#tabs").tabs();
       var tabCounter = 1;
       var cont =1;
	           var num_tabs = $("#tabs ul li").length +1,
               tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
				tabs = $( "#tabs" ).tabs();

 	        // actual addTab function: adds new tab using the input from the form above
			function addTab() {
				var label = tabTitle || "Tab " + tabCounter,
				id = "tabs-" + tabCounter,
				li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
				tabContentHtml = "Tab " + tabCounter + " content.";
				tabs.find( ".ui-tabs-nav" ).append( li );
				//tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
				tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
				tabs.tabs( "refresh" );
				cont++;
			}

			 // 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" );
				cont--;
			});

			tabs.bind( "keyup", function( event ) {
				if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
					var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
					$( "#" + panelId ).remove();
					tabs.tabs( "refresh" );
				}
			});

     $("a").click(function(event) {
    	event.preventDefault(); //cancela el comportamiento por defecto
		
    	if(cont<=9)
    	{	
    		tabTitle = $(this).attr("title"),
    		addTab();
			$("#tabs-"+tabCounter).load($(this).attr('href'));
        	
        	tabCounter++;
        	$("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
    	}
    	else
    	{
 			$( "#dialog-message" ).dialog({
 				modal: true,buttons: {
 					Ok: function() {
 						$( this ).dialog( "close" );
 					}
 				}
 			});    
 		}
  ...