Skip to main content

Visit Mozilla.org

XUL:splitter

出典: MDC

« XUL リファレンス HOME    [ 例 | 属性 | プロパティ | メソッド | 関連項目 ]

コンテナの内側の要素の前または後に表示される要素です。splitter がドラッグされると、splitter の兄弟要素のサイズが変更されます。grippy が splitter の内側に置かれている場合は、grippy がクリックされたとき、splitter の兄弟要素の一つが折り畳まれます。

詳しい情報は XUL チュートリアルにあります。

属性
collapse, resizeafter, resizebefore, state, substate
スタイルクラス
tree-splitter

[編集] 例

(例が必要)

[編集] 属性

XUL 要素からの継承
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

collapse
型: 以下の値のいずれか一つ
splitter の grippy がクリックされた時、どちら側を折り畳むかを決定します。この属性が指定されていない場合、splitter は折り畳まれません。要素を折り畳むには grippy 要素を splitter の内側に置かなければなりません。
  • none: 要素は折り畳まれません。
  • before: grippy がクリックされると、同じ親要素を持つ splitter のすぐ前の要素が折り畳まれ、その幅と高さは 0 になります。
  • after: grippy がクリックされるとすぐに、同じ親要素を持つ splitter のすぐ後の要素が折り畳まれ、その幅と高さは 0 になります。
  • both: grippy がクリックされると、splitter の前後に隣接する要素が折り畳まれます。 splitter の位置によっては、その要素のサイズが最小サイズ以下になります。 Firefox 3 の新機能

resizeafter
型: 以下の値のいずれか一つ
この属性は、splitter の位置が変更された時、その右側または下側のどの要素をサイズ変更するかを指示します。
  • closest: splitter のすぐ右側または下側の要素をサイズ変更します。
  • farthest: splitter から最も遠い右側または下側の要素をサイズ変更します。
  • grow: splitter がドラッグされても、その右側または下側の要素をサイズ変更しません。代わりに、コンテナ全体のサイズを変更します。
  • flex: 最も近い伸縮自在の要素をサイズ変更します。 Firefox 3 の新機能

resizebefore
型: 以下の値のいずれか一つ
この属性は、splitter の位置が変更された時、その左側または上側のどの要素をサイズ変更するかを指示します。
  • closest: splitter のすぐ左側または上側の要素をサイズ変更します。
  • farthest: splitter から最も遠い左側または上側の要素をサイズ変更します。
  • flex: 最も近い伸縮自在の要素をサイズ変更します。 Firefox 3 の新機能

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 要素からの継承
align, allowEvents, boxObject, builder, className, collapsed, contextMenu, controllers, currentItem, database, datasources, dir, flex, height, hidden, id, left, listBoxObject, maxHeight, maxWidth, menu, minHeight, minWidth, observes, ordinal, orient, pack, persist, ref, resource, statusText, style, tooltip, tooltipText, top, value, width

DOM 要素からの継承
attributes, childNodes, cloneNode, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, tagName

[編集] メソッド

XUL 要素からの継承
blur, click, doCommand, focus, getElementsByAttribute

DOM 要素からの継承
addEventListener, appendChild, dispatchEvent, getAttribute, getAttributeNode, getAttributeNodeNS, getAttributeNS, getElementsByTagName, getElementsByTagNameNS, hasAttribute, hasAttributeNS, hasAttributes, hasChildNodes, insertBefore, isSupported, normalize, removeAttribute, removeAttributeNode, removeAttributeNS, removeChild, removeEventListener, replaceChild, setAttribute, setAttributeNode, setAttributeNodeNS, setAttributeNS

[編集] スタイルクラス

次のクラスは要素のスタイルに使用されます。これらのクラスは、ユーザの選択したテーマとより自然に適合させるため、要素のスタイルを直接変更する代わりに使用します。

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

"http://developer.mozilla.org/ja/docs/XUL:splitter" より作成