Теперь изображение, приведенное выше, является примером "слишком много вкладок". По умолчанию оно отображается как несколько строк.
Но я хочу сделать это в одной строке и горизонтально прокручиваться, либо добавив две стрелки перед вкладкой начала, и после последней вкладки, либо прокручивая автоматически.
Я создал плагин для его проверки scrolltab
Спасибо
У меня есть другой подход к этой проблеме, так как я считаю, что прокрутка для вкладок противоречит интуиции. Я создал плагин для выпадающего списка, когда вкладки переходят во вторую строку.
Недавно я искал для этого решение, но ни один из других плагинов/примеров, похоже, не работал с 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.
Ни один из плагинов, перечисленных здесь, не работал у меня (большинство из них устарело и несовместимо с jQuery 2.0+), но в итоге я нашел следующее: https://github.com/joshreed/jQuery-ScrollTabs ... стоит добавить в список.
Я просто сделал для этого простой плагин. В основном вам нужно добавить один фиксированный размер 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/
Вот плагин для этого: http://jquery.aamirafridi.com/jst/
Я также создал плагин jQuery для него здесь, но основное внимание было уделено созданию таких структура для мобильных сайтов, которые имеют мало места и могут также полагаться на прокрутку по горизонтали с помощью прикосновения, а также стрелки управления.
Решение выглядит следующим образом:
Я использую Bootstrap и для реализации плагина, который вам в основном нужно включить:
В вашем HTML следующая структура, чтобы стрелки могли работать корректно (я использую для них шрифт-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();
Надеюсь, это поможет кому угодно в будущем! Ура!
Один плагин можно найти здесь https://github.com/Casper1131/scroller он может использоваться для любого неупорядоченного списка.
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();
});
Не самый эффективный способ сделать это, но он работает для моих целей тестирования на данный момент.
Я создал для этого еще один плагин. На этот раз с помощью поведения изменения размера табуляции в стиле Chrome.
Инициализировать с помощью
$( ".tabpanel" ).tabs().tabs('overflowResize');
При показе вкладок в одной строке существует несколько сценариев и случаев.
div вокруг заголовка ui-tab <ul> и установить переполнение как scroll. Этот метод работает нестандартно, поскольку браузер обрабатывает прокрутку заголовков вкладок. Но полоса прокрутки по умолчанию, предоставляемая браузером, будет выглядеть странно. Поэтому вам нужно настроить/стильный прокрутки. ИЛИРасширенный виджет пользовательского интерфейса jQuery, который предлагает функцию вкладок с возможностью прокрутки и автоматически обрабатывает изменчивые изменения размера страницы, показывая навигационные элементы управления, когда это необходимо.
Особенности: