2

How do you add jQuery tabs in a "template.php" file?
I'm trying to add it with drupal_add_library('system', 'jQuery.tabs') or drupal_add_js('/misc/ui/jquery.ui.tabs.min.js'), but I'm not having any luck.

Here's my full snippet:

function custom_theme(&$existing, $type, $theme, $path) {
  $hooks = array(); 
  drupal_add_library('system', 'ui.tabs');
  // custom.js will call jQuery.tabs!
  drupal_add_js( path_to_theme() .'/js/custom.js', array('weight' => 9));

  return $hooks;
}
1
  • Remember to accept answers for your questions; doing so, your reputation will be increased, and you will help this site to go past the beta phase. – apaderno Apr 30 '11 at 12:55
2

hook_theme() is a hook that must returns the list of theme functions implemented by a module, or a theme.

Calling drupal_add_library() or drupal_add_js() inside hook_theme() is not the way to add a JavaScript file to a page.

As reported in Structure of the .info file, a theme can use the scripts directive to declare the JavaScript files that it uses.

scripts[] = js/custom.js

Alternatively, a theme can use drupal_add_js() inside a theme function, or use the following snipped inside page.tpl.php, or any alternative page template Drupal would use.

drupal_add_js($path_to_script);
$scripts = drupal_get_js();
2
  • What if i wanted to load it on only a particular page. I.e. I only have tabs on a particular node – chrisjlee Apr 12 '11 at 14:35
  • @Chris J. Lee I will expand my answer. – apaderno Apr 12 '11 at 14:48
1

I think the specific question is regarding adding jQuery UI Tabs. Another answer speaks to adding custom javascript files.

When I have a lot of tabs on many pages, I've been accomplishing this is in a custom module with hook_init()

function mymodule_init(){
    drupal_add_library('system','ui.tabs');
}

In the comments, this questions asks how to accomplish this for a specific page (or node).

You can do this in your theme in template.php with template_preprocess_page():

function mytheme_preprocess_page(&$variables) {
    echo "<pre>"; print_r($variables['node']); echo "</pre>";   // great for debugging
    if ($variables['node']->nid == 3) drupal_add_library('system', 'ui.tabs');
}

The above code assumes that node 3 is the target page that has the jQuery UI Tabs.

Don't forget to flush caches after adding these.

So now we've loaded the library. The next step is to add a javascript file to your module/theme. This is done in the mytheme/mymodule .info file. Add

scripts[] = js/script.js

Make the 'js' folder, create the script.js, and follow Drupal practices by following this pattern:

(function($, Drupal, window, document, undefined) {
    Drupal.behaviors.my_custom_behavior = {
        attach : function(context, settings) {
            // assuming your div is "tabs"
            jQuery("#tabs").tabs();
        }
    };
})(jQuery, Drupal, this, this.document);

So, for sake of simplicity, you can have your node 3 content set to Full HTML (or PHP in this example), and the body like this, which will show two Views on different tabs:

<div id="tabs">
<ul>
  <li><a href="#tabs-1">Stack Overflow</a></li>
  <li><a href="#tabs-2">Drupal StackExchange</a></li>
</ul>
  <div id="tabs-1">
    Let's show our View for Stack Overflow
    <?php echo views_embed_view('stackoverflow', 'machine_name_foo'); ?>
  </div>
  <div id="tabs-2">
    And for Drupal
    <?php echo views_embed_view('drupal_se', 'machine_name_bar'); ?>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.