Extend a new method 'navmenu' to achieve this functionality.
<script>
(function($){
$.extend($.fn.tabs.methods, {
navmenu: function(jq){
return jq.each(function(){
var target = this;
$(target).children('.tabs-header').find('.tabs-scroller-left,.tabs-scroller-right').unbind('.navmenu').bind('contextmenu.navmenu', function(e){
e.preventDefault();
var titles = $.map($(target).tabs('tabs'), function(t){
return t.panel('options').title;
});
var menu = $('<div></div>').appendTo('body');
menu.html($.map(titles,function(t){return '<div>'+t+'</div>';}).join(''));
menu.menu({
alignTo: this,
onHide: function(){
setTimeout(function(){
menu.menu('destroy');
})
},
onClick: function(item){
var index = $(item.target).index();
$(target).tabs('select', index-1);
}
}).menu('show');
});
});
}
});
})(jQuery);
</script>
After calling this method, you can right click on the scroller button of the header. The drop-down menu will display to allow the user to navigate to any tab panels.
$('#tt').tabs(...);
$('#tt').tabs('navmenu');