We can also configure the jQuery UI tabs widget to load the individual tab content in the background using Ajax requests. Using this approach, we can reuse the same widget on several pages. However, maybe we don't want to use asynchronous HTTP requests. If your application doesn't use it anywhere else, why use it for the top-level navigation?
This also introduces another problem - if you're using the tabs widget as a top-level navigation tool, you probably want the links displayed to the user so they can visit these pages directly. The tabs demo page actually has a work-around that lets the user follow the link set in the tab. So it almost behaves like a link, but there is a problem with this approach in that it still appear to be a link to the end user. For example, they can't right click it and copy link address. It would be nice if we could use the tabs widget as a top-level navigation widget that uses standard links. This way we can theme it and attach additional behavior to it if we're so inclined.
Below is an example of how I was able to get this working. Here is the basic HTML markup.
<html>
<head>
<title>jQuery UI URL Tabs</title>
<link type="text/css" href="jqueryuitheme.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryui.min.js"></script>
<script type="text/javascript" src="urltabs.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="/page1/">Page 1</a></li>
<li><a href="/page2/#content">Page 2</a></li>
<li><a href="/page3/">Page 3</a></li>
</ul>
<div id="content">
<p>Some content...</p>
</div>
</div>
</body>
</html>
And here is the urltabs.js file used to create the widget.
$(document).ready(function(){
//Get the selected tab, and it's URL.
var selection = $('#tabs ul li a[href$="#content"]');
var selection_url = selection.attr('href')
.replace('#content', '');
//Replace the #content href.
selection.attr('href', '#content');
//Create the tabs widget, and select the proper tab.
$('#tabs').tabs({
selected: selection.parent().index(),
});
//Make each tab a link by setting the href attribute.
$('#tabs ul li a').each(function(){
var url = $.data(this, 'load.tabs');
if(url) {
$(this).attr('href', url);
}
else {
$(this).attr('href', selection_url);
}
});
//Make sure the selected tab also behaves like a link.
$('#tabs ul li.ui-tabs-selected a').click(function(){
location.href = $(this).attr('href');
return false;
}).css('cursor', 'pointer');
});
And there you have it - a tabs widget that will behave like plain old links. Now for a few explanations.
The central idea to this approach is that the HTML markup uses a central #content div for displaying the selected tab content. The selected tab link URL uses this anchor to say "I'm currently selected". The markup is fairly simple and can easily be handled by any template system and server-side menu constructs.
The construction of the widget itself is done in five steps. First, we need to locate the currently selected tab and store its URL. We do this by finding the link with #content at the end. Next, we replace the URL with #content. This is required in order to display any content. Next, we actually create the tabs widget using the specified tab selection. At this point, we have a tabs widget, but it still wont use regular URL links because the widget will intercept the click events.
There are two things left to do once the widget has been created. First, we find all tab links and set their URL back to what it was originally, before the widget was created. However, the selected tab is different - we cannot retrieve the original URL from the widget and so this is why we stored it before the widget was created in selection_url. Finally, we make the currently selected tab a link too. Users will intuitively try to click it, so we may as well give them what they want.
Do you have a working example of this?
ReplyDeleteHi,
ReplyDeleteI don't have anything I can point to publicly. Did you have trouble getting my sample code to work?
I almost cried when I found this post. I am new to jquery. I spent hours and hours trying to make jquery tabs work. But they kept loading content via ajax. All I wanted was the look. I finally decided to search one last time. using your code, the tabs worked just like static tabs. THANK YOU SO MUCH.
ReplyDeleteThis looks promising but I have no idea how to make it work.
ReplyDeleteFrom what I understand, this code can be used with jQuery UI tabs so that you can link inside of tabs on a given page. Is this correct? This is exactly what I have been trying to do for ages now, unsuccessfully.
I copied/pasted the above code into my own pages but don't know where to go from here. Any help would be appreciated.
Thanks
Hi,
ReplyDeleteYour understanding is correct. Instead of loading the tab content asynchronously, this approach treats the tabs as though they're regular links. That is, they'll take the user to wherever the tab URL is pointing to.
The benefit is that you can reuse this same code on every page. The "active" tab is the current page. So the only dynamic parts of the HTML you need to change are the list items and the tab content itself. Remember, the currently "active" tab URL has "#content" at the end of it.
Hope that helps. Good luck!