JavaScriptでレイアウトマネージャ

プログラム

知り合いに画面を見せたら遠まわしにヘボいと言われてるような気がしたので、ペイン奥に画像枠ペインを重ねられるようにしてみた。
http://tate.undef.jp/qi2j/qi2.html

下記のようなレイアウト指定を行うとviewportにあわせて各ペインのレイアウトを行ってくれる。

 MainPane = new WeightPane('MainPane',true     // 全体を左右に分ける
 　,100,new WeightPane('LeftPane',false          // 左側を上下に分ける
 　　,70,new LayerdPane('LeftUpPaneL'
 　　　,new WeightPane('LeftUpPane',false
 　　　　/////////////////////////////////////// (size w,h),(border t,r,b,l)
 　　　　// バッファヘッダ
 　　　　,0 ,new SimplePane('BufferInfo'        ,null,64  ,5 ,17 ,(uai.trident?16:0) ,15)
 　　　　// バッファを置くDIV
 　　　　,70,new SimplePane('BufferContainer'   ,null,null ,3 ,17  ,(uai.trident?8:0) ,15)
 　　　　// テキスト入力部 
 　　　　,0 ,new SimplePane('taInput'           ,null,60   ,2  ,17 ,(uai.trident?4:0) ,15)
 　　　　// ボタンの類
 　　　　,0 ,new SimplePane('InputPane'         ,null,26   ,2  ,17+4 ,8,15) 
 　　　)
 　　　,new FramePane("BGFrame","bg",".png",26,27,29,27)
 　　)
 　　,30,new LayerdPane('LeftDownPaneL'
 　　　,new WeightPane('LeftDownPane',false
 　　　　// 全ログヘッダ
 　　　　,0 ,new SimplePane('AllLogHeader'      ,null,32   ,5 ,17 ,3 ,15)
 　　　　// 全ログコンテナ
 　　　　,30,new SimplePane('AllLogContainer'   ,null,null ,0  ,17 ,(uai.trident?8:0) ,15)
 　　　　// 全ログフッタ
 　　　　,0 ,new SimplePane('AllLogFooter'      ,null,18   ,2  ,17+4,8,15)
 　　　)
 　　　,new FramePane("BGFrame","bg",".png",26,27,29,27)
 　　)
 　)
 　,0,new WeightPane('RightPane',false           // 右側を上下に分ける
 　　,70,new LayerdPane('RightUpPaneL'
 　　　,new WeightPane('RightUpPane',false
 　　　　,0 ,new SimplePane('MemberListHeader'   ,160,32    ,5 ,17 ,3 ,15)
 　　　　,70,new SimplePane('MemberListContainer',null,null ,0  ,17 ,(uai.trident?6:0) ,15)
 　　　　,0 ,new SimplePane('MemberListFooter'   ,160,26    ,2  ,17+4,8,15)
 　　　)
 　　　,new FramePane("BGFrame","bg",".png",26,27,29,27)
 　　)
 　　,30,new LayerdPane('RightDownPaneL'
 　　　,new WeightPane('RightDownPane',false
 　　　　,0 ,new SimplePane('BufferListHeader'   ,160,32     ,5 ,17 ,3 ,15)
 　　　　,30,new SimplePane('BufferListContainer',null,null  ,0  ,17 ,(uai.trident?6:0) ,15)
 　　　　,0 ,new SimplePane('BufferListFooter'   ,160,26     ,2  ,17+4,8,15)
 　　　)
 　　　,new FramePane("BGFrame","bg",".png",26,27,29,27)
 　　)
 　)
 );
 
 MainPane.setPaneSize(MochiKit.Style.getViewportDimensions(),new MochiKit.Style.Coordinates(0,0));

IE6を捨てていいならこんなコードはいらないというのは分ってるんだけど、実際そうもいかないよね