Raxan Framework: Rich TabStrip Plugin

NOTE: This is a guest post from Raymond Irving of xWisdomHTML.com.

If you're looking for a quick and easy way to add tabbed navigation to your website then you must checkout the Raxan Rich TabStrip plugin. With the Rich TabStrip plugin and CSS classes can add unobtrusive interactive tabs to a web page or application within a few minutes.

TabStrip Features:

  1. Custom Animations
  2. Built-in Ajax support
  3. Unobtrusive Design
  4. Use CSS classes to create themes

TabStrip Themes for everyone!

Impress your users with beautifully designed tab themes that can be applied to any tabstrip with just a single line of code. Creating an eye-catching theme only requires two background images and a few lines of css codes.

<ul id="tab1" class="tabstrip nicetab">
<li><a href="#home">Home</a></li>
<li class="selected"><a href="#news">News</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

Go from a plain unordered list to a nice looking tabstrip with or without javascript:

Animations the way you like

In addition to custom themes, you can also create great eye-catching animation effects that will keep your users coming back for more.

html.include('jquery');
html.include('jquery-ui-interactions');
html.include('rich/tabstrip');
$('#tab1').tabstrip({
animate:    function(i,a,b){
b.hide('slide',{direction:'down'},'',function(){
a.show('slide',{direction:'down'});
})
}
});

Ajax built in from the start!

And what would the tabstrip be like without Ajax? Ajax Support is built in from the start to provide a rich dynamic experience without the need for any additional lines of code. The best part of all is that it supports the same jQuery syntax that many developers have come to know and love.

To add ajax loading to your TabStrips, simply add the url to the anchor tags used inside the unordered list items. For example:

<li><a href="./aboutus.html#about">About</a></li>
<li><a href="./contactus.html#contact">Contact</a></li>

You can also use the jQuery CSS selectors to select an element from the ajax content that you would like to display within the tab container. 

<li><a href="./content.html#information;div.infobox">Contact</a></li>

To see the TabStrip Plugin in action visit the TabStrip Explorer web page. To learn more about Raxan, visit The Raxan Framework web page.