コンテナの内側の要素の前または後に表示される要素です。splitter がドラッグされると、splitter の兄弟要素のサイズが変更されます。grippy が splitter の内側に置かれている場合は、grippy がクリックされたとき、splitter の兄弟要素の一つが折り畳まれます。
詳しい情報は XUL チュートリアルにあります。
- 属性
- collapse, resizeafter, resizebefore, state, substate
- スタイルクラス
- tree-splitter
例
<!-- この検索バーはいくつかのスタイル付けがされています。vbox はユーザがクリックして検索バーをリサイズするための .png 画像を保持するために使用されています。 -->
<splitter tooltiptext="検索ボックスのサイズを変更してください" oncommand="alert('splitter がドラッグされました')">
<vbox id="example_vbox" />
</splitter>
属性
-
collapse - 型: 以下の値のいずれか一つ
-
splitterの grippy がクリックされた時、どちら側を折り畳むかを決定します。この属性が指定されていない場合、splitter は折り畳まれません。要素を折り畳むにはgrippy要素を splitter の内側に置かなければなりません。
none: 要素は折り畳まれません。before: grippy がクリックされると、同じ親要素を持つ splitter のすぐ前の要素が折り畳まれ、その幅と高さは 0 になります。after: grippy がクリックされるとすぐに、同じ親要素を持つ splitter のすぐ後の要素が折り畳まれ、その幅と高さは 0 になります。both: grippy がクリックされると、splitter の前後に隣接する要素が折り畳まれます。 splitter の位置によっては、その要素のサイズが最小サイズ以下になります。
-
resizeafter - 型: 以下の値のいずれか一つ
- この属性は、
splitterの位置が変更された時、その右側または下側のどの要素をサイズ変更するかを指示します。
closest: splitter のすぐ右側または下側の要素をサイズ変更します。farthest: splitter から最も遠い右側または下側の要素をサイズ変更します。grow: splitter がドラッグされても、その右側または下側の要素をサイズ変更しません。代わりに、コンテナ全体のサイズを変更します。flex: 最も近い伸縮自在の要素をサイズ変更します。
-
resizebefore - 型: 以下の値のいずれか一つ
- この属性は、
splitterの位置が変更された時、その左側または上側のどの要素をサイズ変更するかを指示します。
closest: splitter のすぐ左側または上側の要素をサイズ変更します。farthest: splitter から最も遠い左側または上側の要素をサイズ変更します。flex: 最も近い伸縮自在の要素をサイズ変更します。
-
state - 型: 以下の値のいずれか一つ
-
splitterの持つコンテンツが折り畳まれているかどうかを指示します。この属性は、splitter を移動すると自動的に更新されます。一般的には、スタイルシート内で状態ごとに異なる外観を適用するために使用します。
open: collapsed 属性に依存しますが、splitter の前または後のコンテンツは現在表示されています。collapsed: splitter の前または後のコンテンツは折り畳まれているか表示されていません。dragging: ユーザが splitter の位置を (マウスでドラッグするなどして) 調節しています。
-
substate - 型: 以下の値のいずれか一つ
- 属性値に state="collapsed" および collapse="both" を持つ
splitter上で、実際に折り畳まれる splitter の方向を決定します。collapse="both" が Gecko 1.9 以降の機能であるため、それ以前のバージョンでは効果がありません。
before: splitter のすぐ前の要素が折り畳まれています。after: splitter のすぐ後の要素が折り畳まれています。
プロパティ
メソッド
XUL 要素からの継承
blur, click, doCommand, focus, getElementsByAttribute, getElementsByAttributeNS
DOM 要素からの継承
addEventListener(), appendChild(), compareDocumentPosition, dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData
スタイルクラス
次のクラスは要素のスタイルに使用されます。これらのクラスは、ユーザの選択したテーマとより自然に適合させるため、要素のスタイルを直接変更する代わりに使用します。
-
tree-splitter - この splitter は tree columns 内 (
treecol要素間) での使用を意図しています。splitter は幅なしで描画されるので見えませんが、columns のサイズ変更が可能です。
<tree id="tree1" flex="1" height="300" enableColumnDrag="true">
<treecols>
<treecol id="name" label="名前" flex="1"/>
<splitter class="tree-splitter"/>
<treecol id="id" label="ID" flex="1"/>
<splitter class="tree-splitter"/>
<treecol id="date" label="日付" flex="1"/>
<splitter class="tree-splitter"/>
</treecols>
<treechildren/>
</tree>
関連項目
TBD