Foros del Web » Programando para Internet » Jquery »

Crear Tabs Jquery en Run-time

Estas en el tema de Crear Tabs Jquery en Run-time en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/06/2011, 17:08
Avatar de Maxtp  
Fecha de Ingreso: abril-2008
Ubicación: Quintana Roo
Mensajes: 15
Antigüedad: 16 años
Puntos: 0
Crear Tabs Jquery en Run-time

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
  #2 (permalink)  
Antiguo 28/06/2011, 05:52
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Crear Tabs Jquery en Run-time

con jQuery UI lo puedes hacer, lo que hace es cargar el contenido en una tab nueva, via AJAX
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 28/06/2011, 07:57
Avatar de Maxtp  
Fecha de Ingreso: abril-2008
Ubicación: Quintana Roo
Mensajes: 15
Antigüedad: 16 años
Puntos: 0
Respuesta: Crear Tabs Jquery en Run-time

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.
  #4 (permalink)  
Antiguo 28/06/2011, 12:27
Avatar de ApipeMc  
Fecha de Ingreso: septiembre-2010
Ubicación: Medellín, Antioquia, Colombia
Mensajes: 76
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Crear Tabs Jquery en Run-time

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.
  #5 (permalink)  
Antiguo 28/06/2011, 12:58
Avatar de Maxtp  
Fecha de Ingreso: abril-2008
Ubicación: Quintana Roo
Mensajes: 15
Antigüedad: 16 años
Puntos: 0
Respuesta: Crear Tabs Jquery en Run-time

Hola ApipeMc Gracias por el interes
Te explico.
Tengo uno menu lateral con varias opciones mas o menos asi
Código HTML:
Ver original
  1. <ul class="submenu">
  2. <li><a href="#" title="content" id="open-computadoras">Computadoras</a></li>
  3. <li><a href="#" title="">Monitores</a></li>
  4. <li><a href="#" title="">Impresoras</a></li>
  5. </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:
Ver original
  1. jQuery(document).ready(function () {
  2.             var $tabs = jQuery("#tabs").tabs({
  3.                 tabTemplate: "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close'>Cerrar</span></li>",
  4.                 ajaxOptions: {
  5.                     error: function(xhr, status, index, anchor) {
  6.                         jQuery(anchor.hash).html("Error al cargar la pagina. Intentar de nuevo");
  7.                     }
  8.                 }
  9.             }).bind("tabsselect",function(event,ui){
  10.                 selectedTab = ui.index;
  11.                 selectedTabPanelId = ui.panel.id;
  12.             });
  13.             $( "#open-computadoras" ).live( "click", function() {
  14.                 $tabs.tabs('add', "main_monitor.php", "Monitores");
  15.                 $tabs.tabs('select', $tabs.tabs('length')-1);*/
  16.                 $tabs.tabs('load', $tabs.tabs('length')-1);
  17.             });
  18.         $( "#tabs span.ui-icon-close" ).live( "click", function() {
  19.             var index = $( "li", $tabs ).index( $( this ).parent() );
  20.             $tabs.tabs( "remove", index );
  21.         });
  22.         });

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
  #6 (permalink)  
Antiguo 30/06/2011, 06:30
Avatar de ApipeMc  
Fecha de Ingreso: septiembre-2010
Ubicación: Medellín, Antioquia, Colombia
Mensajes: 76
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Crear Tabs Jquery en Run-time

Que pena la demora.
Yo aria lo siguiente. cerraria todo los tabs con esta funcion
Código Javascript:
Ver original
  1. $('.ui-tabs-nav').each(function() {
  2. var $tabs = $(this);
  3.    for (var i = 0, tabs = $tabs.tabs('length'); i < tabs; i++) {
  4.         $tabs.tabs('remove', i);
  5.    });
  6. });
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:
Ver original
  1. <ul class="submenu">
  2.     <li><a href="javascript:tufuncion()"  id="open-computadoras">Computadoras</a></li>
  3.     <li><a href="javascript:tufuncion()" >Monitores</a></li>
  4.     <li><a href="javascript:tufuncion()" >Impresoras</a></li>
  5.     </ul>
Espero que te sirva.

Etiquetas: javascript, tabs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:06.