22 August 2014, 01:17
0
Tablas Colapsables
Bueno en esta ocasión, después de mucho tiempo ya (aunque no tanto) vengo con un nuevo tutorial, no es algo que no se sepa, de hecho me imagino que está en la comunidad oficial de MyBB y en otros foros de soporte, pero el hecho es que lo haré en base a mi experiencia, aunque en su momento yo también lo aprendí de otras comunidades, pero bueno, aquí vamos.
Objetivo:
Lograremos crear una tabla colapsable en nuestro foro, en cualquier plantilla y agregar el contenido que queramos dentro de ella. Esta tabla tendrá las mismas características que las demás tablas por default que trae nuestro foro con el theme que tengamos instalado. Y lo que la hace colapsable es que tendrá el famoso botón al extremo derecho, en donde al dar click se colapsa, y cuando se vuelve a dar otro click sobre ella, se expande.
Vista Previa del Resultado Final:
Spoiler:
![[Imagen: czpO0Go.png]](http://i.imgur.com/czpO0Go.png)
![[Imagen: P5QN8BA.png]](http://i.imgur.com/P5QN8BA.png)
Tutorial:
Lo primero que haremos será ubicar la plantilla en donde queramos agregar un contenido en una tabla colapsable, esto puede ser en diferentes lugares del foro y para eso deben saber el nombre de la plantilla correspondida; para este tutorial yo emplearé la plantilla index entonces nos dirigimos a:
ACP >> Estilos y Plantillas >> Plantillas >> (Selecciona tu Theme) >> Índice - Plantillas >> index
Notaremos dos variables muy importantes, las cuales son {$header} y {$forums}, ambas representan un grupo de plantillas cargadas en el index de nuestro foro, el código que vamos a añadir, para que quede bien situado irá entre estas dos variables, de manera que agregamos entre estas variables el siguiente código:
Código: ( Seleccionar Todo )
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead">
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse.gif" id="mytable_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<strong>Mi Tabla</strong>
</td>
</tr>
<tr>
<td style="{$collapsed['mytable_e']}" id="mytable_e" class="trow1">
<div style="text-align:center;"><a href="https://mybb.es" title="Accede a ForosMyBB"><img src="http://i.imgur.com/YfTCvxR.png" alt="ForosMyBB" /></a></div>
</td>
</tr>
</table>
<br />Y guardamos los cambios, con eso será suficiente para tener un contenido en el index, dentro de una tabla colapsable.
Obviamente el contenido que ustedes agregarán será diferente, para ello solo deben modificar el código de la imagen sustituyendo lo que quieran colocar, del mismo modo con el título de la tabla.
Algo muy importante que debemos tener en cuenta es que para lograr esto, trabajamos con IDs, el nombre puede ser cualquiera que ustedes agreguen, pero siguiendo la extensión final _img y _e para el caso del tutorial usé:
Código: ( Seleccionar Todo )
id="mytable_img"Código: ( Seleccionar Todo )
id="mytable_e"El identificador en la imagen _img se asigna al elemento que colapsará o expandirá la tabla, y el otro identificador que termina en _e se le asigna al todo el grupo de contenido que será colapsado o extendido, siguiendo correctamente el código entenderán la lógica.
Mientras que las clases estén correctamente aplicadas, la tabla cogerá los estilos del theme que tengan instalado en sus foros, y obviamente pueden editarlo a su gusto, agregando links y efectos con transiciones en CSS3 para personalizarlo mucho más.
El tutorial no es mío, y no podría citar la fuente ya que no la encuentro, simplemente les dejo lo que uso en base a mi experiencia, aunque nuevamente recalco, que lo aprendí de comunidades de soporte para MyBB en inglés.
Si tienen dudas preguntar con gusto, ¡hasta pronto!
