tabs de bootstrap conversacion


Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Miércoles 13 Ene 2016 16:34

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Buenas,
Resulta que he creado un “TAB” del bootstrap.
(Son como unas lenguetas, donde cada una de ellas tiene una sección diferente)

Me gustaría hacer un botón, para que se mostrara un TAB determinado (apartado) al pulsarlo.

1. Es posible mediante html o javascript?
2. Alguien me podría poner un ejemplo?
3. Gracias.

Ejemplo.
1. Le doy al “boton1”, y me muestra el “tab1”
2. Le doy al “boton2”, y me muestra el “tab2″

Un amigo me dió unas indicaciones, pero no me acaban de funcionar, cuando doy al botón, no se me abre el tab…
Alguien podría ayudarme?
Muchas gracias.

Hago un copy del código que tengo…

Código HTML:
Ver original
<ul id=”tab” class=”nav nav-tabs” role=”tablist”>
<li>
<a id=”tab1-tab” aria-controls=”tab1″ data-toggle=”tab” role=”tab” href=”#tab1″ aria-expanded=”true”>tab1</a>
</li>
<li>
<a id=”tab2-tab” aria-controls=”tab2″ data-toggle=”tab” role=”tab” href=”#tab2″ aria-expanded=”true”>tab2</a>
</li>
<li>
<a id=”tab3-tab” aria-controls=”tab3″ data-toggle=”tab” role=”tab” href=”#tab3″ aria-expanded=”true”>tab3</a>
</li>
</ul>

Contenido tab1
Contenido tab2
Contenido tab3

</div>

Código Javascript:
Ver original

var $tabButtons = $(‘.buttons-tab-nav > a’); // Aquí tenemos almacenados los tres botones a
var $tabsLinks = $(“#tab li a”); // Obtenemos todos los tag a que lanzan la apertura de un panel tab
var $tabsPanels = $(“#tabContent > div”); // Estos son los paneles que contienen el contenido que están relacionados con cada tab, podemos relacionarlos nosotros mediante el atributo de a aria-controls

// Capturamos el evento click de todos los a(botones)
$tabButtons.on (‘click’, function (event) {
event.preventDefault();

// Antes de hacer nada, eliminamos la clase active de cualquier elemento a o div que esté dentro de $tabsLinks o $tabsPanels
// es algo drástico y se puede optimizar almacenando en una variable el ultimo elemento activo
// por rapidez lo hago así
$tabsLinks.removeClass(“active”);
$tabsPanels.removeClass(“active”);

// Obtenemos el atributo tab-to-open del elemento a que ha sido pulsado.
// Ya tenemos el div que vamos a mostra, en este caso puede ser: tab1, tab2 o tab3
var pressedElement = $(this).attr (‘tab-to-open’);

// Entonces, ahora solo buscamos el div que tiene ese id y le añadimos la clase active
// y luego, se la añadimos también al elemento a que ha sido pulsado.
// El añadirle ahora la clase al elemento a en vez de hacerlo antes es por hacerlo mas legible el código
$(“#” + pressedElement).addClass (“active”); // Activamos pestaña
$(“#” + pressedElement + “-tab”).addClass (“active”); // Activamos panel de pestaña
});

Volver arriba
Ver perfil del usuario Enviar mensaje privado
unsigned char*
Usuario Activo

Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Jueves 14 Ene 2016 02:21

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando
Código:
$(‘#tab3’).tab(‘show’);

O mediante propiedades “data” pero no te “ilumina” la pestaña activa:

Código:
<a data-toggle=”tab” href=”#tab3″>Mostrar TAB3</a>

++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>–.<–.>—–.–.+++++++.———.-.>>++.<<-.+++++.——-.<-.>>++.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
raulgs82

Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Jueves 14 Ene 2016 10:49

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Buenas, soy muy novato, podrías echarme un cable?

A ver, este sería por ejemplo mi tab.

Código:

I’m in Section 1.

Howdy, I’m in Section 2.

</div>
</div>
</div>
</div>
</div>

y este sería el botón, que me gustaría que fuera al tab “panel-566127”, por poner un ejemplo.

Código:
<a href=”AQUI LA URL”><button><font color=”#cc0000″><strong>AQUI EL TEXTO</strong></font></button>

LA PETICIÓN ES:
– Como debería configurar este botón, para que cuando pulse sobre él, me dirija y me abra el TAB?
– He de incluir alguna secuencia addicional?

Muchas gracias.[/code]

Volver arriba
Ver perfil del usuario Enviar mensaje privado
unsigned char*
Usuario Activo

Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Viernes 15 Ene 2016 05:07

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Si lo que quieres es redirigir a otra página y en esa página abrir una pestaña en concreto hasta donde yo se tendrías que contemplarlo en la página hacia donde rediriges… pasando algún argumento por URL o mirando (si el usuario no lo tiene bloqueado) de que página viene…

Si lo que quieres es que dentro de la misma página tener un boton que abra esa pestaña en concreto… harías algo como:

usar <button> es redundante en este caso… y bueno en general si usas bootstrap tienes las clases css “btn btn-x”…

Código:
<a data-toggle=”tab” href=”#panel-566127″ class=”btn btn-danger”>AQUI EL TEXTO</a>

O algo como esto…

Código:
<a data-open-tab=”#panel-566127″ href=”#” class=”btn btn-danger”>AQUI EL TEXTO</a>

$(document).on(‘click’, ‘a’, function(ev){
var $this = $(this);
if (‘open-tab’ in $this.data())
{
var tabid = $this.data(‘open-tab’);
$(tabid).tab(‘show’);
ev.preventDefault();
}
});


++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>–.<–.>—–.–.+++++++.———.-.>>++.<<-.+++++.——-.<-.>>++.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
raulgs82

Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Viernes 15 Ene 2016 11:03

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando
unsigned char* escribió:
Si lo que quieres es redirigir a otra página y en esa página abrir una pestaña en concreto hasta donde yo se tendrías que contemplarlo en la página hacia donde rediriges… pasando algún argumento por URL o mirando (si el usuario no lo tiene bloqueado) de que página viene…

Si lo que quieres es que dentro de la misma página tener un boton que abra esa pestaña en concreto… harías algo como:

usar <button> es redundante en este caso… y bueno en general si usas bootstrap tienes las clases css “btn btn-x”…

Código:
<a data-toggle=”tab” href=”#panel-566127″ class=”btn btn-danger”>AQUI EL TEXTO</a>

O algo como esto…

Código:
<a data-open-tab=”#panel-566127″ href=”#” class=”btn btn-danger”>AQUI EL TEXTO</a>

$(document).on(‘click’, ‘a’, function(ev){
var $this = $(this);
if (‘open-tab’ in $this.data())
{
var tabid = $this.data(‘open-tab’);
$(tabid).tab(‘show’);
ev.preventDefault();
}
});

Buenas,
He probado la primera opción que me has dado:

Código:
<a data-toggle=”tab” href=”#panel-566127″ class=”btn btn-danger”>AQUI EL TEXTO</a>

Es justo lo que necesito, solo tengo un pequeño problema.
” La Pestaña o TAB de destino, NO SE ILUMINA”
Es decir, sale el texto que tengo en el TAB de destino, pero no se ilumina el título de la pestaña.

Por lo que respecta al código Javascript, no me funciona.
Me sale el botón, le clico, y no hace nada.
He instalado el plugin de javascript para wordpress, y nada, no consigo que haga ninguna acción.

Muchas gracias por tu tiempo.
Saludos.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
unsigned char*
Usuario Activo

Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Sábado 16 Ene 2016 03:34

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Si, la primera opción no “ilumina” la pestaña seleccionada… la segunda opción igual me equivoque… no probé código xDD

Pero bueno ahora si y… tienes dos opciones:

1. No tienes jQuery cargado al momento de llamar al script:

Código:
<a onClick=”abrirTab(‘#tabs-155176′,’#panel-566127’)” href=”#” class=”btn btn-danger”>AQUI EL TEXTO</a>

function abrirTab(tabid, tabref)
{
$(tabid+” a[href='”+tabref+”‘]”).tab(‘show’);
}

2. Puedes poner el script después de que cargue jQuery:

Código:
<a data-open-tab=”#tabs-155176″ href=”#panel-566127″ class=”btn btn-danger”>AQUI EL TEXTO</a>

$(document).on(‘click’, ‘a’, function(ev){
var $this = $(this);
if (‘openTab’ in $this.data() && $this.attr(‘href’))
{
var tabid = $this.data(‘openTab’);
var tabref = $this.attr(‘href’);
$(tabid+” a[href='”+tabref+”‘]”).tab(‘show’);
ev.preventDefault();
}
});

** Si puedes usa la segunda opción Guiño

#tabs-15517 –> es el id que hace referencia al contenedor de los enlaces de las pestañas
#panel-566127 –> es el id de la pestaña en concreto
$(tabid+” a[href='”+tabref+”‘]”) se traduce en $(‘#tabs-15517 a[href=’#panel-566127’]”) que viene a ser un objeto jQuery que hace referencia al enlace que muestra la pestaña que se quiere mostrar.


++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>–.<–.>—–.–.+++++++.———.-.>>++.<<-.+++++.——-.<-.>>++.

Volver arriba
Ver perfil del usuario Enviar mensaje privado
raulgs82

Registrado: 13 Ene 2016
Mensajes: 8

Mensaje Publicado: Miércoles 20 Ene 2016 10:43

Título del mensaje: Bootstrap TABS Boton->abrir TAB

Responder citando

Buenas,
Con la primera forma me ha salido.
Con la segunda no!
Qué debería hacer para que la segunda forma me funcionara?

Por cierto, para no tener que escribir siempre el script, me recomiendas que lo haga en una hoja a parte que se llama scripts.php, y de esta forma al inicio de cada página cargue todos los scripts de golpe? con un include.

Gracias!!!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s