New feature request for Tabs

[mzeddd]

Hi,

I just wander would be good to have the following feature in Tabs.

When we have lots of open tabs special scroll buttons appear to let user get to first/last tab.
My proposal is to show menu with list of hidden tabs so user can activate any hidden tab in one click.

Thanks

[stworthy]

Extend a new method 'navmenu' to achieve this functionality.

Code:

<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.

Code:

$('#tt').tabs(...);
$('#tt').tabs('navmenu');

[mzeddd]

Looks good.

Thanks stworthy!

Do you have any plans to make it part of EasyUI by default?