BorderContainer

Диджит BorderContainer предоставляет удобную возможность определить одну из следующих схем размещения, состоящих из нескольких более простых неперекрывающихся элементов: сверху/снизу/слева/справа/в центре, сверху/снизу/в центре или слева/справа/в центре страницы. Можно разрешить изменение размеров этих элементов. BorderContainer является особенно ценным виджетом, т. к. он позволяет легко и просто превратить то, что в противном случае могло бы превратиться в изнурительную работу, в действительно простое решение на языке виджетов. Как вы уже наверняка догадались, он получил название контейнера (container) с «границами» (border), потому что по его границам располагаются четыре неперекрывающихся элемента, окружающие то, что заполняет центр.

При работе с диджитом BorderContainer можно использовать дополнительные атрибуты, доступные через ContentPane, на которые он опирается.

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


Но при любой схеме компоновки оставшееся пространство в центре занимает центральный элемент. Давайте рассмотрим простой пример реализации схемы заголовка в разметке, как показано в примере 14.2. Вверху будет располагаться панель красного цвета, внизу – синего, а в середине – белого. Верхняя панель имеет минимальную высоту 10 пикселей и максимальную – 100 пикселей (это ее высота по умолчанию).

Пример 14.2. Создание диджита BorderContainer в разметке

Fun with BorderContainer!
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
djConfig="parseOnLoad:true",
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">


(body class="tundra")
style="height:500px;width:500px;border:solid 3px;">
style="backgroundcolor:blue;height:100px;" splitter="true"
minSize=10 maxSize=100>top

region="center">center

style="backgroundcolor:red;height:100px;"
splitter="true">bottom


(/body)


Чтобы добавить два элемента, заполняющие левую и правую области, достаточно вставить два дополнительных диджита ContentPane, как показано в следующей ниже версии тега BODY.
(body class="tundra")
design="headline" style="height:500px;width:500px;border:solid 3px;">
style="background-color:blue;height:100px;" splitter="true"
minSize=10 maxSize=100>top

center

style="background-color:red;height:100px;"
splitter="true">bottom

style="backgroundYcolor:yellow;width:100px;"
splitter="true">left

style="backgroundYcolor:green;width:100px;"
splitter="true">right


(/body)

Как и для всех других диджитов, создание диджита BorderContainer программным способом связано с вызовом того же самого базового конструктора, которому передаются список свойств и ссылка на исходный узел.


Также и добавление дочерних диджитов ContentPane состоит в поочередном их создании, одного за другим. Хотя программный способ более утомителен, чем создание диджитов в разметке, тем не менее порядок создания остается одним и тем же. В примере 14.3 показано, как реализовать пример 14.2 программным способом.
Пример 14.3. Создание BorderContainer программным способом

Fun with BorderContainer!
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
djConfig="parseOnLoad:true",
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">


(body class="tundra")

(/body)


Диджиты BorderContainer обладают высокой гибкостью и могут вкладываться друг в друга произвольным образом, если ситуация требует этого.


Они также предоставляют превосходный способ оформления компоновки в стиле заголовка или в стиле врезки практически без какихлибо усилий, но, с другой стороны, в случаях, когда применение виджетов не дает дополнительной выгоды, вы всегда можете вернуться к старым добрым таблицам стилей CSS..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
AccordionContainer
ContentPane
StackContainer
TabContainer
Общие особенности диджитов компоновки

Вернуться в раздел: Dojo / Виджеты компоновки