Share
En prima de hoy tutorial y screencast, Te voy a mostrar cómo construir un widget de calendario pulido. Usaremos CSS3 para darle una apariencia brillante, y luego agregaremos algunas funcionalidades bastante buenas con JavaScript.
Sigo el blog 365PSD, un sitio realmente estupendo que ofrece un PSD gratuito, generalmente una pequeña parte de la interfaz de usuario, cada día. Para el día 81, había un widget de calendario realmente ordenado. Pensé que no sería demasiado difícil construir la realidad, así que te mostraré cómo hacerlo hoy!
Comenzaremos construyendo nuestra estructura HTML. Por supuesto, vamos a empezar con el esqueleto:
Widget de calendario
Entonces, dentro del cuerpo, comenzaremos con una div para envolverlo todo; entonces, tendremos tres secciones principales dentro de eso:
Primero, tenemos div.header; Mirando hacia atrás en nuestro PSD, podemos ver que esto corresponde a la parte superior, la sección que contiene el mes, los conmutadores de mes y los enlaces. Luego tenemos una tabla para los nombres de los días. Finalmente, tenemos un div # cal-frame. Esta es la cuadrícula del calendario..
Te contaré un secreto: cuando originalmente creé esta interfaz de usuario del calendario, solo tenía una tabla, con un thead para los días y un tbody para la cuadrícula del calendario; pero una vez que comencé a escribir el JavaScript para cambiar entre meses, se hizo evidente que necesitaba usar algo más flexible. Verás por qué cuando lleguemos al JavaScript..
Entonces, tira esto en ese encabezado:
⟨ 20 de junio y 0 ⟩
Tenemos cinco elementos aquí; en el exterior, tenemos los conmutadores de calendario izquierdo y derecho; Como no quería usar ninguna imagen en este proyecto, encontré las entidades HTML ⟨ y & rang (⟨y⟩, respectivamente). Entonces, tenemos dos vanos vacíos para los enlaces del calendario. Finalmente, tenemos la etiqueta mes / año en el medio..
El contenido para el mesa # días es bastante simple:
Dom Lun mar Mie Jue Vie Sab
Finalmente, tenemos las agallas de div # cal-frame; Échale un vistazo, y luego lo discutiremos:
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | dieciséis | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Entonces, ¿qué tenemos aquí? Básicamente, estamos creando la cuadrícula del calendario con una tabla (Más adelante, insertaremos el mes actual dinámicamente). Las celdas apropiadas tienen los números de fecha; si las celdas están en blanco, tienen la clase "nil"; Finalmente, la fecha de hoy tiene la clase "hoy"..
Y realmente, esa es la extensión del HTML; No hay mucho que ver ahora, pero esto es lo que tenemos:
Comencemos con algún entorno:
cuerpo fondo: # e0e0e0; #cal -moz-box-shadow: 0px 3px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: 0px 3px 3px rgba (0, 0, 0, 0.25); margen: 50px auto; fuente: 13px / 1.5 "Helvetica Neue", Helvatica, Arial, san-serif; pantalla: tabla;
Bastante obvio, ¿eh? Después de establecer un color de fondo, centramos el widget del calendario horizontalmente y le damos una sombra de cuadro. Por supuesto, ponemos la fuente. ¿Pero por qué ponemos la pantalla a la mesa? Por defecto, un div se mostrará en bloque, lo que significa que ocupará todo el ancho disponible; Al mostrarlo como una tabla, ocupará el ancho más pequeño que pueda (aunque aún contenga a sus hijos) y seguirá siendo un elemento de bloque..
A continuación, vamos a centrarnos en la barra de encabezado:
#cal .header cursor: por defecto; fondo: # cd310d; fondo: -moz-linear-gradient (arriba, # b32b0c, # cd310d); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# b32b0c), hasta (# cd310d)); altura: 34px; posición: relativa; color: #fff; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; borde superior-izquierdo-radio: 5px; borde superior-derecho-radio: 5px; font-weight: negrita; text-shadow: 0px -1px 0 # 87260C; transformación de texto: mayúsculas; #cal .header span display: inline-block; línea de altura: 34px;
Aquí está la primera parte del estilo de encabezado; empezamos por poner el cursor en un puntero; De esta manera, el texto no aparecerá como seleccionable. Entonces, vamos a establecer un color de fondo rojo; sin embargo, si el navegador lo admite, usaremos un degradado de fondo: ¡no olvide agregarlo tanto para mozilla como para webkit! A continuación, establezca la altura a 34px; estableceremos la posición en relativa, porque los niños estarán absolutamente posicionados; posicionando el elemento padre relativamente, los hijos estarán posicionados absolutamente contra el padre, en lugar del cuerpo. Establezca el color del texto en blanco, redondee las esquinas superior izquierda y derecha y haga que la fuente esté en negrita. Luego, dale una ligera sombra de texto para que el texto se vea sangrado. Finalmente, transforma el texto en mayúsculas..
Cada uno de los elementos en el encabezado es un lapso; cada uno de estos se mostrará como un bloque en línea. Además, dales una altura de línea de 34px (la altura del encabezado).
Estos intervalos también tienen algunas clases especiales, así que echemos un vistazo a estos:
#cal .header .hook width: 9px; altura: 28px; posición: absoluta; parte inferior: 60%; radio del borde: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; fondo: #ececec; fondo: -moz-linear-gradient (parte superior derecha, #fff, # 827e7d); fondo: -webkit-gradient (lineal, superior derecha, inferior derecha, de (#fff), a (# 827e7d)); cuadro de sombra: 0px -1px 2px rgba (0, 0, 0, 0.65); -moz-box-shadow: 0px -1px 2px rgba (0, 0, 0, 0.65); -webkit-box-shadow: 0px -1px 2px rgba (0, 0, 0, 0.65); .right.hook derecha: 15%; .left.hook izquierda: 15%;
En primer lugar, tenemos la clase "gancho"; recuerda, estos son los ganchos, o enlaces, del calendario. Fijaremos el ancho y la altura. Entonces, colócalo absolutamente. Luego, lo subiremos del 60% inferior. Doblaremos la esquina lo suficiente como para que las fijaciones se vean a su alrededor. Entonces, vamos a establecer un color de fondo; Si el navegador admite gradientes, anularemos el fondo sólido con un degradado. Entonces, les daremos una caja de sombra..
Luego usaremos las clases de ubicación para posicionar los ganchos horizontalmente; si el elemento tiene las clases "gancho" y "derecho", muévalo 15% desde la derecha; si tiene la clase "izquierda", muévala 15% desde la izquierda.
Ahora tenemos los botones de cambio de mes:
#cal .header .button width: 24px; text-align: center; posición: absoluta; #cal .header .left.button izquierda: 0; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; borde superior-izquierdo-radio: 5px; borde derecho: 1px sólido # ae2a0c; #cal .header .right.button right: 0; arriba: 0; borde izquierdo: 1px sólido # ae2a0c; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; borde superior-derecho-radio: 5px; #cal .header .button: hover background: -moz-linear-gradient (top, # d94215, # bb330f); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# d94215), hasta (# bb330f));
Estableceremos el ancho en estos botones y centraremos el texto; por supuesto, tendremos que posicionarlos absolutamente también. Luego, para el botón izquierdo, lo movemos completamente hacia la izquierda y redondeamos la parte superior izquierda para. Para el botón derecho, va hacia la derecha y redondea la esquina superior derecha.
Finalmente, agregaremos un efecto de desplazamiento para los botones; por supuesto, usaremos un gradiente.
Hay un elemento más para diseñar: esa es la etiqueta del mes.
#cal .header .month-year letter-spacing: 1px; ancho: 100%; text-align: center;
Usaremos el espaciado de letras Para dar a los personajes un poco más de espacio para respirar. Luego, le daremos a la extensión un ancho del 100% y centraremos el texto. Debido a que todos los elementos hermanos están posicionados absolutamente, dar a todo el ancho hace exactamente lo que queremos.
Así que eso es todo el encabezado! Debo mencionar que aunque hemos posicionado la mayoría de los elementos en forma absoluta, porque estamos usando porcentajes para ubicarlos, todo se ajusta perfectamente al aumentar o disminuir el tamaño de la fuente en el navegador..
Bien, pasemos a los encabezados del día..
#cal table background: #fff; colapso de la frontera: colapso; #cal td color: # 2b2b2b; ancho: 30px; altura: 30px; línea de altura: 30px; text-align: center; borde: 1px sólido # e6e6e6; cursor: por defecto; #cal #days td altura: 26px; línea de altura: 26px; transformación de texto: mayúsculas; tamaño de letra: 90%; color: # 9e9e9e; #cal #days td: not (: last-child) border-right: 1px solid #fff;
Comenzamos con dos selectores ligeramente más genéricos: el encabezado de día y la cuadrícula del calendario son ambas tablas, por lo que la primera regla se aplica a ambos: estamos configurando el fondo en blanco y colapsando los bordes. Cuando los bordes de la tabla se contraen, no tienen relleno entre ellos y las celdas adyacentes comparten bordes. Luego, para todas las celdas de la tabla, les daremos un color de texto, estableceremos su ancho, alto y altura de línea a 30px, y centraremos el texto. Todos obtienen un borde y el cursor predeterminado (una flecha / puntero);
Luego, agregaremos algunos estilos específicos para las celdas de la tabla en la tabla de días: reduciremos su altura y altura de línea un poco, aseguraremos que estén en mayúsculas y restableceremos el tamaño de fuente y el color del texto. ( Nota: en el screencast que acompaña, escribí #día en lugar de #dias en el selector del tercer bloque de arriba y nunca lo corregí; Asegúrate de hacerlo bien!)
¿Cuál es la regla final de arriba? Bueno, actualmente, hay bordes de color gris claro en las celdas de los nombres del día. Queremos cambiar el color de los bordes de la derecha a blanco, para que no sean visibles. Sin embargo, no queremos hacer esto a la última celda de la fila. Entonces, podemos usar dos pseudo-clases. : no tomará un selector de exclusión "parámetro". : last-child toma el último hijo de los elementos que ya hemos seleccionado: en este caso, son las celdas de la tabla. Entonces, simplemente establecemos el borde derecho en blanco sólido.
#cal # cal-frame td.today background: #ededed; color: # 8c8c8c; box-shadow: 1px 1px 0px #fff inset; -moz-box-shadow: 1px 1px 0px #fff inset; -webkit-box-shadow: 1px 1px 0px #fff inset; #cal # cal-frame td: not (.nil): hover color: #fff; text-shadow: # 6C1A07 0px -1px; fondo: # CD310D; fondo: -moz-linear-gradient (arriba, # b32b0c, # cd310d); fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, desde (# b32b0c), hasta (# cd310d)); -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px;
Estas dos reglas van dirigidas a la cuadrícula del calendario. Para la celda de la tabla con la clase "hoy", configuramos el fondo a un gris claro y el texto a un gris más oscuro. A continuación, establecemos una sombra de cuadro: es una sombra blanca, pero no estamos usando ninguna imagen borrosa, así que es una línea blanca; lo estamos empujando hacia arriba y hacia la derecha un píxel, por lo que obtenemos un efecto de borde secundario. Observe que estamos agregando "inserción" a la declaración de la sombra de la caja, para que la sombra esté dentro de la celda.
La siguiente regla aplica un efecto de desplazamiento a todas las celdas de la tabla en la cuadrícula del calendario, excepto las que tienen la clase "nil"; configuramos el texto en blanco y agregamos una sombra de texto. Luego, cambiamos el fondo a rojo, usando un degradado cuando podemos. Incluimos el cuadro de eliminación de sombra específicamente para la celda "hoy".
Hay un caso especial que aún no hemos mencionado; agarra tu calendario más cercano, no, no iCal, estoy hablando de un verdadero calendario de papel de árbol muerto, y mira, oh, digamos, octubre de 2010. Notarás que la semana final tiene una celda duplicada, con tanto el 24th y el 31S t En la misma plaza. Tendremos que hacer eso, así que estemos de acuerdo..
La forma en que lo marcaremos es poniendo cada fecha en un espacio dentro de la celda de la tabla.
#cal # cal-frame td span font-size: 80%; posición: relativa; #cal # cal-frame td span: first-child bottom: 5px; #cal # cal-frame td span: last-child top: 5px;
Primero, posicionamos la lapsos relativamente y reducir su fuente sólo un pelo; Luego, movemos el primero hacia arriba 5px y el segundo hacia abajo 5px.
Haremos una cosa más; cuando cambiamos entre meses, queremos desaparecer de uno a otro; esto requiere que las dos tablas estén una encima de la otra. Podemos lograr eso con esto:
#cal # cal-frame table.curr float: left; #cal # cal-frame table.temp position: absolute;
El que estamos desapareciendo tendrá una clase de "temp"; El nuevo que traemos para quedarse (por un tiempo) tendrá la clase "curr".
¡Y eso es todo para el CSS! Ahora vamos a pasar a algunas funcionalidades..
Haremos que la funcionalidad de nuestro calendario sea fácil de reutilizar; a la luz de eso, comenzaremos con este esqueleto:
var CALENDAR = function () var wrap, label, months = ["January", "February", "March", "April", "May", "June", "July", "August", "September" , "Octubre Noviembre Diciembre"]; function init (newWrap) function switchMonth (next, month, year) function createCal (year, month) createCal.cache = ; return init: init, switchMonth: switchMonth, createCal: createCal; ;
Entonces creamos tres funciones dentro de nuestra función CALENDARIO; uno inicializará el widget del calendario, el segundo se moverá entre los meses y el tercero creará la cuadrícula del calendario; note esa línea después de ella: createCal.cache = ; lo discutiremos también!
También creamos tres variables en la parte superior: daremos envolver y etiqueta valores dentro de en eso, Pero meses es una matriz con los nombres de los meses..
Aquí está el contenido de nuestro en eso función:
Accentsconagua
wrap = $ (newWrap || "#cal"); label = wrap.find ("# label"); wrap.find ("# prev"). bind ("click.calendar", function () switchMonth (false);); wrap.find ("# next"). bind ("click.calendar", function () switchMonth (true);); label.bind ("click", function () switchMonth (null, new Date (). getMonth (), new Date (). getFullYear ());); label.click (); Empezamos dando envolver y etiqueta Los valores apropiados: aviso que usamos el selector pasado a en eso para buscar una envoltura, pero retroceda a "#cal" si no se proporciona una. Luego, enlazamos los eventos de clic a los botones de calendario siguiente y anterior; estos llaman al cambiarMes función; Si queremos el siguiente calendario, pasamos true, de lo contrario, pasamos false..
sin embargo, cambiarMes También puede tomar dos parámetros más; Los usaremos para el evento clic en la etiqueta. Cuando el usuario haga clic en el nombre del mes, cambiaremos al mes actual; Entonces, aprobaremos el mes y año actuales, que podemos obtener de JavaScript. Fecha objeto. No olvides configurar el siguiente parámetro a nulo!
Una cosa más (y una sugerencia de bonificación, que no está en el screencast): cuando el usuario carga la página, queremos cargar el mes correcto durante el mes en el que está programado. La forma más sencilla de hacerlo es llamar al jQuery haga clic en el método en la etiqueta sin ningún parámetro; esto simula un clic del ratón y lleva el calendario al mes actual.
Vamos a pasar a la cambiarMes función:
var curr = label.text (). trim (). split (""), calendar, tempYear = parseInt (curr [1], 10); mes = mes || ((next)? ((curr [0] === "December")? 0: months.indexOf (curr [0]) + 1): ((curr [0] === "January")? 11: months.indexOf (curr [0]) - 1)); año = año || ((siguiente && mes === 0)? tempYear + 1: (! next && month === 11)? tempYear - 1: tempYear); Estableceremos algunas variables en la parte superior; Estamos dividiendo la etiqueta en una matriz llamada curr; también estamos creando un calendario variable y agarrando el año del calendario que se muestra actualmente.
Entonces las cosas se complican. He usado operadores condicionales de JavaScript aquí, así que puedo ponerlo todo en una línea. En lugar de tratar de explicarlo, mira esto: esto es lo que están haciendo:
if (! month) if (next) if (curr [0] === "December") month = 0; else month = months.indexOf (curr [0]) + 1; else else if (curr [0] === "January") month = 11; else month = months.indexOf (curr [0]) - 1;
Puede ver por qué el operador condicional es atractivo: es solo una línea. Aquí está la versión expandida de la variable del año:
if (! year) if (next && month === 0) year = tempYear + 1; else if (! next && month === 11) year = tempYear - 1; else year = tempYear;
Al final de todo, mes y año Serán los valores correctos para el calendario que estamos tratando de mostrar al usuario. Si se siente más cómodo, puede reemplazar esas dos líneas con los fragmentos de arriba..
A continuación creamos el calendario y ajustamos el DOM en consecuencia:
calendar = createCal (año, mes); $ ("# cal-frame", wrap) .find (". curr") .removeClass ("curr") .addClass ("temp") .end () .prepend (calendar.calendar ()) .find (" .temp ") .fadeOut (" slow ", function () $ (this) .remove ();); $ ('# etiqueta'). texto (calendar.label); ¿Qué hay en el objeto de calendario que regresa de la crear cal ¿función? Es un objeto, como este:
calendar: function () / * devuelve un objeto jquery del calendario * /, etiqueta: "Mes Año"
Discutiremos por qué la propiedad del calendario es un método cuando llegamos a construirla. Por ahora, volvamos a ponerlo en la página. Obtendremos el marco del calendario y encontraremos el calendario actual. Luego, eliminaremos la clase "curr" y aplicaremos la clase "temp"; luego colocamos el nuevo calendario (que, por cierto, viene con la clase "curr"), y desaparecemos y eliminamos el antiguo.
Bueno, solo nos queda una función más: crear cal.
var day = 1, i, j, haveDays = true, startDay = new Date (year, month, day) .getDay (), daysInMonths = [31, (((year% 4 == 0) && (year% 100! = 0)) || (año% 400 == 0))? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], calendario = [];
Aquí está nuestro comienzo: las variables. Tenemos día, poner a 1; tenemos dos vars para la iteración: yo y j. Luego, averiguamos en qué día de la semana comienza el mes; Podemos hacer esto creando un objeto Fecha para el primer día del mes y llamando getDay.
A continuación, creamos una matriz que contiene la cantidad de días en cada mes; para febrero, debemos tener en cuenta los años bisiestos, así que use otra expresión ternaria para calcular eso.
Finalmente, tenemos el muy importante. calendario variable, que es una matriz.
A continuación, queremos usar esa cache propiedad que ponemos en el crear cal función. (Dado que todo en JavaScript es un objeto, incluso las funciones pueden tener propiedades).
if (createCal.cache [year]) if (createCal.cache [year] [month]) return createCal.cache [year] [month]; else else createCal.cache [año] = ;
Esto es lo que está pasando: existe la posibilidad de que el usuario "solicite" el mismo mes más de una vez. Una vez que lo creamos la primera vez, no hay necesidad de hacerlo nuevamente; Lo pondremos en el caché y lo sacaremos más tarde..
Si eso cache object tiene una propiedad con el nombre del año que buscamos, luego podemos verificar la disponibilidad del mes; Si ya hemos hecho el mes, devolveremos ese objeto en caché. Si no hay una propiedad para el año, lo haremos, porque tendremos que poner el mes que estamos a punto de crear..
Si pasamos este punto, entonces debemos comenzar a crear el calendario para el mes solicitado..
i = 0; while (haveDays) calendar [i] = []; para (j = 0; j < 7; j++) if (i === 0) if (j === startDay) calendar[i][j] = day++; startDay++; else if (day <= daysInMonths[month]) calendar[i][j] = day++; else calendar[i][j] = ""; haveDays = false; if (day > daysInMonths [month]) haveDays = false; i ++;
Esto es un poco complicado; mientras que la tener días La variable es verdadera, sabemos que nos quedan días en el mes. Por lo tanto, utilizaremos nuestro yo iterador para agregar una matriz de semana a la matriz de calendario. Entonces, usamos un for-loop en el j iterador, mientras que es menos de 7; ya que comenzamos con 0, esto nos dará 7 días para el arreglo de la semana. Dentro de nuestro bucle for, hay tres casos..
Primero, debemos verificar si estamos en la primera semana del mes; Si lo somos, no necesariamente comenzaremos el primer día. Ya sabemos en qué día comienza el mes; eso está en nuestro empezar el dia variable. Por lo tanto, si j === startDay, Estamos en el día correcto para comenzar, así que pondremos el valor de día en la ranura derecha. Luego incrementamos día y empezar el dia por uno. La próxima vez 'alrededor del bucle for, j y empezar el dia Será lo mismo, por lo que seguirá trabajando por el resto de la semana..
Si no estamos en la primera semana (i! == 0), luego nos aseguraremos de que aún nos queden días para agregar al calendario; Si es así, los colocamos en su lugar. Finalmente, si no estamos en la primera semana y no tenemos días para agregar al mes, en su lugar, pondremos una cadena en blanco. Entonces, vamos a establecer tener días a falso.
Al final, comprobaremos para ver si día es mayor que el número de días en el mes; si es así, lo estableceremos tener días a falso Esto es para el caso especial donde el mes termina en sábado..
Por supuesto, no te olvides de incrementar yo justo fuera del for-loop!
si (calendario [5]) para (i = 0; i < calendar[5].length; i++) if (calendar[5][i] !== "") calendar[4][i] = ""+ calendario [4] [i] +""+ calendario [5] [i] +""; calendar = calendar.slice (0, 5);
No queremos que nuestro calendario tenga más de 5 semanas; si un día o dos se derraman en la semana 6, dividiremos las celdas en la semana 5, como lo hemos preparado en nuestro CSS. Así que, si hay un 6th matriz dentro de la matriz de calendario, lo recorreremos. Luego, si el contenido del elemento-matriz no es una cadena en blanco, reasignaremos el valor de la celda directamente "arriba" de la fila 6: envolveremos ese valor en un tramo y concatenaremos otro tramo con el valor apropiado de fila 6 dentro. Eso tiene sentido, ¿verdad??
Una vez que tengamos todo en su lugar, cortaremos el último elemento de calendario.
para (i = 0; i < calendar.length; i++) calendar[i] = ""; calendar = $ (" "+ calendario [i] .join (" ") +"
Ahora es el momento de concatenar cada semana en nuestra calendario; recorreremos cada uno de ellos en un bucle for y convertiremos las entradas en filas de tabla, con cada día dentro de una celda de tabla. Luego, convertiremos todo en un objeto jQuery, después de juntar todas las filas de la tabla y envolverlas con una tabla. Luego agregaremos la clase "curr" a esa tabla.
Todas las celdas de la tabla vacía (podemos usar el pseudo-selector jQuery: vacío para encontrarlas), obtenga la clase "nil".
Si estamos creando un calendario para el mes actual, encontraremos la celda para hoy y le daremos la clase "hoy"; Lo podemos encontrar pasando una función al método de filtro jQuery. La función devuelve verdadero si el texto de la celda coincide con la fecha.
Finalmente, crearemos nuestro objeto terminado y lo pondremos en el caché. ¿Por qué estamos haciendo el calendario propiedad una función? Bueno, si acabamos de devolver un objeto jQuery, una vez que lo agregamos al calendario y luego pasamos a otro mes, la tabla se eliminaría del DOM; más adelante, si regresamos a ese mes, el elemento no se mostrará porque la memoria caché está haciendo referencia al mismo elemento DOM. Así que usamos el método de clonación de jQuery para devolver una copia del elemento DOM. Luego, la etiqueta obtiene el nombre del mes de la matriz de meses y concatenó eso con el año. Finalmente, devolvemos el objeto..
Hemos terminado De vuelta en el archivo index.html, agregaremos una etiqueta de script con esto:
var cal = CALENDARIO (); cal.init ();
¡Eso es! Así es como se ve nuestro producto terminado!
Pero no te puedo mostrar la funcionalidad; ¡Tendrás que revisar el código tú mismo! Gracias por leer!
