O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sorting tabs using the sortable interaction

When we implement tabs in a user interface, we might briefly consider the default ordering of the tabs. Obviously, we want the most relevant tabs accessible to the user in an order that makes most sense to them. But we seldom get this right in a way that makes everyone happy. So why not let the user arrange the tabs in a way that they see fit? Let's see if we can recruit the sortable interaction widget for some help by providing this capability in the tabs widget.

How to do it...

We'll use the following as the sample HTML driving our tabs instance:

<div id="tabs"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <p>Tab 1 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required