1 00:00:00,760 --> 00:00:04,419 Bueno, hemos dicho ya en la presentación que los elementos interactivos no hay demasiados. 2 00:00:04,679 --> 00:00:13,859 Uno de ellos es este de Details, entonces en el cual hay una información que es la que mostramos 3 00:00:13,859 --> 00:00:18,280 y si pinchamos en algún sitio nos aparece todo el resto de la información. 4 00:00:19,120 --> 00:00:24,079 ¿De acuerdo? Details empieza aquí, acaba aquí, tenemos el Summary aquí y aquí a cierra. 5 00:00:24,079 --> 00:00:32,159 Bueno, pues aquí tenemos esta información y si pinchamos en el spoiler, pues vemos el resto de la información que había ahí. 6 00:00:33,020 --> 00:00:37,200 Es muy simple y funciona perfectamente, ¿de acuerdo? 7 00:00:40,859 --> 00:00:49,920 Podemos visualizarlo directamente abierto, entonces aquí por el detail, si le ponemos la etiqueta open, tal cual, pues ya aparece abierto. 8 00:00:49,920 --> 00:00:55,100 Podríamos perfectamente después cerrarlo si nos molesta al cargar la página 9 00:00:55,100 --> 00:00:59,899 Bien, no tiene mucho más interés 10 00:00:59,899 --> 00:01:02,560 Simplemente esto, lo que pasa es que puede ser muy útil 11 00:01:02,560 --> 00:01:06,980 Tenemos aquí una lista dentro de Summary, etc. 12 00:01:07,819 --> 00:01:10,500 Otro de los elementos que tenemos es Dialog 13 00:01:10,500 --> 00:01:14,420 Y Dialog, pues vemos aquí que este es el trozo de Dialog 14 00:01:14,420 --> 00:01:16,879 Le ponemos un identificador, ya veremos para qué 15 00:01:16,879 --> 00:01:20,980 Y dentro metemos información como si fuera una página web normal y corriente 16 00:01:20,980 --> 00:01:24,299 Bueno, esto es lo que vamos a mostrar 17 00:01:24,299 --> 00:01:25,420 ¿Qué ocurre? 18 00:01:25,500 --> 00:01:27,280 Nosotros tenemos esta información aquí 19 00:01:27,280 --> 00:01:29,579 Y aparece esto de aquí 20 00:01:29,579 --> 00:01:33,200 Claro, si no tuviéramos posibilidad de hacer nada 21 00:01:33,200 --> 00:01:35,480 Yo estoy pensando en sitios y veo que no puedo hacer nada 22 00:01:35,480 --> 00:01:37,620 Pues yo no podría esto cerrarlo 23 00:01:37,620 --> 00:01:41,420 Entonces hay que poner en algún sitio algo para cerrar esta ventana de diálogo 24 00:01:41,420 --> 00:01:43,099 ¿Y cómo lo hacemos? 25 00:01:43,299 --> 00:01:45,840 Pues teniendo que llamar algo de Javascript 26 00:01:45,840 --> 00:02:02,060 En este caso, decimos que cuando pinchemos en ese elemento, esto que aparece aquí, que busque el elemento cuyo ID es dialog-1, es decir, este elemento de aquí, y le quite el atributo, remove atributo, open. 27 00:02:02,480 --> 00:02:06,120 Al quitarle el atributo open a esto, pues ya se nos cierra. 28 00:02:07,239 --> 00:02:11,479 ¿Qué hemos hecho en este botón? Este botón, cuando lo hemos pintado, ha dicho input. 29 00:02:11,479 --> 00:02:13,580 ponme un botón 30 00:02:13,580 --> 00:02:15,580 que muestre un diálogo 31 00:02:15,580 --> 00:02:17,159 muestra diálogo, este de aquí 32 00:02:17,159 --> 00:02:19,599 y que cuando hagamos onClick 33 00:02:19,599 --> 00:02:21,819 lo que hagamos es establecer 34 00:02:21,819 --> 00:02:23,900 el atributo open al valor 35 00:02:23,900 --> 00:02:25,939 open en diálogo 1 36 00:02:25,939 --> 00:02:27,439 con lo cual lo que hemos hecho 37 00:02:27,439 --> 00:02:29,139 al pinchar es generar esto 38 00:02:29,139 --> 00:02:30,979 y al cerrar lo borramos 39 00:02:30,979 --> 00:02:33,639 ya vemos que necesitamos un poquito de código javascript 40 00:02:33,639 --> 00:02:34,860 para hacerlo funcionar 41 00:02:34,860 --> 00:02:36,379 de una manera adecuada 42 00:02:36,379 --> 00:02:38,759 tiene unos intereses que son diálogos modales 43 00:02:38,759 --> 00:02:40,659 hasta que no lo quito aquí no puedo hacer nada 44 00:02:40,659 --> 00:02:46,960 Entonces es bueno que los utilicemos en muchos aspectos.