« 基本レイアウト | トップページ | ヘルプ付きのテキストボックス »

2007年7月30日 (月)

分割レイアウト

SplitContainerを用いることで、上下または左右にレイアウト分割し、ユーザが分割位置を変更できる。 SplitContainerを使うときは、SplitContainerとContentPaneをrequireする。
dojo.require("dojo.widget.SplitContainer");
dojo.require("dojo.widget.ContentPane");

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

SplitContainerのdiv要素はorientation属性を取り、レイアウト配置する各ContentPaneを垂直方向(horizontal)に並べるか、水平方向(vertical)に並べるかを指定する。

SplitContainerは以下の属性を指定できる。

属性概要
orientationhorizontalまたはverticalを指定する。デフォルトはhorizontal
sizerWidth分割位置を変更するバーの太さを指定する。デフォルトは15
activeSizingバーをドラッグ中にも分割位置を変更するか、trueまたはfalseで指定する。デフォルトはfalse
persisttrueを指定すると分割位置をcookieに保存する。デフォルトはfalse

垂直

<div dojoType="SplitContainer" orientation="vertical"
  style="border: 2px solid black; width: 95%; height: 200px;">
  <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
    top
  </div>
  <div dojoType="ContentPane" sizeMin="20" sizeShare="50">
    middle
  </div>
  <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
    bottom
  </div>
</div>
top
middle
bottom

水平

<div dojoType="SplitContainer" orientation="horizontal"
  style="border: 2px solid black; width: 95%; height: 200px;">
  <div dojoType="ContentPane" sizeMin="20" sizeShare="20">
    left
  </div>
  <div dojoType="ContentPane" sizeMin="50" sizeShare="50">
    right
  </div>
</div>
left
right

入れ子の組み合わせ

<div dojoType="SplitContainer" orientation="horizontal"
  style="border: 2px solid black; width: 95%; height: 200px;">
  <div dojoType="ContentPane" sizeMin="20" sizeShare="20">
    left
  </div>
  <div dojoType="SplitContainer" orientation="vertical">
    <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
      top
    </div>
    <div dojoType="ContentPane" sizeMin="20" sizeShare="50">
      middle
    </div>
    <div dojoType="ContentPane" sizeMin="10" sizeShare="50">
    bottom
    </div>
  </div>
</div>
left
top
middle
bottom

« 基本レイアウト | トップページ | ヘルプ付きのテキストボックス »

コメント

コメントを書く

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

トラックバック

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

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

« 基本レイアウト | トップページ | ヘルプ付きのテキストボックス »