« スピナー | トップページ | 分割レイアウト »

2007年7月30日 (月)

基本レイアウト

LayoutContainerを用いることで、ブラウザの領域を上下左右中央に分割して要素を配置できる。

LayoutContainerを使うときは、LayoutContainerとContentPaneをrequireする。

dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.ContentPane");

LayoutContainerを配置する場所に、属性 dojoType="LayoutContainer" を持つdiv要素を記述する。LayoutContainerのdiv要素の子要素にレイアウト配置する要素を指定する。

LayoutContainerの子要素には、dojoType="ContentPane" を持つdiv要素を指定する。各ContentPaneはレイアウト配置位置を、layoutAlign属性として、top/right/left/bottom/clientのいずれかの値を指定する。

LayoutContainerのdiv要素はlayoutChildPriority属性を取り、レイアウト配置する各ContentPaneのレイアウト優先順位として、none, top-bottom, left-rightのいずれかを指定する。

  • none: 各ContentPaneを指定した順番に入れ子が決まる
  • top-bottom: 上(top), 下(bottom)を指定したContentPaneが優先される
  • left-right: 右(right), 左(left)を指定したContentPaneが優先される

layoutchildpriority="none"を指定した、基本的なレイアウト。

left
right
top bar
bottom bar
main
<div dojoType="LayoutContainer"  layoutChildPriority='none'
  style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
  <div dojoType="ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;">
    left
  </div>
  <div dojoType="ContentPane" layoutAlign="right" style="background-color: #acb386; width: 100px;">
    right
  </div>
  <div dojoType="ContentPane" layoutAlign="top" style="background-color: #b39b86; ">
    top bar
  </div>
  <div dojoType="ContentPane" layoutAlign="bottom" style="background-color: #b39b86;">
    bottom bar
  </div>
  <div dojoType="ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">
    main
  </div>
</div>

layoutChildPriority='left-right'を指定

left
right
top bar
bottom bar
inner left
main
<div dojoType="LayoutContainer"  layoutChildPriority='left-right'
  style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
  <div dojoType="ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;">
    left
  </div>
  <div dojoType="ContentPane" layoutAlign="right" style="background-color: #acb386; width: 100px;">
    right
  </div>
  <div dojoType="ContentPane" layoutAlign="top" style="background-color: #b39b86; ">
    top bar
  </div>
  <div dojoType="ContentPane" layoutAlign="bottom" style="background-color: #b39b86;">
    bottom bar
  </div>
  <div dojoType="ContentPane" layoutAlign="left" style="background-color: #99cc99; width: 100px;">
    inner left
  </div>
  <div dojoType="ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">
    main
  </div>
</div>

入れ子

LayoutContainerは入れ子に出来る。

 
   
      panel 1    
   
      panel 2    
   
      panel 3    
 
<style type="text/css">
div.statusPanel {
  background-color: ThreeDFace;
  border: 1px solid;
  border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow;
  margin: 1px;
  padding: 2px 6px;
}
</style>

<div dojoType="LayoutContainer"  style="border: solid black; width: 90%; height: 200px;">
  <div dojoType="LayoutContainer" layoutAlign="bottom" style="height: 28px">
    <div dojoType="ContentPane" layoutAlign="left" class="statusPanel">
      panel 1
    </div>
    <div dojoType="ContentPane" layoutAlign="left" class="statusPanel">
      panel 2
    </div>
    <div dojoType="ContentPane" layoutAlign="client" class="statusPanel">
      panel 3
    </div>
  </div>
</div>

« スピナー | トップページ | 分割レイアウト »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7330336

この記事へのトラックバック一覧です: 基本レイアウト:

« スピナー | トップページ | 分割レイアウト »