dijit.layout.BorderContainer¶
| Status: | Draft |
|---|---|
| Version: | 1.0 |
| Authors: | Becky Gibson, Bill Keese, Nikolai Onken, Marcus Reimann |
| Developers: | ?- |
| Available: | since V? |
This widget is a container partitioned into up to five regions: left (or leading), right (or trailing), top, and bottom with a mandatory center to fill in any remaining space. Each edge region may have an optional splitter user interface for manual resizing.
Usage¶
Note that there can be at most one child marked for each region.
Setting sizes¶
Sizes are specified for the edge regions in pixels or percentage using CSS – height to top and bottom, width for the sides. You might specify a top region of height:100px and a left region of width:50%. The center typically does not have any dimensions specified in CSS and resizes automatically to fill the remaining space.
Besides setting the size of the BorderContainer itself, you generally need to set the width of the leading and trailing (left and the right) panes. You shouldn’t need to set the height of the top/bottom panes as that can be determined automatically.
Of course, you shouldn’t set the size of the center pane, since it’s size is determined from whatever is left over after placing the left/right/top/bottom panes. You also shouldn’t set the width of the top/bottom panes or the height of the left/right panes as that would be meaningless.
note: In order to set the overall size of a BorderContainer to the full size of the viewport, the <body> element needs an explicit size set as well as a size on the BorderContainer itself:
1 2 3 4 | <style type="text/css">
body, html { width:100%; height:100%; margin:0; padding:0 }
#borderContainer { width:100%; height:100% }
</style>
|
Otherwise, the computed style of the BorderContainer will report 0 rather than the browser-calculated size of the viewport.
Layout modes¶
BorderContainer operates in a choice of two layout modes: the design attribute may be set to "headline" (by default) or "sidebar". With the "headline" layout, the top and bottom sections extend the entire width of the box and the remaining regions are placed in the middle. With the "sidebar" layout, the side panels take priority, extending the full height of the box.
Examples¶
Declarative example¶
| type: | inline |
|---|---|
| height: | 400 |
| width: | 660 |
Lets specify a simple BorderContainer with a left and center region
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>The markup has to look as follows
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer"> <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div> <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">Hi, I'm center</div> </div>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#borderContainer {
width: 100%;
height: 100%;
}
</style>More advanced example¶
Lets take a look at a more advanced example of using BorderContainer and other layout widgets. This example uses two BorderContainers to allow to, left and right content areas. Note the tabStrip attribute on the TabContainer.
| djConfig: | parseOnLoad: true |
|---|---|
| type: | inline |
| height: | 400 |
| width: | 660 |
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
</script>The markup has to look as follows
<div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo" >
<div dojoType="dijit.layout.ContentPane" region="top" splitter="false">
Hi, usually here you would have important information, maybe your company logo, or functions you need to access all the time..
</div>
<div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar" region="center" id="mainSplit">
<div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">
<div dojoType="dijit.layout.AccordionPane" title="One fancy Pane">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Another one">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Even more fancy" selected="true">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Last, but not least">
</div>
</div><!-- end AccordionContainer -->
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
Lorem ipsum and all around - last...
</div>
</div>
</div>
</div><style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#borderContainerTwo {
width: 100%;
height: 100%;
}
</style>Accessibility¶
Keyboard¶
| Action | Key |
|---|---|
| Navigate to splitters for resizable regions | tab - all resizable splitters are in the tab order |
| Change the size of a vertical region | left / right arrows to decrease and increase |
| Change the size of a horizontal region | down / up arrows to decrease and increase |
Note: The children of BorderContainer must be created in the source code in their natural tab order. Header regions should be first and footer regions last. In Left to right locales, left regions before center and right ones.