Как сделать, чтобы вкладки пользовательского интерфейса Jquery прокручивались горизонтально, если вкладок слишком много

Question

Теперь изображение выше является примером "слишком много вкладок", по умолчанию оно выглядит как несколько строк.

Но я хочу сделать это в одной строке и прокручивать по горизонтали, добавив две стрелки перед начальной вкладкой и после последней вкладки, или автоматически прокручивая.

Answer 1

У меня другой подход к этой проблеме, так как я думаю, что прокрутка для вкладок нелогична. Я создал плагин для раскрывающегося списка, когда вкладки переходят на вторую строку.

https://github.com/jasonday/plusTabs

Answer 2

Недавно я искал решение этой проблемы, но ни один из других плагинов / примеров, похоже, не работал с jQuery 1.9+, я также думаю, что ответ Джейсона на создание вкладки «больше» и отображение любых дополнительных вкладок в виде выпадающего менюобеспечивает лучший пользовательский интерфейс, поэтому я расширил его ответ и создал плагин jQuery для 1.9 + , который расширяет вкладки пользовательского интерфейса jQuery, если общая ширина всех вкладок превышает ширину контейнера вкладок, тодополнительные вкладки сгруппированы в раскрывающемся списке.

Вы можете увидеть JSFiddle Demo , чтобы увидеть его в действии.Попробуйте изменить размер окна браузера, чтобы оно работало.

Или вы можете просмотреть полный код плагина в JSFiddle .

Инициализация «Переполнения вкладок» так же проста:

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

tabPadding - количество пикселей заполнения текста вокруг вкладки.

containerPadding - заполнение контейнера.

dropdownSize - размер пикселя выпадающей кнопки выбора

Я проверял это на последних версиях Chrome, Firefox и IE.Если вы заметили какие-либо проблемы или можете улучшить их, не стесняйтесь раскошелиться и продолжайте.

Теперь также доступно на GitHub .

Answer 3

Ни один из плагинов, перечисленных здесь, не работал для меня (большинство устарело и не совместимо с jQuery 2.0+), но в итоге я нашел это: https://github.com/joshreed/jQuery-ScrollTabs ... стоит добавить в список.

Answer 4

Я только что сделал очень простой плагин для этого.По сути, вам нужно добавить один div фиксированной длины и подвижный в навигатор по вкладкам.

Код плагина:

(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);

Проверьте это на http://jsfiddle.net/Bua2d/

Answer 5

Вот плагин для этого: http://jquery.aamirafridi.com/jst/

Answer 6

Я также создал плагин jQuery для него здесь , но мое основное внимание было сосредоточено на создании такой структуры для мобильных сайтов , которые имеют мало места иможет также полагаться на горизонтальную прокрутку с помощью touch , а также управляющие стрелки.

Решение выглядит следующим образом:

Я использую Bootstrap и для реализации плагина вам нужно в основном включить:

В вашем HTML следующая структура, чтобы стрелки могли работать правильно (я использую для них font-awesome)

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

И позвоните вам Js:

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

Надеюсь, это поможет кому-нибудь в будущем!Ура!

Answer 7

Я создал еще один плагин для этого.На этот раз с использованием поведения изменения размера табуляции в стиле Chrome.

Инициализировать с помощью

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

Демо

GitHub

Answer 8

Re: André Lourenço - отличный аддон, просто хотел добавить хак, который нуждается в доработке, который позволяет скроллеру изменять размер при изменении размера окна (то есть: вращать мобильное устройство);

    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);
    }

Затем я снова вызываю его при изменении размера окна, т.е.:

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

Не самый эффективный способ сделать это, но на данный момент он работает для моих целей тестирования.

Answer 9

Один плагин можно найти здесь https://github.com/Casper1131/scroller может использоваться для любого неупорядоченного списка.

Answer 10

Существует несколько сценариев и случаев, которые нужно обрабатывать при отображении вкладок в одной строке.

1. Простым решением было бы добавить div вокруг заголовка вкладки ui <ul> и установить переполнение как scroll. Этот метод работает «из коробки», так как браузер обрабатывает прокрутку заголовков вкладок. Но полоса прокрутки по умолчанию, предоставляемая браузером, будет выглядеть странно. Так что вам нужно настроить / стильный аддон полосы прокрутки. OR
2. Чтобы использовать расширение вкладок пользовательского интерфейса jQuery, как показано ниже:

Расширенный виджет jQuery UI, который предлагает функцию вкладки с возможностью прокрутки и автоматически обрабатывает реагирующие изменения размера страницы, показывая при необходимости элементы управления навигацией.

Особенности:

• Это отзывчивый или плавный макет
• Имеет поддержку сенсорного прокрутки для прокрутки заголовков вкладок на сенсорных устройствах (* требуется внешняя зависимость)
• Полностью настраиваемый стиль на основе CSS
• Поддерживает удаление вкладок с помощью кнопки закрытия
• Никаких дополнительных изменений структуры HTML не требуется, это автоматически увеличивает наценки на лету.

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