Está en la página 1de 3

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>

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.