Latest topics > splitterの前後の要素の大きさを変える時の注意
宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。
以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！
splitterの前後の要素の大きさを変える時の注意 - Feb 02, 2007
もう一つ小ネタ。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;
}
Comments/Trackbacks
TrackBack ping me at
の末尾に2020年11月30日時点の日本の首相のファミリーネーム（ローマ字で回答）を繋げて下さい。例えば「noda」なら、「2007-02-02_splitter-size.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。
Post a comment
writeback message: Ready to post a comment.