Ttabs - Crear tabs en jQuery



TTabs
- No es necesario especificar la lista de las pestañas antes de la sección primera ficha. El plugin se crea a partir de las líneas, o puede especificar en la ficha las etiquetas directamente en el código Javascript.

La instalación es sencilla :

Primero creas un archivo .js con el siguiente código


/*
+-----------------------------------------------------------------------------+
| jQuery TTabs |
| This plugin creates a list of tab-labels for the jQuery UI Tabs. |
| It also calls the jQuery UI Tabs function so you can call just ttabs(). |
| |
| @param settings see config for defaults and description |
| @autor Martin Jarmar |
| @url http ://martinjarmar.cz/ |
+-----------------------------------------------------------------------------+
*/
(function($) {
$.fn.ttabs = function(settings) {
var config = {
'uitabs': {}, // also use ui.tabs() then set the parameters
// if false then not use ui.tabs
'tabarray': false // array with user tab names
};
if (settings)
$.extend(config, settings);
this.each(function() {
var tablist = "<ul>";
var i = 0;
$(this).children().each(
function () {
tablist += "<li><a href=\"#" + $(this).attr("id") + "\">";
if (config.tabarray) {
tablist += config.tabarray[i++];
}
else{
tablist += $(this).children().eq(0).hide().text();
}
tablist += "</a></li>";
}
);
tablist += "</ul>";
$(this).prepend(tablist);
});
if (config.uitabs)
return this.tabs(config.uitabs);
else
return this;
};
})(jQuery);


y lo añades antes de la etiqueta , la dirección de su ubicación ejemplo:

<br /><br /><script src="DOMINIO.COM/archivos/ttabs.js" type='text/javascript'/><br />


Si usas Blogger y no tienes para hostear el archivo, ya que es corto puedes colocarlo directamente en el head de esta forma:

<br /><script type='text/javascript'><br /><!-- COLOCA AQUI EL CODIGO --><br /></script><br />


Ahora abajo de este colocas el llamado DOM del script:

<br /><script type='text/javascript'><br />$(document).ready(function(){<br />  $("#tabs").ttabs();<br />});<br /></script><br />


Ahora ya estas listo para crear tabs, este seria un ejemplo del codigo:

<br /><div id="tabs"><br />  <div id="tabs-1"><br />    <h3>Titulo tabs 1</h3><br />    <p>Contenido tabs 1.</p><br />  </div><br />  <div id="tabs-2"><br />    <h3>Titulo tabs 2</h3><br />    <p>Contenido tabs 2</p><br />  </div><br />  <div id="tabs-3"><br />    <p>Contenido tabs 3 (este ejemplo seria una tabs plana)</p><br />    <ul><br />      <li>si busca en varias linea esta seria la numero 1</li><br />      <li>Linea numero 2</li><br />    </ul><br />  </div><br /></div><br />


No representa una gran dificulta instalar esta tabs.

Pagina Oficial | jQuery.com




Suscripciones

Blog Archivo