Grupo de Trabajo Isla&Sam

JavaScript tabifier
Autor Carlos Remacho
martes, 20 de mayo de 2008
Modificado el miércoles, 28 de mayo de 2008

Automáticamente crea una interfaz HTML de pestañas utilizando plug-and-play JavaScript.

{tab=Características}

- Convierte tu HTML dinámico en una interfaz de pestañas.

- No requiere la configuración de una lista de enlaces, o en los anclajes para las pestañas.
- Plug and Play: no necesita saber JavaScript, basta con unos simples cambios en su código HTML.
- Use CSS para personalizar el aspecto de las pestañas.
- Gracia degrada si JavaScript no está presente y permite que un conjunto diferente de los estilos que deben aplicarse
cuando JavaScript no está presente.
- Gracia apoya impresión (probar una vista previa de impresión en la página example.html) y permite un conjunto
diferente de los estilos que se aplicarán cuando se imprime.
- Múltiples ficha fija en una página - incluso puede anidar una pestaña dentro de otro conjunto.
- Establezca la ficha inicial que se mostrará.
- Utilizar javascript para controlar la pestaña que aparece en pantalla.
- Definir y onload OnClick funciones de llamada para realizar funciones más avanzadas, tales como carga la pestaña
contenido dinámicamente usando AJAX.
- Use una cookie para recordar que fue seleccionado ficha por lo que sigue siendo seleccionados cuando regrese a la
página.
- Orientada a objetos, ampliamente comentado el código.
- La licencia MIT por lo que puede modificar y utilizar en proyectos comerciales.{tab=Paso 1}
Si empiezas con HTML simple como esto:
<h3> Sección Uno </ h3>
Sección de un contenido.

La sección dos contenido.

Añade algunos elementos DIV. Añade un div con class = tabber para todo el conjunto:

<div class="tabber">
<h3> Sección Uno </ h3>
Sección de un contenido.

La sección dos contenido.

</ div>

A continuación, añadir un div con class = tabbertab alrededor de cada sección. Por defecto tabber obtendrá la ficha título
de una partida elemento dentro de la sección, o puede cambiar el título se atribuyen a la pestaña de navegación texto:

<div class="tabber">

<div class="tabbertab">
<h3> Sección Uno </ h3>
Sección de un contenido.
</ div>

<div class="tabbertab" title="MyTabTitle">

La sección dos contenido.
</ div>

</ div>

NOTA: la tabbertab DIVs hijo deben ser nodos de la tabber DIV. Esto es necesario a fin de permitir anidados
pestañas.{tab=2}
Incluya el código JavaScript:

<script type="text/javascript" src="tabber.js">

</ script>

http://www.juntadeandalucia.es/averroes/~cepgr2/isla Potenciado por Joomla! Generado: 1 August, 2010, 22:17

 Grupo de Trabajo Isla&Sam

Después de que su página termine la carga, se ejecuta el script para convertir su llanura HTML dinámico en HTML.

Nota: si no desea que se ejecute automáticamente onload, se refieren a los temas más avanzados.
{tab=3}
Añadir algunos estilos. Consulte el ejemplo CSS archivos proporcionados, o modificar uno de los estilos de Listamatic .

NOTA: Su HTML original se ha transformado en algo como esto:

<div class="tabberlive">

<ul class="tabbernav">
<li class="active">
<a href="javascript:void(null)" onclick="">
Sección Uno </ a>
</ li>
<li>
<a href="javascript:void(null)" onclick="">
MyTabTitle </ a>
</ li>
</ ul>

<div class="tabbertab">
<h3> Sección Uno </ h3>
Sección de un contenido.
</ div>

<div class="tabbertab">
La sección dos contenido.
</ div>

</ div>

Tenga en cuenta lo siguiente:

- Los principales div (class = tabber) se ha cambiado a (class = tabberlive). Esto le permite aplicar un estilo de la
untabbed HTML, y un estilo diferente de la pestaña HTML.
- Un ul lista se añade. Cada elemento de la lista es un vínculo que provoca la dinámica de navegación. El texto del
vínculo es el título del atributo tabbertab div.
{tab=Avanzado}
Configuración de la ficha por defecto

Por defecto la primera ficha será seleccionado. Para seleccionar una pestaña diferente inicial, el uso tabbertabdefault
clase (además de la clase tabbertab):

<div class="tabbertab tabbertabdefault">

<h3> Sección Dos </ h3>
Este será seleccionado por defecto.
</ div>

Consulte a example2.html para verlo en acción.

Cambios dinámicos en la pestaña
En primer lugar, hay que dar una identificación a su principal tabber div.

<div class="tabber" id="mytab1">

Un objeto tabber se adjunta al div y puede utilizar el tabShow () método para cambiar la pestaña que se muestra:

document.getElementById ( 'mytab1'). tabber.tabShow (0);

Las pestañas se numeran a partir del cero, así que use 0 para la primera pestaña, 1 para la segunda pestaña, etc
Desactivar onload

Al cargar tabber.js que en ella se establece un evento a correr cuando la página termina de carga. Para evitar tabber
de correr, antes de incluir tabber.js, establezca la variable tabberOptions como esto:
http://www.juntadeandalucia.es/averroes/~cepgr2/isla Potenciado por Joomla! Generado: 1 August, 2010, 22:17
 Grupo de Trabajo Isla&Sam

<script type="text/javascript">
tabberOptions var = (manualStartup: true);
</ script>
<script type="text/javascript" src="tabber.js">
</ script>

Es posible que desee hacerlo si necesita más control sobre la forma en que tabber inicializa. Por otra parte, si usted no
desea a tabber ejecuta de forma automática, puede editar tabber.js y sólo comentar que parte del código.
onload evento OnClick y funciones de llamada

Puede configurar una función onload que se llamará después de la pestaña interfaz ha terminado la inicialización, o una
función OnClick (que se llama cuando un usuario hace clic en una pestaña).

<script type="text/javascript">
tabberOptions var = ( "onclick ': function () (alert (" clicky !");}};
</ script>
<script type="text/javascript" src="tabber.js">
</ script>

Consulte a example2.html para un ejemplo más completo.

La persistencia de pestañas usando cookies

Refiérase al ejemplo de cookies.html

{tab=Descargar}
ZIP Archive

- tabber.zip
Individual Files
- tabber.js
- tabber-minimized.js (<5k)
- example.html
- example2.html
- example-ajax.html
- example-cookies.html
- example.css
- example-print.css)
{/tabs}

Página fuente original de este artículo BarelyFitz Designs Web-standard solutions for a non-standard world Traducción
automática realizada gracias a la herramienta free online, pues yo de inglés voy bastante justo.

http://www.juntadeandalucia.es/averroes/~cepgr2/isla Potenciado por Joomla! Generado: 1 August, 2010, 22:17