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

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

12 голосов
/ 09 марта 2009

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

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

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

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

Ответ

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

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

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

Ответы [ 6 ]

5 голосов
/ 01 апреля 2009

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

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

- Вкладки, справа: 13 рекомендаций по использованию

5 голосов
/ 09 марта 2009

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

Мой пользовательский элемент управления вкладками динамически создается с помощью 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;
}
4 голосов
/ 18 октября 2009

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

2 голосов
/ 28 сентября 2012

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

https://github.com/jasonday/plusTabs

1 голос
/ 06 ноября 2011

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

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

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

...