Blocks with tabs using JQuery and PHP

My way of creating tabbed blocks ( like the ones on http://www.observer.com/ ) using JQuery

First, I would like to thank all the people who helped me solve this problem, all the people on #drupal-support and #drupal-themes IRC channels. I had a great struggle with this particular problem, but in the end I somehow figured it all out. I think there is hope somewhere for us non-programmers, and that this forum thread will help someone lost in Drupal universe.

The idea

Create a block with 2 javascript tabs using JQuery, providing new comment / forum topic information ( 10 newest comments and 10 newest forum topics ). All of this is made directly in page.tpl.php but the PHP code is pretty simple, pure copy-paste stuff.

First step - creating the views

10 newest comments

1.Views > Add


Basic information


Name: tencomments


Block:
Provide block: checked


View Type: List view


Title: Top ten comments


Nodes per block: 10


Fields:


Comment: Subject


Comment: Created time


Comment: Author


Filters::


Comment: Comment Count ( Is greater than or equals 1 )


Comment: Pending approval ( equals NO )


Sort criteria


Comment: Created Time ( descending )


SAVE

10 newest forum topics

1.Views > Add


Basic information


Name: tentopics


Block:
Provide block: checked


View Type: List view


Title: Top ten comments


Nodes per block: 10


Fields:


Node: Title


Node: Created Time


Node: Author Name


Filters:


Node: Type ( is one of > forum topic )


Node: Published ( equals > yes )


Sort criteria:


Node: Created Time ( descending )

The two block views are created! You can theme them just like any other views using the procedure at Themeing your views page.

Second step - applying JQuery

JQuery is a JavaScript Library that is cross browser, easy to use, flexible and lightweight.

Downloading JQuery

Here you can download it ( the newest version is 1.2.2. ). I will not explain downloading of JQuery here becouse it is very well documented on their website. I downloaded the becouse I found out it was necessary for tabs to work to include the Tabs UI javascript in the site.Tabs UI, is the actual tabs javascript code made on top of JQuery library. You can download it here.

The Tabs.UI need the JQuery library to work!, here is the html I used for including necessary js.

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>

Ofcourse you have to change the path to the JS according to your site folder structure.

Step three - displaying the views in page.tpl.php

I used simple module_invoke function I found somewhere on the Drupal forums for displaying the views in the page.tpl.php.

The code for displaying the 10 comments view on page.tpl.php

<?php
$block = module_invoke('views', 'block', 'view', 'tencomments');
if ($block['content']) {
$output .= "<h2 class=\"title\">".$block['subject']."</h2>\n";
$output .= "<div class=\"content\">".$block['content']."</div>\n";
print $output;
} 
?>

The code for displaying the 10 forum topics view on page.tpl.php

<?php
$block = module_invoke('views', 'block', 'view', 'tentopics');
if ($block['content']) {
$output .= "<h2 class=\"title\">".$block['subject']."</h2>\n";
$output .= "<div class=\"content\">".$block['content']."</div>\n";
print $output;
} 
?>

The content part of the blocks is themed and changed like any other view. ( using the Themeing your views procedure or similar ).

Step four - adding proper html and javascript

Ok, for this step you will need to get a little familiar with JQuery Tabs ( just the simple things ), no need to worry. Here you can find the demos for using the JQuery Tabs.

This is my JQuery code from the head tag of page.tpl.php. Pretty simple if you read the basics of using JQuery.

$(document).ready(function(){
$("#tencomments > ul").tabs({ fxFade: true, fxSpeed: 'fast' });
$("#tentopics > ul").tabs({ fxFade: true, fxSpeed: 'fast' });
});

And here are my html blocks with the php code from above.

<ul>
<li><a href="#tab-1"><span>The ten comments</span></a></li>
<li><a href="#tab-2"><span>The ten topics</span></a></li>
</ul>
<div id="tab-1">
<div id="tencomments">
<?php
$block = module_invoke('views', 'block', 'view', 'tencomments');
if ($block['content']) {
$output .= "";
$output .= "<h2 class=\"title\">".$block['subject']."</h2>\n";
$output .= "<div class=\"content\">".$block['content']."</div>\n";
print $output;
} 
?>
</div>
</div>

<div id="tab-2">
<div id="tentopics">					
<?php
$block = module_invoke('views', 'block', 'view', 'tentopics');
if ($block['content']) {
$output .= "";
$output .= "<h2 class=\"title\">".$block['subject']."</h2>\n";
$output .= "<div class=\"content\">".$block['content']."</div>\n";
print $output;
} 
?>
</div>
</div>

The navigation is quite simple, just plain old anchoring, the rest is done automatically by JQuery.

All I did is made two divs and gave them id's #tab-1 and #tab-2, and inside of them is the code for displaying the views explained above. You can see that the my JQuery code is actually just applying to the div id's, everything else is made by JQuery magic. The only thing I did specify is the "> ul", to make sure JQuery knows that I am refering to my lists generated by views.

The end

I know all of this can be written in more detail, by I just don't have the time. If you have any questions I will gladly try to answer them, just don't ask me for the PHP, becouse I can just read it and somehow figure it out, but not write it myself.

If anything here is incorrect or could be more precise, please make a note about it. Hope this helps someone. Peace and love.