Плавающие элементы: сначала заполните нижнюю строку

Один проект, над которым я работаю, использует навигацию с вкладками. Поскольку количество вкладок рассчитывается динамически и может достигать больших значений, иногда эти вкладки (которые, по сути, <li> элементы с float: left; Объявление стиля) Перейдите в следующую строку, используя [###] для отображения вкладки конечный результат выглядит примерно так:

[###] [###] [###] [###] [###] [###]
[###] [###]
[Rest of the content..............]

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

Возможно ли с помощью Javascript (допустимы фреймворки, такие как jQuery или MooTools, если они предоставляют более короткое / более простое решение), чтобы сначала заполнить нижнюю строку, а остальные элементы поместить сверху?

Как это:

[###] [###]
[###] [###] [###] [###] [###] [###]
[Rest of the content..............]

(Вопрос помечен MooTools, так как это среда JS, которую мы используем в настоящее время. Ответ, полученный в любой другой среде, будет хорошим, так как он, вероятно, может быть быстро переведен в MT)

Источник

4 ответа

Решение

Ниже приведен код, который я использовал для решения этого вопроса. В основном, используя JS, мы вычисляем ширину контейнера и вместе с шириной вкладок (все вкладки имеют одинаковую ширину) вычисляем количество вкладок в строке и остаток. Используя простое сравнение по модулю, мы можем вставить clear: both стиль (заставляя вкладку перемещаться в пустую строку).

var allTabs = $$('#tab-container li');
var tabNum = allTabs.length;
var tabWidth = allTabs[0].offsetWidth;
var oWidth = $('tab-container').offsetWidth;
var tabRowNum = Math.floor(oWidth/tabWidth);
var tabRowOffset = (tabNum % tabRowNum);

for(var i = 0; i < tabNum; i++) {
    if((i % tabRowNum) == tabRowOffset) {
        allTabs[i].setStyle('clear', 'both');
    }
    else {
        allTabs[i].setStyle('clear', 'none');
    }
}
Источник

Просто с JS. Менее чем псевдо-код:

  • Создать div (по выбору)
  • Создать ul
  • заполните его lis, пока либо не будет достигнуто заданное максимальное число, либо их общая ширина не станет чуть ниже необходимой ширины
  • добавить div в ваш HTML-документ, сохраняя ссылку на идентификатор
  • повторите, но если у вас есть сохраненная ссылка на сохраненный div, добавьте новый перед этим.
Источник

Боюсь, что не существует простого решения сделать именно то, что вы хотите. Поплавки поплавки. Лучше всего будет рассчитывать размеры и количество вкладок на лету с помощью JavaScript, а затем расположить их вручную с помощью position:absolute, Не красиво

Но проблема размещения большого количества вкладок в небольшом пространстве решаема. Самый простой способ - дать вкладкам во второй строке дополнительный класс css и использовать его для размещения их в верхней части первой строки. Это может быть сделано на стороне сервера или на стороне клиента, с помощью JavaScript. Или, если вы знаете точное количество вкладок и точную ширину их контейнера, то вы можете установить max-width для них, и пусть они немного сжимаются. Или вы можете пойти с overflow: scroll для вкладок контейнера, но это будет выглядеть ужасно:)

Источник

Я бы предложил сохранить все вкладки в одной строке (сделать их настолько широкими, насколько это необходимо) и прокрутить до текущей вкладки. (Вам понадобится раскрывающееся меню со списком всех доступных вкладок для навигации.)

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

  • У вас есть выбранная вкладка, которая не подключена к текущей панели (разделена нижним рядом вкладок), что выглядит ужасно или
  • Вы перемещаете верхний ряд вкладок вниз (рядом с панелью), и в этом случае у вас возникает ситуация, которую вы пытаетесь избежать, или
  • Вы реорганизуете вкладки, чтобы поместить выбранную внизу, что создает путаницу в навигации (пользователь не может узнать, где находятся вкладки).
Источник
Другие вопросы по тегам