How to make Jquery UI Tabs scroll horizontally if there are too many tabs_问答_开发者

How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Now the image above is an example of " too many tabs ", It appears as multiple line by default.

But I want to make it in a single line and horizontally scrollable,开发者_JAVA百科 either adding two arrows before the beginning tab and after the last tab, or scroll automatically are OK.

I have a different approach to this issue, as I think a scroll for the tabs is counter-intuitive. I created a plugin to do a dropdown when the tabs break to a second line.

https://github.com/jasonday/plusTabs

I was recently looking for a solution to this but none of the other plugins / examples seemed to work with jQuery 1.9+, I also think that Jason's answer of creating a 'more' tab and displaying any extra tabs as a drop down provides the best UI experience, and so I expanded on his answer and created a jQuery plugin for 1.9+ that extends jQuery UI tabs, if the total width of all of the tabs exceeds the width of the tabs container then the additional tabs are grouped together in a dropdown.

How to make Jquery UI Tabs scroll horizontally if there are too many tabs

You can see the JSFiddle Demo to see it in action. Try resizing your browser window to see it working.

Or you can view the full plugin code at JSFiddle.

Initialising 'Overflow Tabs' is as simple as this:

$("#tabs").tabs({
    overflowTabs: true,
    tabPadding: 23, 
    containerPadding: 40,
    dropdownSize: 50
});

tabPadding is the number of pixels of padding around the text in a tab.

containerPadding is the padding of the container.

dropdownSize is the pixel size of the dropdown selector button

I have tested this on the latest versions of Chrome, Firefox, and IE. If you spot any issues or can improve this then feel free to fork it and go ahead.

Now also available on GitHub.

None of the plugins listed here quite worked for me (most are outdated and not compatible with jQuery 2.0+) but I eventually found this: https://github.com/joshreed/jQuery-ScrollTabs ...worth adding to the list.

I've just made a very simple plugin for this. Basically you have to add one fixed length div and a moveable one to the tab navigator.

Plugin code:

(function ($) {
var settings = {
    barheight: 38
}    

$.fn.scrollabletab = function (options) {

    var ops = $.extend(settings, options);

    var ul = this.children('ul').first();
    var ulHtmlOld = ul.html();
    var tabBarWidth = $(this).width()-60;
    ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
    var leftArrow = ul.children().last();
    leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
    leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');        

    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
    var rightArrow = ul.children().last();
    rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
    rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');        

    var moveable = ul.find('.moveableContainer').first();
    leftArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;

        if (currentPosition + offset >= 0) {
            moveable.stop().animate({ left: '0' }, 'slow');
        }
        else {
            moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
        }
    });

    rightArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;
        var tabsRealWidth = 0;
        ul.find('li').each(function (index, element) {
            tabsRealWidth += $(element).width();
            tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
        });

        tabsRealWidth *= -1;

        if (currentPosition - tabBarWidth > tabsRealWidth) {
            moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
        }
    });


    return this;
}; })(jQuery);

Check it out at http://jsfiddle.net/Bua2d/

Here is a plugin for that: http://jquery.aamirafridi.com/jst/

I've also created an jQuery plugin for it here, but my main focus was on creating such structure for mobile sites that have little space and could rely also on scrolling horizontally with touch as well as control arrows.

The solution looks like the following:

How to make Jquery UI Tabs scroll horizontally if there are too many tabs

I'm using Bootstrap and to implement the plugin you basically need to include:

In you HTML the following structure so the arrows can work correctly (I'm using font-awesome for them)

 <div id="js_image_selection" class="horizontal-scrollable-tabs">
  <div class="scroller arrow-left"><i class="fa fa-arrow-left"></i></div>
  <div class="scroller arrow-right"><i class="fa fa-arrow-right"></i></div>
  <div class="horizontal-tabs">
    <ul role="tablist" class="nav nav-tabs nav-tabs-horizontal">
      <li role="presentation" class="active"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
    </ul>
  </div>
</div>

And call in you Js:

$("#js_image_selection").horizontalTabs();

Hope it helps anyone in the future! Cheers!

One plugin can be found here https://github.com/Casper1131/scroller it can be used for any undordered list.

Re: André Lourenço - Great addon, just wanted to throw in a hack that needs refining that allows the scroller to resize on window resize (ie: rotate mobile device);

    if(!$(".fixedContainer").length) {
        ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
        ul.append('<div class="leftBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
        var leftArrow = ul.children().last();
        leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
        leftArrow.children('.ui-icon-carat-1-w').first().css('text-align', 'center');        

        ul.append('<div class="rightBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
        var rightArrow = ul.children().last();
        rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
        rightArrow.children('.ui-icon-carat-1-e').first().css('text-align', 'center');        
    } else {
        var leftArrow = $(".leftBtn");
        var rightArrow = $(".rightBtn");
        $(".fixedContainer").css("width", tabBarWidth);
    }

Then I call it again on window resize ie:

    $(window).resize(function(e){
        $("#tabs").scrollabletab();
    });

Not the most efficient way to do it, but it works for my testing purposes at the moment.

I created yet another plugin for this. This time using Chrome style tab-resizing behaviour.

How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Initialize with

$( ".tabpanel" ).tabs().tabs('overflowResize');

Demo

GitHub

There are multiple scenarios and cases to handle when showing tabs on single line.

Simple solution would be to add a div around the ui-tab-header <ul> and set the overflow as scroll. This method works out of box as the browser handles the scrolling through the tab headers. But the default scrollbar provided by browser will look odd. So you need a customize/stylish scrollbar addon. OR
To use an jQuery UI tabs extension like the below one:

Extended jQuery UI widget that offers scroll-able tab feature and does automatically handle responsive page size changes by showing navigation controls when required.

Features:

It is responsive or fluid layouts
Has support for touch swipe to scroll through tab headers in touch devices (* requires external dependency)
Fully customizable & css based styling
Supports removal of tabs using close button
No extra HTML structure changes required, it automatically enhances the markups on the fly.

https://davidsekar.github.io/jQuery-UI-ScrollTabs