NavFrame era un sistema de cuadros plegables que utilizaba una combinación de CSS y JavaScript , cuyo código fuente se encontraba en MediaWiki:Common.css y MediaWiki:Common.js .
Se ha eliminado NavFrame para utilizar las clases CSS y mw-collapsible. El CSS y el JavaScript se eliminaron después de que NavFrame se eliminara o reemplazara en todos los artículos en los que se usaba. El contenido con NavFrame hoy se mostrará sin contraer. Es posible que los usuarios deseen actualizar sus páginas para que sus elementos colapsables sigan funcionando como prefieren. Vea a continuación.mw-collapsedmw-collapsible-content
Los usuarios deberían abandonar NavFrame. Pueden hacerlo de una de estas tres maneras:
Los conocimientos básicos para 2 o 3 se pueden encontrar en el wiki de MediaWiki.
Para migrar el HTML básico con divs, este es el cambio que debes realizar:
< div class = "NavFrame (collapsed)" > < div class = "NavHead" > Título de contenido colapsable </ div > < div class = "NavContent" > Contenido colapsable </div> </div>< div class = "mw-collapsible (mw-collapsed)" > < div > Título de contenido colapsable </ div > < div class = "mw-collapsible-content" > Contenido colapsable </div> </div>Para migrar de una manera más perfecta en cuanto a píxeles, consulte a continuación. De esta manera, se conservan los colores y los bordes, y se eliminan algunos saltos con el botón de navegación y un título centrado , pero requiere la adición de un nuevo div, así como la fusión con cualquier estilo existente aplicado a los elementos NavFrame:
< div class = "NavFrame (collapsed)" > < div class = "NavHead" > Título de contenido colapsable </ div > < div class = "NavContent" > Contenido colapsable </div> </div>Título de contenido colapsable < / div > < / div > < div class = " mw - collapsible - content " style = " font - size : 100 % ; " > Contenido colapsable </div> </div>El concepto básico aquí es utilizar el elemento div dentro del código de marcado de un artículo Wiki para identificar cierto contenido (que aquí llamaremos "detalles") que queremos que el usuario pueda "mostrar" u "ocultar". El código de marcado utilizado para lograr este efecto comprende tres clases principales: .NavFrame, NavHead, NavContent
La implementación subyacente utiliza JavaScript para agregar un enlace "mostrar" u "ocultar" en la NavHeadparte y para NavContentactivar o desactivar la visibilidad de la parte. En los navegadores web que no admiten Javascript o donde Javascript está deshabilitado, el contenido siempre se mostrará y los enlaces "mostrar" u "ocultar" no estarán presentes.
El comportamiento predeterminado de este código inicialmente "mostrará" los detalles, así como un enlace para "ocultar" los detalles. Para revertir el comportamiento predeterminado, de modo que los detalles estén inicialmente ocultos, use class="NavFrame collapsed"(en lugar de class="NavFrame") en el elemento div externo. No agregue style="display:none;"al elemento NavContent, ya que eso hará que sea imposible para los usuarios sin Javascript ver el contenido.
Necesitarás crear tres divelementos:
< div class = "NavFrame" > < div class = "NavHead" > [... Este es el título de su contenido plegable...] </ div > < div class = "NavContent" > [...El contenido que deseas ocultar va aquí...] </div> </div>[...El contenido que deseas ocultar va aquí...]
Para ocultar inicialmente el contenido haga esto:
< div class = "NavFrame collapsed" > < div class = "NavHead" > [... Este es el título del contenido oculto...] </ div > < div class = "NavContent" > [... Este contenido está inicialmente oculto...] </div> </div>[... Este contenido está inicialmente oculto...]
Incluso puedes aplicar otras clases junto con estas, creando un diseño con más estilo que si utilizaras las clases estándar:
< div class = "messagebox standard-talk NavFrame" > < div class = "somerandomclass NavHead" > [... Este es el título; no tiene que ser texto simple, puedes ser creativo aquí...] </ div > < div class = "NavContent anotherclass" > [...El contenido que deseas ocultar va aquí...] </div> </div>Si intercambias el orden de los dos divelementos internos, puedes obtener un título siempre visible debajo del contenido opcionalmente oculto, en lugar de un encabezado siempre visible encima del contenido opcionalmente oculto:
< div clase = "NavFrame" > < div clase = "NavContent" > [...El contenido que deseas ocultar va aquí...] </div> < div class = "NavHead" > [ ... Este es el título debajo de su contenido plegable ... ] </div> <div> </div> [...El contenido que deseas ocultar va aquí...]
Si el título es demasiado largo, entonces el formato es muy malo:
< div style = "width:20em" > < div class = "NavFrame" > < div class = "NavHead" > [... Este es el título de su contenido plegable...] </ div > < div class = "NavContent" > [...El contenido que deseas ocultar va aquí...] </div> </div> </div>[...El contenido que deseas ocultar va aquí...]
Para corregir esto, debes agregar height:autoal estilo de NavHead div, y un elemento ficticio para dejar espacio para el enlace "mostrar/ocultar":
< div style = "width:20em" > < div class = "NavFrame" style = "width: 20em" > < div class = "NavHead" style = "height:auto" > < div class = "hack-to-leave-space" style = "float:right" > </ div >[...Este es el título de tu contenido plegable...] </div> < div class = " NavContent " > [...El contenido que deseas ocultar va aquí...] </div> </div> </div>[...Este es el título de tu contenido plegable...]
[...El contenido que deseas ocultar va aquí...]
Para tener las cosas alineadas a la izquierda, agregue esta línea de código
estilo="texto alineado:izquierda"al primero (o al que sea) <div>que desea que el texto interior esté alineado a la izquierda.
Contenido añadido aquí. ¿Ves lo bien que se alinea a la izquierda, en lugar de estar centrado? Es mucho más fácil de leer para muchas cosas.
Actualmente, las tres Nav*clases aplican sus propios estilos. Al mezclar clases, esto hace que algunos de los estilos de Nav anulen otros estilos (en el ejemplo anterior, NavFrame anula los estilos de .messagebox.standard-talk).
Todos los navegadores desde Internet Explorer 5.5 en adelante (IE6/7/8, Firefox, Safari/Chrome/KHTML, Opera 8/9, etc.) que admiten JavaScript contraerán correctamente los elementos.
Internet Explorer 5 y los navegadores que no admiten JavaScript mostrarán los elementos sin los enlaces [ocultar/mostrar] y no los contraerán.