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

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

5 голосов
/ 25 февраля 2010

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

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

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

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

Как это: 

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

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

Ответы [ 4 ]

1 голос
/ 26 февраля 2010

Ниже приведен код, который я использовал для решения этого вопроса. В основном, используя 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');
    }
}
0 голосов
/ 25 февраля 2010

Легко с JS. Меньше чем псевдокод:

  • Создать div (опционально)
  • Создать ul
  • заполните его li с, пока либо данное максимальное число достигнуто или их общая ширина «чуть ниже» необходимой ширина
  • добавьте div в ваш HTML-документ, сохранение ссылки на id
  • повторить, но если у вас есть сохраненная ссылка в сохраненный div, добавьте новый перед что.
0 голосов
/ 25 февраля 2010

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

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

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

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

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

...