Есть ли элемент управления вкладками JQuery, который хорошо обрабатывает несколько строк вкладок?

У меня есть веб-приложение с динамическим количеством вкладок от 2 до 20.

В настоящее время я использую плагин для вкладок JQuery UI, но обнаруживаю, что его поведение меньше Идеально (т.е. около 12 вкладок, когда оно обертывается, вторая строка вкладок перемещается с выбором вкладки и иногда перескакивает через 3 строки вместо два.

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

Кроме того, кто-нибудь знает о плагине вкладок для jQuery, который хорошо справляется с несколькими строками вкладок (если я не могу найти разрешение, я мог бы использовать ExtJS или что-то подобное, но пытался сохранить это приложение довольно легким).

Ответ

После дальнейшего исследования выясняется, что это вызвано темой JQuery UI, которую я использовал, это был проблематичный стиль:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {  padding-bottom: .1em; border-bottom: 0; }

Я просто удалил padding-bottom:.1em, и он решил проблему (ключ был в том, что вторая строка элементов двигалась вместе с изменением выбора).

Ответ 1

вам вообще не нужно расширение. Просто используйте плавающий LI с неустановленным UL. LI следует обернуть правильно. Обычно хорошая идея обеспечить слова на одной вкладке не обертывать, заменив "на" ".

Мой пользовательский элемент управления вкладками динамически создается с помощью ASP.Net, но функция tabbing и hide/show - это все jQuery.

<div id="tabWrapper">
    <ul id="tabContainer">
        <li>Tab&nbsp;1</li>
        <li>Tab&nbsp;2</li>
        <li>Tab&nbsp;3</li>
     </ul>
</div>

Базовый CSS

#tabWrapper
{
    border-bottom: solid 1px #676767;
}

#tabContainer 
{
    padding:0;
margin:0;
    position:relative;
    z-index: 1;
    float:left;
    list-style:none;
}

#tabContainer li 
{
    float:left;
    margin:0;
    cursor: pointer;
    background: f1f1f1;
    border-top: solid 1px #676767;
    border-left: solid 1px #676767;
    border-right: solid 1px #ababab;
    margin-bottom: -1px;
}

#tabContainer .selected, #tabContainer .selected:hover
{
    background: #fff;
}

Ответ 2

Не техническое решение, но имейте в виду, что Nielsen настоятельно рекомендует использовать несколько строк вкладок:

Есть только одна строка вкладок. множественный строки создают элементы UI для прыжков, которые уничтожить пространственную память и, таким образом, сделать это невозможно для пользователей запомнить какие вкладки они уже посетили. Кроме того, конечно, несколько строк являются уверенный симптом чрезмерной сложности: Если вам нужно больше вкладок, чем вписывается в в одной строке, вам необходимо упростить ваш дизайн.

- Вкладки, используемые справа: 13 правил удобства использования

Ответ 3

Эта проблема описана в отчете об ошибках в трекере по проблеме JQuery UI. В этом отчете об ошибке я прикрепил патч, который решает эту проблему, сохраняя границу .ui-tabs-nav ниже не выбранных вкладок. Приветствия.

Ответ 4

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

https://github.com/jasonday/plusTabs

Ответ 5

Я обнаружил, что для сортируемых вкладок для нескольких строк полезно следующее. Одна из проблем, которые у меня были, заключалась в том, что вкладки не нажимали на место должным образом, если не было указано axis: 'x', но это выглядело уродливым при перетаскивании между строками.

Мне удалось улучшить это со следующим:

$('#tab-container')
    .sortable({
        delay       : 200,
        distance    : 20,
        axis        : 'x'
    })
    .on('sort sortchange', function() {
        $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px');
    });

Ответ 6

Есть много отличных ответов, которые могут быть использованы для полного решения проблемы, но вот мой собственный ¢ 2.

Чтобы значительно упростить дело, вы можете просто добавить стиль <hr>, который вам нравится разделять строки вкладок. По-моему, это также выглядит лучше, чем открытые строки.