Before I begin, a quick apology to InsideRIA readers. I was asked to join the team last year, and wrote for the blog for a short time, but then, life, also known as a new job, hit me hard and I simply didn't have the time to write. I'm pleased to be able to return, and want to thank OReilly for having me back. Since my last visit, I've had a lot more exposure to Flex (via some kick butt development at work) and have recently spent a lot of time with jQuery. I hope to spend the new few weeks speaking about jQuery and integration with ColdFusion in particular. My plan is to have a regular blog entry on jQuery early in the week. (Normally about me something learning new about jQuery!) Later in the week I plan on rounding up links to blog entries, forums, new/updated plugins, that may be of interest to readers. I encourage folks to send me links during the week (ray at camdenfamily dot com). Ok, enough preamble. Let's talk about tabs. I've recently began playing with the jQuery UI library and am finding it quite useful. I had a bit of trouble at first (see my fumbling attempts here), but now that I've gotten familiar with the "jQuery UI way" I feel a lot more comfortable. Tonight I spent some time with the Tabs component. Like all jQuery UI components, you can head over to the Build Your Download to create a customized zip. I got by with the bare minimum of Core and Tabs with the default theme. Creating tabs is as simple as setting up some simple HTML and "enabling" it with a line of JavaScript code. Here is a bare bones example: If you ignore the JavaScript, all we have here is a simple unordered list and 3 div items. The JavaScript we do have: $("#example").tabs() simply re-designed the list into tabs. I love how simple that works and even better - it is immediately evident that even without JavaScript enabled this is still going to be a page a person can read. (You can see this demo here). Modifying the code to load content via Ajax is even simpler. Changing the link from an internal anchor to an external page url handles everything: Notice I've modified the second LI item to point to second.html. I've also removed the div since the content is no longer on the page. To the user though this just plain works and once again it is about as simple as things can get. You can see the complete demo here. So the docs go into much greater detail about what the tabs support. As you can probably guess there are various event handlers and methods as well as numerous options on how the tabs are set up. I thought it would be interesting to see how difficult it was to create tabs that could be bookmarked. The docs mention a cookie option which requires an optional download of another library, but the cookie option would allow let one user to return to his or her previous tab. It wouldn't let me share a URL to a specific tab with someone else. I began by adding some code to handle the tab select event: The tabsselect event runs when a tab is selected. One of the values I have access to is the tab's selected index. This is 0 based, but I was worried that would confuse users so I added one to it. I change the browser's URL to point to #N where N will be the tab selected. Simple enough to set, but how do we handle noticing it on the page load? This code checks the browser for a hash value. If one exists, we use the tabs method API to set the value. Since I used a 1 based index for my URLs (sorry, you will never convince me 0 based indexes make sense) I subtract one from the value before passing it to the API. You can see an example of this here: http://www.coldfusionjedi.com/demos/jquerytabs/test3.html#2. The #2 in the URL should auto-select the second tab. Ok, one more example, this time with ColdFusion. Here is a quick example where every tab links to one particular dynamic file: My content.cfm file is rather simple. A more real world example would hit the database, a CFC, or whatever: It isn't too exciting but you can see this here. Any comments? How about real life examples? Anyone using this on their site?

Read more from Raymond Camden.