I recently wanted to add some jQuery UI tabs to nodes. Drupal 7 has jQuery 1.4 included in core, so we’ll take advantage of that.
This is how you do it:
First, edit template.php and create / make some changes to hook _preprocess_html.
function THEMENAME_preprocess_html(&$variables){ // This function looks for node 1 and only adds the javascript for this. // However it can be extended in different ways if required drupal_add_library('system', 'ui.tabs'); drupal_add_js('jQuery(document).ready(function(){ jQuery("#tabs").tabs({event: "mouseover"}); jQuery("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); jQuery("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); });', 'inline'); } |
*Note that you can remove ui-tabs-vertical if you want horizontal tabs. You can also change the mouseover event to the event you prefer.
This would be the markup:
<!-- TITULOS PESTAÑAS -->
<div id="tabs">
<div id="tab-list">
<ul>
<li><a href="#tabs-1">Titulo 1</a></li>
<li><a href="#tabs-2">Titulo 2</a></li>
<li><a href="#tabs-3">Titulo 3</a></li>
<li><a href="#tabs-4">Titulo 4</a></li>
<li><a href="#tabs-5">Titulo 5</a></li>
<li><a href="#tabs-6">Titulo 6</a></li>
<li><a href="#tabs-7">Titulo 7</a></li>
<li><a href="#tabs-8">Titulo 8</a></li>
<li><a href="#tabs-9">Titulo 9</a></li>
<li><a href="#tabs-10">Titulo 10</a></li>
</ul>
</div>
<!-- CONTENIDO PESTAÑAS -->
<div id="tab-content">
<div id="tabs-1">
<p>Texto de la TABS-1</p>
</div>
<div id="tabs-2">
<p>Texto de la TABS-2</p>
</div>
<div id="tabs-3">
<p>Texto de la TABS-3</p>
</div>
<div id="tabs-4">
<p>Texto de la TABS-4</p>
</div>
<div id="tabs-5">
<p>Texto de la TABS-5</p>
</div>
<div id="tabs-6">
<p>Texto de la TABS-6</p>
</div>
<div id="tabs-7">
<p>Texto de la TABS-7</p>
</div>
<div id="tabs-8">
<p>Texto de la TABS-8</p>
</div>
<div id="tabs-9">
<p>Texto de la TABS-9</p>
</div>
<div id="tabs-10">
<p>Texto de la TABS-10</p>
</div>
</div>
</div> |
And a sample output:
Image may be NSFW.
Clik here to view.