By silverd43 on

This tutorial is very useful since jQuery UI is now included in Drupal core. If you want to see this tutorial, please visit my Drupal tutorial website.

⋅ Categories: Drupal 7.x

Comments

silverd43’s picture

silverd43 commented

I have also posted a code example for jQuery UI Dialog's.
http://dansilvercentral.com/tutorial-add-jquery-ui-popup-drupal-7

Matthew Slack’s picture

Matthew Slack commented

We newbies really need to know where that little bit of PHP should go! It is a common problem in many examples. The code is great - but when starting out with a mountain to climb our steps are small!

shotokai’s picture

shotokai commented

Matthew,

That is going to depend on just what you are trying to add tabs to. In this example the author is explaining how to add tabs to a simple piece of content using the PHP filter, so the code provided would be inserted in the body field using the PHP filter input type. You could use a variation on this method to add tabs to all content of a particular content-type by providing your own content-type specific template. There are loads of different possibilities, which is why sometimes instructions seem vague.

Tom Ash’s picture

Tom Ash commented

This links down, heres its contents:

Adding jQuery to websites allows them to be interactive and visually appealing. jQuery UI is now included in Drupal 7 and websites are starting to take advantage of this new feature. In this tutorial I will show you how to get jQuery UI tab's into a regular drupal node (page, article, etc). The end result of this tutorial will look like this:

You can also try a live demo of jQuery UI tabs .

In order to get this result we need to use some PHP and HTML. First, make sure the PHP filter module is enabled so we can execute PHP. Next, use PHP to load the jQuery UI Library.

<?php
drupal_add_library ( 'system' , 'ui.tabs' );
?>

Now, we use jQuery to make a div, which will contain the jQuery UI tabs. To execute javascript, use the drupal_add_js() function.

<?php
drupal_add_js ( 'jQuery(document).ready(function(){
jQuery("#tabs").tabs();
});
' , 'inline' );
?>

Now we can construct the different tabs using HTML. In this example, I will create three tabs, each containing some text and a picture. First, define the three tabs.

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>

Now, we can fill the tabs with content. Make sure the div's id is the same as defined above in the hyperlink.

<div id="tabs-1"><img src=" http://dansilvercentral.com/sites/default/files/Koala%20-%20Copy.jpg#ove... style="float: right;" alt="drupal 7 jquery ui tabs" />
Hello World 1!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme

</div>
<div id="tabs-2"><img src=" http://dansilvercentral.com/sites/default/files/Tulips%20-%20Copy.jpg#ov... alt="drupal 7 jquery ui tabs" style="float: right;"/>
Hello World 2!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme

</div>
<div id="tabs-3"><img src=" http://dansilvercentral.com/sites/default/files/Penguins%20-%20Copy.jpg#... alt="drupal 7 jquery ui tabs" style="float: right;"/>
Hello World 3!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme
</div>
</div>
Tips

Try changing the theme of jQuery UI.
Explore the jQuery UI website to find features that you like

If you prefer to look at the final code, here it is:

<?php
drupal_add_library ( 'system' , 'ui.tabs' );
drupal_add_js ( 'jQuery(document).ready(function(){jQuery("#tabs").tabs();});' , 'inline' );
?>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1"><img src=" http://dansilvercentral.com/sites/default/files/Koala%20-%20Copy.jpg#ove... style="float: right;"/>
Hello World 1!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme

</div>
<div id="tabs-2"><img src=" http://dansilvercentral.com/sites/default/files/Tulips%20-%20Copy.jpg#ov... style="float: right;"/>
Hello World 2!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme

</div>
<div id="tabs-3"><img src=" http://dansilvercentral.com/sites/default/files/Penguins%20-%20Copy.jpg#... style="float: right;"/>
Hello World 3!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme
</div>
</div>
rwilson0429’s picture

rwilson0429 commented

Thanks Thomas Ash

ReggieW

relaxnow’s picture

relaxnow commented

Thank you!

titouille’s picture

titouille
Primary language French
commented

By using 

<ul>
  <li><a href="#tabs-1">my link</a></li>
  <li><a href="#tabs-2">my link</a></li>
  <li><a href="#tabs-3">my link</a></li>
</ul>
<div id="tabs-1">...</div>
<div id="tabs-2">...</div>
<div id="tabs-3">...</div>

I had some problems. jquery tabs adds 3 new containers with the webpage itself and don't use the standard div's to build the tabs. I must use full url in li like this :

<?php global $base_url; ?>
<ul>
  <li><a href="<?php print $base_url . $node_url; ?>#tabs-1">my link</a></li>
  <li><a href="<?php print $base_url . $node_url; ?>#tabs-2">my link</a></li>
  <li><a href="<?php print $base_url . $node_url; ?>#tabs-3">my link</a></li>
</ul>

to correct the behavior. @see http://stackoverflow.com/questions/13837304/jquery-ui-non-ajax-tab-loadi... for more informations.

http://www.sabugo.ch
http://www.titouille.ch

f4o’s picture

f4o commented

This is great! Just what I needed. Thank you.