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

StackOverflow https://stackoverflow.com/questions/624516

Вопрос

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

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

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

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

Ответ

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

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

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

Это было полезно?

Решение

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

Мой пользовательский элемент управления вкладками создается динамически с помощью ASP.Net, но все функции табуляции и скрытия / отображения выполнены на 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;
}

Другие советы

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

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

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

Эта проблема заключается в описано в отчете об ошибке в системе отслеживания проблем пользовательского интерфейса jQuery.К этому сообщению об ошибке я приложил патч, который решает эту проблему, хотя сохранение граница .ui-tabs-nav расположена под невыбранными вкладками.Ваше здоровье.

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

https://github.com/jasonday/plusTabs

Я обнаружил, что следующее было полезно для сортируемых вкладок в нескольких строках.Одна из проблем, с которой я столкнулся, заключалась в том, что вкладки неправильно вставлялись на место, если только 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');
    });

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top