jquery ui tabs and the back button

For the site I help out with, xcat.sf.net, I used jquery-ui tabs.  The only issue I had was that I couldn’t do back button, and I started getting a few complaints from it…

So, after about 20 minutes of investigation, here is the code I used to make it work.  It works pretty well for cases when you navigate externally, but doesn’t work when you press the back button while on the page, expecting to go to the previous tab.  The jQuery team says that they’re working on this but its not in there today. Also, my approach refreshes the entire page with each click, that’s how I get the right page.  So it may not be optimal for many places.  Anyway, here is what I do:

<script type=”text/javascript”>
$(document).ready(function(){
var start = window.location.href.lastIndexOf(“#”);
var tabIndex = 0;
if (start !== -1){
tabIndex = window.location.href.substring(start+1, start+2);
}
$(‘#tabs’).tabs({
selected: tabIndex,
spinner: ‘Retrieving data…’,
select: function(event,ui){
window.location = “#” +  ui.index;
window.location.reload();
},
});
});
</script>

Then, down below in the HTML, I have:

<div id=’tabs’>
<ul>
<li><a href=”about.html”>About</a></li>
<li><a href=”download.html”>Download</a></li>
<li><a href=”start.html”>Getting Started</a></li>
<li><a href=”docs.html”>Documentation</a></li>
<li><a href=”support.html”>Support</a></li>
<li><a href=”test.html”>Testimonials</a></li>
</ul>
</div>

That makes it so that the back button is supported.  It changes the URL a bit, by giving it a nasty #<tabindex> but it does the trick for me.

Comments are closed.