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.
Comments
jQuery UI is a good bet since it will be packaged with Drupal 7.
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
D7 has jQuery UI which contains ui.tabs, so,,
http://jqueryui.com/demos/tabs/
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
http://drupal.org/project/quicktabs is an excellent module if your tab content is views or blocks.
Michelle
HI, thanks for this great script! I had spent a day trying and testing lots of different tabs examples to have tabs within a node-custom.tpl.php with no success. this works perfectly.
I have one question however. I am implementing a google map in one of the tabs/ divs and for some reason it cuts off the right 2 thirds of the map. I guess there is some sort of JS conflict here.
Any help or solution here would be great.
p.s If I resize the window the map renders perfectly
here is the page http://www.dkdev01.net/holidayn/casi-67
Post new comment