Feb 02, 2007
splitterとgrippy
Split Browserでも使いまくってるsplitterの注意点。
Mozilla Suiteの頃にはsplitterの中央付近にgrippy（つまみ）が表示されて、それをクリックしたら左右（上下）のどちらかに要素を折りたたむという挙動を示すんだけど、Firefoxの標準テーマではgrippyがdisplay:noneされてるのでぶっちゃけ使えない。拡張機能側のテーマでgrippyの外観を定義するか、grippyに外観が定義されてるテーマを使うかのどっちかをしないと、grippy要素を追加しただけでは何も起こらない。
grippyをクリックした時に前後に折りたためるようにするcollapse属性というのがあるけど、そういう訳なので、実際にはこの機能はFirefoxではほとんど役に立たない。でも、この属性があるかないかでスプリッタの挙動が若干変わるのには注意が必要だ。
例えばこんな場合を想像する。
<vbox>
<hbox id="above" flex="1"/>
<splitter/>
<vbox id="below" flex="1">
<toolbar/>
<hbox id="content" flex="1">
</vbox>
</vbox>
こういう構造の時、スプリッタをドラッグすると、スプリッタの前後にある要素の大きさが無段階で伸縮する。しかし下側のボックスの中にはflex属性が設定されていないtoolbar要素があるので、スプリッタをドラッグしてvbox#belowの大きさを変化させても、実際に伸縮するのはhbox#content（とvbox#below）とhbox#aboveだけになる。結果として、vbox#belowの大きさはtoolbar要素の高さより小さくはならない。toolbarより高さを小さくしようとしても、そこでつっかえてそれ以上スプリッタが動かなくなる。
<vbox>
<hbox id="above" flex="1"/>
<splitter collapse="after"/>
<vbox id="below" flex="1">
<toolbar/>
<hbox id="content" flex="1">
</vbox>
</vbox>
でもこんな風にcollapse属性を指定すると、toolbar要素にflex属性が無くても、つっかえずにスプリッタをボックスの端までドラッグできるようになる。そして端まで達すると下のボックスは折りたたまれて非表示になる。
言い換えれば、スプリッタを動かしても折りたたまれず常に表示されたままになるようなツールバーとかを実装したければ、collapse属性を使わず、常に表示しておきたい要素にflex属性を設定しない、という事でそれを実現できるわけです。
という、小ネタ。
wikieditish message: Ready to edit this entry.