Redo The Web

Enable Back Button Handling With Twitter Bootstrap Tabs Plugin

Twitter Bootstrap offers a neat plugin called Tabs, to add "quick, dynamic tab and pill functionality for transitioning through local content". The problem is that this plugin doesn't support back button navigation. In other terms, if you switch tabs and then go to another page, a click on the back button of your browser brings you back to the first open tab, not the last open one.

Yuck.

Unfortunately, the author of the plugin doesn't want to support this, as it's impossible to implement in a cross-browser way.

But if you don't mind leaving behind all the IE7 users and go the HTML5 way - for instance for a backend interface with limited access - then it's pretty easy to implement. Thanks to the new HTML5 history API, you can manipulate the browser history to fit your needs. Implementing back button navigation to a Twitter Bootstrap tab then becomes easy:

It took me a while to figure out how to implement this feature for Uptime, the remote monitoring tool written in Node.js, so I hope someone will find this useful.

For more information about this new HTML5 API, I recommend these two links:

Published on 17 May 2012 with tags JavaScript

comments powered by Disqus