I want to implement tabs within a Node Page. I tried Quicktabs but neither the ajax nor the non-ajax modes are my cup of tea... I like jQuery Tab's way of hiding/unhiding block elements. Thus Tabs module is the best option (I could also be using jQuery UI's plugin from scratch but it feels redundant to do so since I alreade have Tabs module installed).

so far, I've called the script functions and coded the html for the tabs:

<?php
drupal_add_js(drupal_get_path('module', 'tabs') .'/ui.core.js');
drupal_add_js(drupal_get_path('module', 'tabs') .'/ui.tabs.js');
drupal_add_js(drupal_get_path('module', 'tabs') .'/tabs.js');
?>
<div id="tabs-demo">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.</p>
	</div>
</div>
<script>
$(function() {
	$('#tabs-demo').tabs();
});
</script>

I get a JS error:

Drupal.settings.tabs is undefined
    var fx = {duration: Drupal.settings.tabs.speed}; 

In the /tabs.js file...
If I get rid of the call to that file, the error disappears but the tabs don't work either.

I've been trying to find how to do this for two weeks now and just can't find a solution, and deadline is here. I could really use a tip.

Comments

Anonymous’s picture

Issue tags: +tabs, +page, +node

I finally went on using the custom jQuery UI files. It works and that counts. Here it goes for whom it may be of interest.

drupal_add_js(drupal_get_path('module', 'custom-module') .'/js/jquery-1.4.4.min.js');
drupal_add_js(drupal_get_path('module', 'custom-module') .'/js/jquery-ui-1.8.9.custom.min.js');
drupal_add_css(drupal_get_path('module', 'custom-module') .'/css/custom-skin/jquery-ui-1.8.9.custom.css', 'theme', 'all'); 

I still would like know how to re-use the Tabs Module, and that would make for a handy Module to add to the modules who use the Tabs Module framework... so any input is welcome.

Makku01’s picture

Hi Naoise,

where did you get the custom jquery files from?

dxhuong’s picture

Just call function tabs_load().

Hope this help!