Feb 02, 2007
splitterの前後の要素の大きさを変える時の注意
もう一つ小ネタ。Split Browserで詰まった箇所。
splitter要素は、ドラッグすると、前後に置かれた要素の大きさを伸縮してくれる。この時、前後の要素の属性一覧とかを見ると、伸縮後の幅（width）もしくは高さ（height）が属性として指定されていることが分かる。
前のエントリに書いたように、「常にツールバーだけは表示される要素」みたいなものをスプリッタの隣に置いておく場合、その要素をツールバーだけの状態に自動で折りたたむ処理は、自分で一から書かないといけない。といってもそんなに難しいことはなくて、要するにツールバーの大きさと同じ値を親要素の大きさに指定してやればいい。
<vbox>
<hbox id="above" flex="1"/>
<splitter/>
<vbox id="below" flex="1">
<toolbar id="bar"/>
<hbox id="content" flex="1">
</vbox>
</vbox>
<script>
function collapse() {
var box = document.getElementById('below');
var bar = document.getElementById('bar');
box.height = bar.boxObject.height;
}
</script>
ただ、これには一つ問題がある。折りたたむ方はこれでいいんだけど、元の状態に戻す、つまり畳まれたボックスを広げ直す時には、同じやり方をやっても望んだとおりの大きさにまでボックスが広がってくれないことがある。
これは何故かというと、スプリッタの前後の片方にある要素の大きさを指定し直しても、反対側にあるもう一つの要素の大きさ指定がそのままになっているからだ。畳まれたボックスを狙ったとおりの大きさに広げるには、反対側にある要素のサイズ指定も同時にいじってやらないといけない。
function collapse() {
var box = document.getElementById('below');
var bar = document.getElementById('bar');
box.lastheight = box.boxObject.height;
box.height = bar.boxObject.height;
}
function expand() {
var box = document.getElementById('below');
var sidebox = document.getElementById('above');
var last = box.lastheight;
var current = box.boxObject.height;
sidebox.height = sidebox.boxObject.height - (last - current);
box.height = last;
}
エントリを編集します。
wikieditish message: Ready to edit this entry.