Списки и Деревья

13.2.3 Тег <listbox>

Тег <listbox> имеет следующие атрибуты:

rows size seltype suppressonselect disableKeyNavigation

rows и size определяют высоту списка числом строк. Вычисление size основано на высоте самой высокой строки, умноженной на значение атрибута. Это дает тот же результат, как если бы мы присвоили атрибуту minheight некоторое число пикселей для каждой строки. Каждая строка приобретет ту же высоту, что и самая высокая, т.е. все они будут равны по высоте. Атрибут size считается устаревшим, используйте вместо него rows. Тег <listbox> может изменять размер динамически, если определить атрибут rows в JavaScript.

Значение атрибута rows (а также size и minheight ) передается для вычислений в тег <listboxbody>, поэтому то место, которое занимает строка заголовка, в вычисление не включается.

<listbox> плохо работает с атрибутом maxheight. Если теги <listbox> находятся внутри тега <hbox>, и какой-то из братских тегов <listbox> имеет атрибут maxheight меньший, чем у первого тега <listbox>, то это может вызвать ошибку и в результате плохую верстку. Если тег <listbox> имеет большие по размеру дочерние теги, рекомендуется установить величину параметра height и вообще не трогать размеры строк, Mozilla справится сама.

Атрибут seltype определяет, может ли пользователь выбрать сразу несколько строк списка. Если его значение равно multiple, то это возможно. Если значение иное, может быть выбрана лишь одна строка.

Атрибут suppressonselect может иметь значение true. Когда пользователь выбирает определенную строку, XBL-код этого тега генерирует событие, которое может уловить обработчик событий тега <listbox>. Этот атрибут препятствует возникновению события.

Атрибут disableKeyNavigation также может иметь значение true. Это приведет к тому, что выбранная строка не изменится по сигналу с клавиатуры.

Доступ к тегу <listbox> с помощью JavaScript обсуждается в разделе "Интерфейсы AOM и XPCOM". Поддержка тега <listbox> для шаблонов описывается в лекции 14, "Шаблоны".

13.2.4 <listcols>

Тег <listcols> является контейнером для тегов <listcol> и не имеет никакой иной цели. Он не имеет никаких специальных атрибутов и никак не отображается. Тег <listcols>, если он вообще есть, должен появиться перед любым иным содержанием <listbox>.

Если этот тег есть в теге <listbox>, то это то же самое, что

<listcols> 
  <listcol flex="1"/> 
</listcols>

В этом теге также применимы и атрибуты, свойственные шаблонам.

13.2.5 <listcol>

Тег <listcol> никогда не отображается и не должен иметь никакого содержания. Он не имеет никаких собственных атрибутов. В правильно сформированном теге <listbox> число колонок определяется числом тегов <listcol/>.

Тег <listcol> может использоваться еще для двух целей. Его можно использовать, чтобы присвоить колонке определенный id, и c его помощью колонке можно присвоить определенный стиль. Это можно сделать, добавив атрибут flex или присвоив атрибутам hidden или collapsed значение true.

В этом теге также применимы атрибуты, свойственные шаблонам.

13.2.6 <listhead>

Тег <listhead> - контейнер для тегов <listheader>. Если его нет, заголовка у списка не будет. Он не имеет никаких специальных атрибутов и иных целей. Этот тег группирует все теги <listheader> в один тег <listheaditem>. Это дает гарантию, что каждый заголовок заключен в блокоподобный тег.

13.2.7 <listheader>

Тег <listheader> основан на теге <button>, он и есть по сути <button>. Колонка может иметь один тег <listheader>. Из его XBL определения видно, что если ему не приписано никакого содержания, он эквивалентен просто:

<button> 
  <image class="listheader-icon"/> 
  <label class="listheader-label"/> 
  <image class="listheader-sortdirection"/>
</button>

Только первый тег <image> может быть оформлен стилем. Атрибуты value и crop тега <label> берутся из соответствующих атрибутов тега <listheader>. Второй тег <image> оформляется стилем только одним атрибутом:

sortDirection.

Значение "ascending" даст стрелочку вверх. Значение "descending" стрелочку вниз. Значение "natural" (или что угодно еще) даст в результате отсутствие стрелочки.

Если содержание определено, оно появится на кнопке.

В этом теге также применимы и атрибуты сортировки, свойственные шаблонам.

13.2.8 <listitem>

Тег <listitem> используется, чтобы определить строчку в списке. Применение любого другого тега здесь может привести к сбою Mozilla. Если тег <listitem> не имеет содержания, определенного пользователем, он имеет единственный тег <label> в качестве содержания. Вы можете определить ваше содержание как один или более вложенных тегов. В этом случае должен быть один вложенный тег на каждую колонку, и <listcell> - очевидный выбор для этого содержания.

<listitem> имеет следующие специальные атрибуты:

label crop flexlabel disabled type checked image selected current 
allowevents value

Все эти атрибуты работают в одноколоночных списках, если не оговорено иное.

label, crop, и disabled передаются вложенному тегу <label>. Значение атрибута flexlabel передается атрибуту flex тега <label>. Строка с атрибутом disabled, имеющим значение true, все еще может быть выбрана, но она высвечивается серым цветом.

Атрибут type может иметь значение checkbox, в этом случае слева в строке появится флажок. Положение флажка не может быть изменено. Атрибут disabled со значением true даст флажок, подсвеченный серым, и в этом случае пользователь не сможет отметить его галочкой.

Если тег <listitem> имеет атрибут listitem-iconic, этот тег может содержать изображение. URL этого изображения указывается атрибутом image.

Оставшиеся атрибуты применимы как к одно-, так и к многоколонным спискам.

Атрибут current устанавливается автоматически в значение true, когда мы выбираем строку. Если этот атрибут равен true, значит строка выбрана теперь, либо была выбрана ранее, в случае, когда разрешен множественный выбор строк.

Атрибут selected также имеет значение true, если элемент выбран.

Атрибут allowevents, установленный в true, позволяет событиям DOM от клика мыши передаваться сквозь тег <listitem> до содержания этой строки. Обычно тег <listitem> препятствует распространению подобных событий. Если этот атрибут установлен, текущая строка не может быть выбрана.

Атрибут value хранит значение данных, представляемых тегом <listitem>. Он используется только в программах и никак не отображается.

Тег <listcell> используется для определения одного элемента колонки (ячейки). Содержание колонок можно указать и с помощью тегов, определенных пользователем, но платформа Mozilla обращается к тегу <listcell> в нескольких местах, поэтому лучше использовать именно его. По умолчанию, XBL определение тега <listcell> - это единственный тег <label>, если его не заместит тег, определенный пользователем, с произвольным содержанием.

Тег <listcell> поддерживает все атрибуты, которые имеет тег <listitem>, за исключением current, selected и allowevents. Чтобы добавить пиктограмму в <listcell>, используйте класс listcell-iconic. Если <listbox> имеет много колонок, флажок не будет работать, если он указан на единственном теге <listcell>.

Атрибуты checkbox, icon, и label списка могут быть переопределены в обратном направлении с помощью dir="rtl". Иные атрибуты блока, например, orient, также могут быть применены к тегу <listcell>, если это, конечно, может иметь смысл.

Итак, с тегом <listbox> мы на этом закончим.

13.2.10 RDF и сортировка

Тег <listbox> и его "родственники" может быть подключен к RDF-документу. В этом случае тег получает содержание из данного RDF-документа. При этом данные в списке могут быть упорядочены. См. "Шаблоны" , "Шаблоны", где даны подробные инструкции.