/ / link ad new jquery tab y especifique el título de la pestaña y ajax url para cargar - jquery-ui, jquery

Enlace la nueva pestaña de jquery y especifique el título de la pestaña y ajax url para cargar - jquery-ui, jquery

He mirado por todas partes para esto. ¿Cómo puede un enlace especificar el título de una pestaña y la URL para cargar? Algo como:

<a href="#" onclick="createNewTab("my tab title","","externalfile.html")">Create new tab dynamically</a>

¿Y cómo puedo cerrar la pestaña?

Lo más cercano que encontré es http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html Pero prefiero usar jQuery

Gracias

ACTUALIZAR

Encontré jeasyui y parece muy simple pero estoy teniendo algunos problemas. Heres mi código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%; overflow: hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

<script type="text/javascript" src="jeasyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>

<script type="text/javascript">
function open1(title,plugin){
if ($("#tt").tabs("exists",title)){
$("#tt").tabs("select", title);
} else {
$("#tt").tabs("add",{
title:title,
href:plugin,
closable:true,
extractor:function(data){
var tmp = $("<div></div>").html(data);
data = tmp.find("#content").html();
tmp.remove();
return data;
}
});
}
}
</script>
</head>

<body class="easyui-layout" style="text-align:left">
<div region="north" border="false" style="background:#666;text-align:center">
<div id="header-inner">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td rowspan="2" style="width:20px;">
</td>
<td style="height:52px;">
<div style="color:#fff;font-size:22px;font-weight:bold;">

<a href="/index.php" style="color:#fff;font-size:22px;font-weight:bold;text-decoration:none">TEST</a>
</div>
</td>
<td style="padding-right:5px;text-align:right;vertical-align:bottom;">
</td>
</tr>
</table>
</div>

</div>

<div region="west" border="false" split="true" title="Menu" style="width:250px;padding:5px;">
<ul class="easyui-tree">
<li iconCls="icon-base"><span>Base</span><ul>
<li iconCls="icon-gears"><a href="#" onclick="open1("test","demo.php")">test</a></li>
<li iconCls="icon-gears"><a href="#" onclick="open1("test1","demo.php")">test1</a></li>
<li iconCls="icon-gears"><a href="#" onclick="open1("test2","demo.php")">test2</a></li>
<li iconCls="icon-gears"><a href="#" onclick="open1("test3","demo.php")">test3</a></li>
</ul>
</div>

<div region="east" border="false" split="true" title="Live " style="width:250px;padding:5px;">
<h1>Hello</h1>
</div>

<div region="center" border="false">
<div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
<div title="Welcome" href="dashbord.php"></div>
</div>
</div>
</body>
</html>

Agrega una nueva pestaña con un título pero no carga la URL (demo.php)

Respuestas

1 para la respuesta № 1

Utilice jQuery UI !!!

http://jqueryui.com/demos/tabs/#manipulation