Crear Tabs Jquery en Run-time

[Maxtp]

Necesito crear unos Tabs que cuando le de clic a una opcion de mi menu abra en un tab el contenido de la pagina.

los ejemplos q he visto muestran el div yo quiero q muestre una pagina en el Tab.Asi como lo hacen aqui [URL="http://www.ohspress.com/bpa_chicago/attractions.html"]http://www.ohspress.com/bpa_chicago/attractions.html[/URL]


Gracias por su ayuda

[maycolalvarez]

con jQuery UI lo puedes hacer, lo que hace es cargar el contenido en una tab nueva, via AJAX

[Maxtp]

ya descargue la libreria de jquery UI. pero no encuentr un ejemplo de como lo hace. ahi solo encuentro q el contenido q quiere cargar en un tab lo pone en un div. Pero yo quiero cargar una pagina no el contenido de un div.

[ApipeMc]

Segun la pagina que muestras el ejemplo. Los tabs son manejados con Jquery UI.
Si puedes explicar un poco mas sobre como quiere manejar la parte de tu menu con los tabs.
te podremos colaborar mejor.

[Maxtp]

Hola ApipeMc Gracias por el interes
Te explico.
Tengo uno menu lateral con varias opciones mas o menos asi

Código HTML:

<ul class="submenu">
<li><a href="#" title="content" id="open-computadoras">Computadoras</a></li>
<li><a href="#" title="">Monitores</a></li>
<li><a href="#" title="">Impresoras</a></li>
</ul>
 

Menu Lateral Contenido Tabs
Menu Principal
-Monitores - Link monitores.php
-Impresoras
Etc. Al dar clic en una opcion del menu quiero que me cree un tab y dentro tab estara lo que tengo en monitores.php
con este codigo ya logre que al dar click al menu me cree un tab me muestre el contenido

Código Javascript:

jQuery(document).ready(function () {
            var $tabs = jQuery("#tabs").tabs({
                tabTemplate: "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close'>Cerrar</span></li>",
                ajaxOptions: {
                    error: function(xhr, status, index, anchor) {
                        jQuery(anchor.hash).html("Error al cargar la pagina. Intentar de nuevo");
                    }
                }
            }).bind("tabsselect",function(event,ui){
                selectedTab = ui.index;
                selectedTabPanelId = ui.panel.id;
            });
            $( "#open-computadoras" ).live( "click", function() {
                $tabs.tabs('add', "main_monitor.php", "Monitores");
                $tabs.tabs('select', $tabs.tabs('length')-1);*/
                $tabs.tabs('load', $tabs.tabs('length')-1);
            });
        $( "#tabs span.ui-icon-close" ).live( "click", function() {
            var index = $( "li", $tabs ).index( $( this ).parent() );
            $tabs.tabs( "remove", index );
        });
        });
 

ahora lo que quiero es cerrar todos los tabs cuando cambie de categoria. es decir que cuando este navegando por el menu inventario los tabs se agregen. pero cuando cambia a consumibles se cierren todos los tab y crear uno nuevo con el contenido del link q seleccione.

ejemplo

Menu
Inventario

-Impresoras
-Computadoras

Consumibles
- Despacho

Un poco complicado

[ApipeMc]

Que pena la demora.
Yo aria lo siguiente. cerraria todo los tabs con esta funcion

Código Javascript:

$('.ui-tabs-nav').each(function() { 
var $tabs = $(this); 
   for (var i = 0, tabs = $tabs.tabs('length'); i < tabs; i++) {
        $tabs.tabs('remove', i); 
   }); 
});
 

Y crearia una funcion con ella llamado de los tabs que necesitas en cada submenu. o menu.
segun como lo vaya hacer y podri la funcion en

Código HTML:

<ul class="submenu">
    <li><a href="javascript:tufuncion()"  id="open-computadoras">Computadoras</a></li>
    <li><a href="javascript:tufuncion()" >Monitores</a></li>
    <li><a href="javascript:tufuncion()" >Impresoras</a></li>
    </ul>
 

Espero que te sirva.