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.
