Borderlayout"
From Documentation
Jumperchen (talk | contribs) |
|||
| Line 3: | Line 3: | ||
= Borderlayout = | = Borderlayout = | ||
| − | *Demonstration: [http://www.zkoss.org/zkdemo/ | + | *Demonstration: [http://www.zkoss.org/zkdemo/layout/border_layout Borderlayout] |
*Java API: <javadoc>org.zkoss.zul.Borderlayout</javadoc> | *Java API: <javadoc>org.zkoss.zul.Borderlayout</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zul.layout.Borderlayout</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.layout.Borderlayout</javadoc> | ||
| + | *Style Guide: [http://books.zkoss.org/wiki/ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default Borderlayout] | ||
= Employment/Purpose = | = Employment/Purpose = | ||
| Line 72: | Line 73: | ||
| − | =Supported | + | =Supported Events= |
{| border="1" | width="100%" | {| border="1" | width="100%" | ||
| Line 81: | Line 82: | ||
| None | | None | ||
|} | |} | ||
| − | + | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/HtmlBasedComponent#Supported_Events | HtmlBasedComponent]] | |
=Supported Children= | =Supported Children= | ||
| − | * | + | *[[ZK_Component_Reference/Layouts/Borderlayout/North | North]], [[ZK_Component_Reference/Layouts/Borderlayout/South | South]], [[ZK_Component_Reference/Layouts/Borderlayout/Center | Center]], [[ZK_Component_Reference/Layouts/Borderlayout/West | West]], [[ZK_Component_Reference/Layouts/Borderlayout/East | East]] |
| − | =Use | + | =Use Cases= |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
Revision as of 08:06, 15 November 2010
Borderlayout
- Demonstration: Borderlayout
- Java API: Borderlayout
- JavaScript API: Borderlayout
- Style Guide: Borderlayout
Employment/Purpose
The layout component is a nested component. The parent component is borderlayout, and its children components include north, south, center, west, and east. The combination of children components of borderlayout is free.
Width and Height
When using a borderlayout as a child of other component, you have to specify the width and height of its parent components. Otherwise, the browser usually assigns zero width and height to the borderlayout such that it won't be visible.
<window width="100%" height="100%">
<borderlayout width="100%" height="100%">
...
Example
<borderlayout height="450px">
<north title="North" maxsize="300" size="50%" splittable="true" collapsible="true">
<borderlayout>
<west title="West" size="25%" flex="true" maxsize="250" splittable="true" collapsible="true">
<div style="background:#B8D335">
<label value="25%"
style="color:white;font-size:50px" />
</div>
</west>
<center border="none" flex="true">
<div style="background:#E6D92C">
<label value="25%"
style="color:white;font-size:50px" />
</div>
</center>
<east size="50%" border="none" flex="true">
<label value="Here is a non-border"
style="color:gray;font-size:30px" />
</east>
</borderlayout>
</north>
<center border="0">
<borderlayout>
<west maxsize="600" size="30%" flex="true" border="0" splittable="true">
<div style="background:#E6D92C">
<label value="30%"
style="color:white;font-size:50px" />
</div>
</west>
<center>
<label value="Here is a border"
style="color:gray;font-size:30px" />
</center>
<east title="East" size="30%" flex="true" collapsible="true">
<div style="background:#B8D335">
<label value="30%"
style="color:white;font-size:50px" />
</div>
</east>
</borderlayout>
</center>
</borderlayout>
Supported Events
| None | None |
- Inherited Supported Events: HtmlBasedComponent
Supported Children
* North, South, Center, West, East
Use Cases
| Version | Description | Example Location |
|---|---|---|
Version History
| Version | Date | Content |
|---|---|---|