bill tsukuda

I've been working on a couple of sites the last week, and and both of them ended up using the "Popular Content" block from Drupal's Statistics module (not used on this site). One thing that I really don't like about that block is that is uses so much vertical space, so to make it all webified I decided to turn it into tabs. I know there's a couple of modules like Quicktabs that allow for easily configurable tabbed blocks, but this was going to be one of the few tabbed blocks (in one case the only one) on the site, and it seemed like overkill to install a new module to "tab" a single block. I decided to just use the jQuery Tools tabs plugin to fix the block. Here's the default output from Drupal:

  
Popular content
  

    

      
Today's:
      

        
Item 1
        
Item 2
        
Item 3
        
Item 4
        
Item 5
      
    
    

    

      
All time:
      

        
Item 1
        
Item 2
        
Item 3
        
Item 4
        
Item 5
      
    
  

My Issues With this block

Here's the stub of a plugin I wrote to handle the situation:

$.fn.extend({
  tabbify: function() {
    return this.each( function(){
      # The 
 tags in Drupal's output mess up formatting, so 
      # these get removed outright 
      $(this).find('br').each( function() {
        $(this).remove();
      })
      # In order for these to appear as tabs, we have to add a CSS class
      $(this).addClass("tabbed-panes");
      
      # We get a list of h3 tags from the block as these are going to 
      # act as our tab titles
      var headers = $(this).find('h3');
      var hcount = headers.length;
      var init = 1;
      var pid = $(this).parent().attr("id");
      var tabid = pid +'-tabs';
      var tablist = '
';
      
      # We iterate through the h3s and create list items from each
      headers.each( function() {
        tablist += '
'+$(this).html()+'
';
        if (init == hcount) {
          tablist +='
';
        }
        else {
          init++;
        }
        # I opted to remove the h3s, but I suppose I could have done this instead:
        # $(this).css({'display': 'none'});
        # It would have had the same effect, and not messed with what 
        # was there too much
        $(this).remove();
      });
      
      # I should note that the target of the plugin would be the div .content 
      # inside the block. The Tabs plugin requires an item list before the 
      # element containing the panels and this is where we insert that list
      $(this).before(tablist);

      # We initialize our tabs
      $("ul#"+tabid).tabs("#"+pid+" div.content > div");
    });
  }
});

...and here's how we call on this plugin:

$(document).ready( function() { 
  $("#block-statistics-0 .content").tabbify();
});

Demo