 |
Получение многострочного древовидного списка
|
|
|
|
Вы используете теги <ul> and <li> для отображения древовидного списка. Однако браузеры на основе Mozilla не позволяют вам встраивать другие элементы в теги <li>, поэтому вы можете получить только простые списки. Для решения этой проблемы вы можете использовать таблицы, чтобы создать древовидный список. Используя TABLE вместо LI для реализации элемента списка, вы можете создавать сложные элементы.
Однако вы снова столкнётесь с проблемами, если в TABLE много колонок. Изменение размеров окна с помощью мыши приводит к тому, что страница выглядит как на Рисунке 2.
Рисунок 2. Перед изменением размера окна колонки привязываются к сетке
Рисунок 3 показывает, как выглядит страница, когда вы изменяете размер фрейма; колонки больше не привязываются к сетке.
Рисунок 3. После изменения размера окна колонки больше не привязываются к сетке
Вы можете указать ширину TD в таблице древовидного списка, но это плохое решение, так как ширина TD означает лишь максимальный
размер, поэтому браузеры могут изменить размер TD для отображения дополнительного содержимого при изменении размеров окна. Чтобы достичь "организованного" внешнего вида, вам нужно что-то ещё - DIV. (В этой статье DIV, TABLE и TD представляют узлы дерева DOM; конечно же, вы также можете относиться к ним, как к HTML-тегам.)
К сожалению, вы скоро поймёте, что DIV вызывает подобные проблемы. Ширина DIV является не абсолютной величиной, а, скорее, минимальной шириной. Если вы измените размер окна, некоторые браузеры также изменят ширину DIV. А нельзя ли скомбинировать TD и DIV? Если использовать DIV внутри TD, то будут определены и максимальный, и минимальный размеры ячеек. Теперь у нас фиксированный размер, как показано на Рисунке 4.
|
|
|
Рисунок 4. С помощью DIV страница выглядит хорошо
Работа с несколькими языками
Если ваше приложения поддерживают несколько языков, имейте в виду, что один и тот же текст на различных языках, возможно, будет иметь разную длину, что может привести к плохому внешнему виду страницы. В этой ситуации может помочь настройка DIV, содержащего текст.
Определение правильного размера DIV
Предположим, что вы хотите использовать DIV, чтобы нарисовать всплывающее меню. Однако если вы не зададите вашему меню фиксированный размер, вы столкнётесь с проблемой при скроллинге страницы, как показано на Рисунке 5.
Рисунок 5. Прокрутка страницы вниз приводит к смещению теста
Как вы видите, текст выходит за границы. Internet Explorer автоматически задаёт DIV размер видимой части, когда DIV не имеет фиксированного размера. Поэтому, когда вы прокручиваете страницы, чтобы просмотреть невидимую её часть, размер DIV недостаточен, что приводит к сдвигу текста. Для решения этой проблемы задайте фиксированный размер DIV.
Теперь нужно определить, как управлять размером. Вы не можете жёстко задать размер, поскольку длина текста в DIV не может быть фиксированной, если вы поддерживаете много языков. Вам нужно получать длину текста динамически, а затем устанавливать размер DIV. В этот раз вам может помочь таблица. Размер таблицы не зависит от её видимости. Листинг 3 показывает, как задать надлежащую ширину DIV.
Листинг 3. Задание ширины DIV при помощи ширины текста в нём
var leftmenu = document.getElementById("leftmenu");
var divWidth = parseInt(document.getElementById("divtable").offsetWidth);
leftmenu.style.width = divWidth +"px";
|
|
|
