SummArg | Cursos y recursos para webmasters

09/02/2012

jQuery idTabs, plugin para añadir pestañas

jQuery idTabs es un plugin para insertar pestañas de forma simple. Descargamos el plugin y lo linkeamos a nuestro proyecto desde la sección <head> de nuestro documento.

<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.idTabs.min.js"></script>
 </head>

Para generar la sección de contenido y los links a cada pestaña, utilizamos el siguiente esquema:

<div id="usual2" class="usual">
 <ul>
 <li><a href="#tabs1">Tab 1</a></li>
 <li><a href="#tabs2" class="selected">Tab 2</a></li>
 <li><a href="#tabs3">Tab 3</a></li>
 </ul>
 <div id="tabs1" style="display: none; ">This is tab 1.</div>
 <div id="tabs2" style="display: block; ">More content in tab 2.</div>
 <div id="tabs3" style="display: none; ">Tab 3 is always last!</div>
 </div>

Finalmente indicamos a idTabs a que id debe aplicarse.

<script type="text/javascript">
 $("#usual2 ul").idTabs("tabs2");
 </script>

Descargar | Visto en Kabytes

Dejar un comentario