Home > Latest topics

Latest topics > splitterとgrippy

宣伝。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! シス管系女子って何!? - 「シス管系女子」特設サイト

splitterとgrippy - Feb 02, 2007

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属性を設定しない、という事でそれを実現できるわけです。

という、小ネタ。

分類:Mozilla > XUL, , , , 時刻:11:48 | Comments/Trackbacks (0) | Edit

Comments/Trackbacks

TrackBack ping me at


の末尾に2018年6月21日時点の日本の首相のファミリーネーム(ローマ字で回答)を繋げて下さい。例えば「noda」なら、「2007-02-02_splitter.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。

Post a comment

writeback message: Ready to post a comment.

2018年6月21日時点の日本の首相のファミリーネーム(ひらがなで回答)

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のつぶやき