Create a tabbed search form with YUI

Yahoo! makes it easy to create an accessible, handsome tabbed interface. I used their Tab View library to create the tabbed search form for V3GGIE.com. While Tab View can create the tabbed content dynamically, I’m using it to hide/show hard-coded individual forms.

Update: I’ve removed the tabbed interface from V3GGIE.com. This particular use of the tabbed module seemed to have created some confusion in users. The approach is still valid, just not the way I originally implemented it. See the tabbed search form on V3GGIE.com

Step 1. Create the basic HTML code.

The tabbed code is a simple pattern:

  1. Start with a parent div and give it an id and class=”yui-navset”.

  2. Create an unordered list inside this div with class=”yui-nav”.
  3. Each list includes a deep link to a corresponding div that is also a child of the parent div. The link text in an em tag.

  4. V3GGIE Search
  5. Create a div with class=”yui-content” and create a set of content containing divs. Each div has an id.

    ...
    ...
    ...

  6. Insert the Tabview CSS at the top of the page, the Tab View JS at the bottom of the page, create a small js that instantiates the tab-view module.
  7. For easier styling, use the sam_skin CSS package and add class=”yui-skin-sam” to the body.

Step 2. Use PHP to make it more interesting

Each page calls this chunk of code to insert the tabbed form, it also sets a variable ($selected), determining which tab is selected on page load. I’m also inserting the last search query into the text input to make it easier on the user. This is easily done by grabbing the query from the Request object.

The finished code:




Try "San Francisco Pho", "Paris Fromage", or "92104 tofu"


Try "corn chowder" or "vegan pizza"


Try "Vegetarian Chinese Olympics"


Try a subject: "PETA", "Tempeh", or "Paris -Hilton Vegetarian"

View the source as a text file

The Final Product

We now have a tabbed module that allows the user to find recipes, news, blogs, and local restaurants from any page. This is an easy introduction to the YUI libraries. However, I came across the following surprises:

  • The order of the tabs must match the order of the target divs. I moved my tabs around and discovered they were toggling the wrong forms.
  • The links that generate the tabs need to have em tags surrounding the text
  • You’ll need to download the entire YUI package to gain access to the CSS and sprites needed for the library. The examples on the YUI site assume relative links to files, you will either need to duplicate that file structure or upload the skin’s sprite and change the CSS accordingly.

Convert American date format to European and vice versa

This PHP script came up in a discussion I had today with Jon Whitlock, who’s from the other side of the pond (U.K.) It’s a nifty little regular expression that converts an American date (12/31/2006) into a European date (31/12/2006). It struck me as a neat little snippet that others could probably use.

Updated Code

As Scott mentioned in the comments, I have changed the snippet to put quotation marks around the second regular expression.

$date=“12/31/2006″;
print ereg_replace(“([0-9]+)/([0-9]+)/([0-9]+)”,“\2/\1/\3“,$date);

As he described it, the first section of the ereg_replace statement takes the date and places it into three variables, 1,2,and 3. It then places those variables into a new string in the 2/1/3 pattern. That makes this a round trip function. Your European dates can get converted back to Yankee days as well.