Modificando Tabs en Foundation

Clase 20 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Usando un poco de JavaScript vamos a crear una navegación fluida con los tabs

David Camacho

student•

Para esta clase queremos que al hacer click en el submenu del Lineup nos dirija al dia correspondiente, para ello debemos tener en cuenta dos actividades:

1) Obtener los datos cuando hacemos click en el submenu.

2) Activar el panel de acuerdo al submenu correspondiente.

Para empezara resolver el problema vamos a ir al index.html y en la parte del submenu le vamos a agregar el atributo data-toggle-dia="--" y le pasamos como valor el id de cada uno de los paneles (data-toggel-dia no es algo de foundation, es algo que estamos creando nosotros)

Ahora vamos a ir a app.js (es un archivo que nos da Foundation para agregar nuestro codigo JS, este archivo se encuentra dentro de la carpeta js).. Como podemos ver Foundation utiliza jQuery. Entonces vamos a utilizar la variable Pesos $ y vamos a indicarle que queremos obtener todos los atributos que tengan data-toggle-dia:

$('[data-toggle-dia]')

Y que queremos hacer? Queremos que cuando hagamos click en alguno de ellos, suceda algo..

$('[data-toggle-dia]').click()

Y el parametro que recibe la funcion click de jQuery es una funcion, le tenemos que pasar una funcion que se va a ejecutar cuando hagamos click

$('[data-toggle-dia]').click(function(){

...

})

$('[data-toggle-dia]').click(() => {

... //Es la misma funcion de arriba pero con el nuevo estandar de JavaScript (arrow functions)

}

Esa funcion podemos colocarle un nombre, siempre es una buena practica colocarle nombre a las funciones, pero en este caso como es una funcion sencilla pues podemos dejarla anonima

Esta funcion va a recibir el parametro event (ev), que contiene todos los datos del evento, como donde se hizo click, etc..

En nuestro caso queremos obtener los datos de donde se hizo click, Viernes, Sabado o Domingo, para ello vamos a guardar en una variable (var / const) const para el nuevo standar de ecmascript..

var panel = $(this).data()

this va a ser el elemento donde hicimos click sea viernes, sabado o domingo..

Y para acceder al atributo usamos la funcion data('--') pasandole por string el atributo al cual queremos acceder, pero lo vamos a pasar sin los guiones '-', donde haya un guion simplemente agregamos una letra mayusculas. Y no hace falta el data- ya que esta implicito para todos los atributos data.

data-toggle-dia = toggleDia

$('[data-toggle-dia]').click(function(){

var panel = $(this).data('toggleDia')

console.log(panel);

})

Vamos a ver la consola y ver el console.log

Como podemos ver nos indica el dia en el que hicimos click, pero a su vez nos genera un error.. Ese error se debe a que magellan esta buscando el id #.

Para activar el elemento al que se le hizo click accedemos a el ul que tiene como id lineup-tabs.

$('#lineup-tabs')

Ahora queremos activar programaticamente el panel en el cual se hizo click en el menu superior, entonces le decimos a Foundations que llame a la funcion selectTab y que active panel (que es el que se le hizo click en el menu superior).

$('#lineup-tabs').foundation('selectTab', panel)

En este punto ya debe funcionar perfectamente, sin embargo podemos ver que si ya hemos hecho scroll, no nos dirije nuevamente a la parte de arriba o mejor dicho, no tiene agregado magellan.

Para ello simplemente le agregamos el href #lineup-container para que lo dirija al lineup cada vez que haga click en alguno de ellos.

Blanca Segura Garcia

student•

Muchas gracias … me ayudó bastante … Especialmente me daba un error cuando puse “const” en vez de “var” y al dejar al final “console.log(panel);” -> Gracias 😉

Leonardo Grabow

student•

TIP: Verificar que la pultima linea de app.js es:
$('#lineup-tabs').foundation('selectTab', panel)
lo unico que va entre ’ ’ es selectTab, el panel va como variable declarada como const en la linea superior.

Erick Orlando Velasco Martínez

student•

Acabo de descubrir un shorcut para los videos, estoy en Linux 🐧 y al presionar la tecla Super (Windows) + Numero (del teclado alfanumerico), se puede saltar al minuto especifico, por ejemplo:

Tecla Windows + 2 = Salta al minuto 2 del vídeo. Espero que les sirva.

Juan Carlos Quishpe

student•

Muy buen tip. Gracias por compartir.

Cesar David Ramírez Dimaté

student•

En mi caso (en Windows) lo que hace es saltar a la x ventana abierta según el número que elija.

Itzel

student•

es necesario usar Js para hacer este tipo de navegación?

Sacha Lifszyc

teacher•

Sí, para modificar el tab (pestaña) que estamos viendo al hacer click en otro elemento debemos incluir JavaScript para lograrlo

Ivan Cardozo

student•

Hola¡¡ no logro encontrar el problema , mi pagina no hace el efecto de cambiar de panel , comparto mi codigo:

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi Palooza</title>
    <link rel="stylesheet" href="icons/foundation-icons.css">
    <link rel="stylesheet" href="css/foundation-flex.css">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Ravi+Prakash" rel="stylesheet">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/pricing-table.css">
  </head>
  <body>
    <!-- social -->
    <section id= "social-container">
      <div class="row align-center text-center">
        <div class="small-1 column ">
          <a href="#" target="_blank">
          <i class="fi-social-facebook"></i>
        </div>
        </a>
        <div class="small-1 column">
          <a href="#" target="_blank">
          <i class="fi-social-twitter"></i>
        </div>
        </a>
        <div class="small-1 column">
          <a href="#" target="_blank">
          <i class="fi-social-instagram"></i>
        </div>
        </a>
      </div>
    </section>
<!-- social -->

<!-- Logo -->
<section id="logo-container">
<div class="callout text-center">
<h1>Platzipalooza</h1>
</div>
</section>
<!-- Logo -->


<!-- menu -->
<section id="scrollSticky" data-sticky-container>
  <div class="data-sticky" data-sticky data-options="marginTop:0;"
  data-sticky-on="small" data-top-anchor="scrollSticky">
    <nav id="menu-container" data-magellan>
      <ul class="menu dropdown align-spaced" data-dropdown-menu>
      <li><a href="#tickets-container"> <i class="fi-ticket"></i> Tickets</a> </li>
      <li><a href="#Lineup-container">Lineup</a>
        <ul  id="submenu-container"class="menu">
          <li><a data-toggle-dia="panelViernes" href="#Lineup-container">Viernes</a> </li>
          <li><a data-toggle-dia="panelSabado" href="#Lineup-container">Sabado</a> </li>
          <li><a data-toggle-dia="panelDomingo" href="#Lineup-container">Domingo</a> </li>
        </ul>
      </li>

      <li><a href="#info-container">Info</a> </li>
      <li><a href="#suscribete-container">Suscribete</a> </li>
      </ul>
    </nav>
  </div>

</section>
<!-- /menu -->

<!-- tickets -->
<section id="tickets-action">
  <div class="callout large text-center">
    <a href="#">
      <button class="large hollow button">Comprar boletos</button>
    </a>
  </div>
</section>
<!-- /tickets -->

<!-- Lineup -->
<section id="Lineup-container" data-magellan-target="Lineup-container">
  <h3 class="text-center">Lineup</h3>
  <ul class="tabs text-center" data-tabs id="lineup-tabs">
    <li class="tabs-title is-active">
      <a href="#panelViernes">Viernes</a>
      </li>
      <li class="tabs-title">
      <a href="#panelSabado">Sabado</a>
      </li>
      <li class="tabs-title">
      <a href="#panelDomingo">Domingo</a>
    </li>
</ul>



  <div class="tabs-content" data-tabs-content="lineup-tabs">
    <!-- PARTE VIERNES -->
    <div class="tabs-panel is-active" id="panelViernes">
      <div class="row ">    <!-- ROW -->
        <!-- zona de celdas  -->
      <div class="small-12 medium-6 column">
      <div class="orbit" data-orbit>  <!-- solucionando el problema -->
          <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/g.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
            </div>                      <!-- solucionando el problema -->
          </div>
          <!-- segunda columna -->
          <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>  <!-- solucionando el problema -->
            <div class="orbit-container">
              <div class="orbit-slide" >
                <img class="orbit-image " src="images/g.jpg" alt="Guns n' Roses">
                  <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
                </div>
              </div>
            </div>                      <!-- solucionando el problema -->
          </div>
          <!-- segunda columna -->
          <!-- tercera columna -->
          <div class="small-12 medium-6 column">
                    <div class="orbit" data-orbit>  <!-- solucionando el problema -->
            <div class="orbit-container">
              <div class="orbit-slide" >
                <img class="orbit-image " src="images/g.jpg" alt="Guns n' Roses">
                  <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
                </div>
              </div>
                      </div>                      <!-- solucionando el problema -->
            </div>
          <!-- tercera columna -->
          <!-- 4 columna -->
          <div class="small-12 medium-6 column">
                    <div class="orbit" data-orbit>  <!-- solucionando el problema -->
            <div class="orbit-container">
              <div class="orbit-slide" >
                <img class="orbit-image " src="images/g.jpg" alt="Guns n' Roses">
                  <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
                </div>
              </div>
                      </div>                      <!-- solucionando el problema -->
            </div>
          <!-- 4 columna -->
          <!-- 5 columna -->
          <div class="small-12 medium-6 column">
                    <div class="orbit" data-orbit>  <!-- solucionando el problema -->
            <div class="orbit-container">
              <div class="orbit-slide" >
                <img class="orbit-image " src="images/g.jpg" alt="Guns n' Roses">
                  <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
                </div>
              </div>
                      </div>                      <!-- solucionando el problema -->
            </div>
          <!-- 5 columna -->
          <!-- 6 columna -->
          <div class="small-12 medium-6 column">
                    <div class="orbit" data-orbit>  <!-- solucionando el problema -->
            <div class="orbit-container">
              <div class="orbit-slide" >
                <img class="orbit-image " src="images/g.jpg" alt="Guns n' Roses">
                  <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
                </div>
              </div>
                      </div>                      <!-- solucionando el problema -->
            </div>
          <!-- 6 columna -->
</div> <!-- PANEL row -->
</div>
</div>

            <!--/ PARTE VIERNES -->
<!-- SABADO PANEL -->
  <div class="tabs-content sabado" data-tabs-content="lineup-tabs">
    <div class="tabs-panel is-active" id="panelSabado">


      <div class="row sabado"><!-- row sabado -->

        <!--  sabado tab 1 -->
        <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>
          <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/a.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
            </div>
          </div>
<!--  sabado tab 1 -->
<!--  sabado tab 2 -->
<div class="small-12 medium-6 column">
  <div class="orbit" data-orbit>
  <div class="orbit-container">
    <div class="orbit-slide" >
      <img class="orbit-image " src="images/a.jpg" alt="Guns n' Roses">
        <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
      </div>
    </div>
    </div>
  </div>
<!--  sabado tab 2 -->
<!--  sabado tab 3 -->
<div class="small-12 medium-6 column">
  <div class="orbit" data-orbit>
  <div class="orbit-container">
    <div class="orbit-slide" >
      <img class="orbit-image " src="images/a.jpg" alt="Guns n' Roses">
        <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
      </div>
    </div>
    </div>
  </div>
<!--  sabado tab 3 -->
<!--  sabado tab 4 -->
<div class="small-12 medium-6 column">
  <div class="orbit" data-orbit>
  <div class="orbit-container">
    <div class="orbit-slide" >
      <img class="orbit-image " src="images/a.jpg" alt="Guns n' Roses">
        <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
      </div>
    </div>
    </div>
  </div>
<!--  sabado tab 4 -->
<!--  sabado tab 5 -->
<div class="small-12 medium-6 column">
  <div class="orbit" data-orbit>
  <div class="orbit-container">
    <div class="orbit-slide" >
      <img class="orbit-image " src="images/a.jpg" alt="Guns n' Roses">
        <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
      </div>
    </div>
    </div>
  </div>
<!--  sabado tab 5 -->
<!--  sabado tab 6 -->
<div class="small-12 medium-6 column">
  <div class="orbit" data-orbit>
   <div class="orbit-container">
    <div class="orbit-slide" >
      <img class="orbit-image " src="images/a.jpg" alt="Guns n' Roses">
        <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
      </div>
    </div>
   </div>
  </div>
<!--  sabado tab 6 -->



</div><!-- /row sabado -->
</div>
</div>
    <!-- /SABADO PANEL -->

    <!-- PANEL DOMINGO -->
    <div class="tabs-content sabado" data-tabs-content="lineup-tabs">
    <div class="tabs-panel is-active" id="panelDomingo">
      <div class="row domingo"><!-- row domingo -->
        <!-- tab 1  domingo -->
        <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>
           <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/b.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
           </div>
          </div>
        <!-- /tab 1 domingo -->

        <!-- tab 2domingo -->
        <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>
           <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/a.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
           </div>
          </div>
        <!-- /tab 2domingo -->

        <!-- tab 3domingo -->
        <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>
           <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/b.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
           </div>
          </div>
        <!-- /tab 3domingo -->

        <!-- tab 4domingo -->
        <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>
           <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/b.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
           </div>
          </div>
        <!-- /tab 4domingo -->

        <!-- tab 5domingo -->
        <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>
           <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/b.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
           </div>
          </div>
        <!-- /tab 5domingo -->

        <!-- tab 6 domingo -->
        <div class="small-12 medium-6 column">
          <div class="orbit" data-orbit>
           <div class="orbit-container">
            <div class="orbit-slide" >
              <img class="orbit-image " src="images/b.jpg" alt="Guns n' Roses">
                <figcaption class="orbit-caption is-active">Guns n' Roses</figcaption>
              </div>
            </div>
           </div>
          </div>
        </div>

        <!-- /tab 6 domingo -->




    </div> <!-- cerrando row -->

</div>
<!-- aca -->
</section>
<!-- Lineup -->

<!-- Compra de boletos -->
<section id="tickets-container" data-magellan-target="tickets-container">
  <h3 class="text-center">Compra tus boletos</h3>
  <div class="row" data-equalizer data-equalize-on:"small">
    <div class="column small-10 small-offset-1 medium-6 medium-offset-3">
      <ul class="pricing-table">
  <li class="title">Platino</li>
  <li class="price">$120</li>
  <li class="description">Acceso viernes, sabado y domingo</li>
  <li>2 bebidas por cada dia</li>
  <li>Parqueadero incluido todos los dias</li>
  <li>Participa en un sorteo para acceder al backstage</li>
  <li><a class="button" href="#">Comprar Platino</a></li>
</ul>
    </div>
<!-- segunda columna  de compra de boletos -->
<div class="column small-6 medium-4 medium-offset-2">
  <ul class="pricing-table">
<li class="title">Gold</li>
<li class="price">$90</li>
<li class="description">Acceso viernes, sabado y domingo</li>
<li data-equalizer-watch>Una bebida incluida  por cada dia</li>
<li>-</li>
<li>-</li>
<li><a class="button" href="#">Comprar Gold</a></li>
</ul>
</div>
<!-- segunda columna  de compra de boletos -->
<!-- 3 columna  de compra de boletos -->
<div class="column small-6 medium-4 ">
  <ul class="pricing-table">
<li class="title">Silver</li>
<li class="price">$65</li>
<li class="description">Acceso viernes, sabado y domingo</li>
<li data-equalizer-watch>-</li>
<li>-</li>
<li>-</li>
<li><a class="button" href="#">Comprar Silver</a></li>
</ul>
</div>
<!-- 3 columna  de compra de boletos -->

  </div>
</section>
<!-- /Compra de boletos -->
<!-- Suscribete -->
<section id="suscribete-container" data-magellan-target="suscribete-container">
<h3 class="text-center">Suscribete</h3>
<h4 class="text-center"><small>Y recibe las ultimas novedades del concierto</small> </h4>
<form  action="" method="" novalidate data-abide>
  <div class="row column small-12 medium-6 text-center error-container alert-callout"
  style="display: none;" data-abide-error>
  <p><i class="fi-alert">Ingresó un correo electronico no valido </i><p>
</div>
<div class="row columns small-12 medium-6 " >
  <div class="input-group">
    <span class="input-group-label"> <i class="fi-mail"></i></span>
    <input type="email" name="email" class="input-group-field"
    placeholder="tu@correo.com" required>
      <div class="input-group-button">
      <input type="submit" class="button" value="¡suscribirse¡">
    </div>

</div>

</div>
</form>
</section>
<!-- /Suscribete -->

<!-- ifo -->
<section id="info-container"data-magellan-target="info-container">
<h3 class="text-center">Información</h3>
<div class="info-map" data-interchange="[assets/map-small.html, small] , [assets/maps.html , medium]"></div>
</div>
</section>
<!-- ifo -->








    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Ivan Cardozo

student•

Codigo js

$(document).foundation()
$('[data-toggle-dia]').click(function(ev){
  const panel = $(this).data('toggleDia')
  $('#lineup-tabs').foundation('selectTab', panel)
})

Ivan Cardozo

student•

Me acabo de dar cuenta que ese problema solo pasa en el servidor local , pero en la carpeta de por si sola anda bien.

Leonardo Grabow

student•

Estimados:
Cuando cargo por primera vez la página, los TABS se muestran mostrando el contenido de Viernes (está Ok), sábado y domingo aunque estoy en Viernes (Img debajo)

En Viernes muestra imagenes de Viernes, Sabado y Domingo -->

En Sabado muestra imágenes de Sábado y Viernes. -->

En Domingo, muestra solo las de Domingo…

Una vez que repaso cada tab, voy a Viernes y sábado y me lo muestra OK, siendo solucionado el inconveniente…

Me pueden ayudar?

Quedo a disposición.
Muchas gracias
Atentamente
Leonardo Grabow
Buenos Aires - Argentina

Leonardo Grabow

student•

Imagenes en Sábado y se ven las de Domingo.

Leonardo Grabow

student•

Las imagenes no se porque no se ven aqui…
http://prntscr.com/hfsz2i

OSCAR ANDRES TREJO NARVAEZ

student•

Por qué no fuinciona el menu simplemento poniendo el id en href?

Diego Forero

Team Platzi•

Tienes que ponerlo así

<a href="#hola">Hola</a>

Luego debes tener un div con el id hola.

Teofilo Rosales Gama

student•

por favor alguien digame en que fallo casi nada me sale como en el video o algo estoy haciendo mal o deben actualizar el curso😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰

Teofilo Rosales Gama

student•

por favor alguien digame en que fallo casi nada me sale como en el video o algo estoy haciendo mal o deben actualizar el curso😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰😰
https://drive.google.com/open?id=1Ns_1f8KD_vuxvmxYlqbaZLOadLPSgANc
aqui esta mi proyecto en rar

Diego Forero

Team Platzi•

El curso se hizo con las versiones alpha y beta tanto de bootstrap como de foundation, infortunadamente para las versiones finales cambiaron muchas cosas por esto algunas no funcionan, como lo menciona @LeonidasEsteban puedes usar exactamente las mismas versiones o darle una mirada a la documentación oficial de foundation para verificar que cambio. Los conceptos son iguales solo que cambiaron nombres de clases para optimizar el código.

Teofilo Rosales Gama

student•

cuando actualizan el curso?

Wilson Naranjo

student•

Cuando selecciono más de una vez es la misma opción desde el menú Lineup, ejemplo, selecciono viernes dos veces la segunda vez se pierde la selección del tab. Que me puede estar pasando?

Cesar David Ramírez Dimaté

student•

Raro, porque hice tu prueba y no me pasa eso. Tocaría que enviarías los valores de cada variable por el console a ver que será.

Modificando Tabs en Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman