Placing Drupal Content into a Tabs Interface
Mon, Nov 30, 2009 by Jonathan
These days, one of the more popular ways to display content is through a tabbed interface. It allows a user to add more content to their web page, but simultaneously organize it to only display the most relevant information first. There are multiple jQuery plugins that will achieve the desired basic look of multiple tab blocks on a page, and others offer extensibility to do custom behaviors.
The most recent plugin I used is called jtabber. The page offers straightforward implementation instructions, which basically consists of enclosing blocks in the proper div tags, and the script takes care of the rest. You can also customize the behavior (fade vs. slide) and use the standard .animate() js function to do sliding from the left as opposed to up or down.
$("#"+contentDivId).animate({ width: 'show' }, {duration: effectSpeed});
Share your most, or least, favorite jQuery plugin to achieve a tabbed interface here.
admin posted on December 3, 2009 10:13 pm
Hi Mario,
Unfortunately, Jonathan is away sick, but I can assist you with your problem.
First, I just have a few questions. By "tabs module" do you mean the jTabber plugin? and can you tell me which Javascript files you have included? From your description, if the tabs do not work at all, please check that you have jtabber.js included. You're HTML layout should match the example here (http://boedesign.com/blog/2008/02/19/jtabber-for-jquery/).
The only 2 JS files needed for jTabber are jquery.js and jtebber.js. jquery.js is already included by default. Just make sure jtabber is there too.
I hope the link is helpful to you. If you have any other questions, or want a better explanation, feel free to ask.
/David
Michelle posted on December 1, 2009 9:12 pm
http://drupal.org/project/quicktabs is an excellent module if your tab content is views or blocks.
Michelle
Mario Hernandez posted on December 1, 2009 7:17 pm
Hi Jonathan,
That was a great post but I was wondering if you can help me out on this. I created a custom drupal them from scratch and I wonder if I am missing something on my page.tpl.php page because the tabs don't seem to work. I donwloaded the jqueryui and tabs modules and enabled them and I also dowloaded the jquery.ui and placed in inside the jqueryui folder in the modules section. I created a page and a block using the tabs code from the jquery website but the tabs don't work. Am I missing something? what else do I need to add to my drupal environment to make this work?
I'd appreciate your feedback and keep up the great work.
Best regards,
mario
dalin posted on December 1, 2009 6:01 am
jQuery UI is a good bet since it will be packaged with Drupal 7.
Pasqualle posted on December 1, 2009 2:01 am
D7 has jQuery UI which contains ui.tabs, so,,
http://jqueryui.com/demos/tabs/
Post new comment