diff options
Diffstat (limited to 'files/de/archive/mozilla/xul/splitter/index.html')
| -rw-r--r-- | files/de/archive/mozilla/xul/splitter/index.html | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/files/de/archive/mozilla/xul/splitter/index.html b/files/de/archive/mozilla/xul/splitter/index.html new file mode 100644 index 0000000000..6c89456da3 --- /dev/null +++ b/files/de/archive/mozilla/xul/splitter/index.html @@ -0,0 +1,173 @@ +--- +title: splitter +slug: Archive/Mozilla/XUL/splitter +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/splitter +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/de/docs/XUL_Referenz">XUL Referenz Startseite</a> [ + <a href="#Beispiele">Beispiele</a> | + <a href="#Attribute">Attribute</a> | + <a href="#Eigenschaften">Eigenschaften</a> | + <a href="#Methoden">Methoden</a> | + <a href="#Verwandte_Themen">Verwandte Themen</a> ] +</span></div> +<p>Ein Element, das vor oder nach einem Element innerhalb eines Containers auftauchen sollte. Das Ziehen des Trenners ändert die Größe der Geschwisterelemente des Trenners. Platziert man ein 'Griffchen' (<code><a href="/de/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code>) innerhalb eines Trenners, so wird ein Geschwisterelement des Trenners beim Anklicken des 'Griffchens' zugeklappt.</p> +<p>Weitere Information sind im <a href="/de/XUL_Tutorial/Splitters" title="de/XUL_Tutorial/Splitters">XUL Tutorial</a> verfügbar.</p> +<dl> <dt>Attribute</dt> <dd><a href="#a-collapse">collapse</a>, <a href="#a-resizeafter">resizeafter</a>, <a href="#a-resizebefore">resizebefore</a>, <a href="#a-state">state</a>, <a href="#a-substate">substate</a></dd> +</dl> +<dl> <dt>Styleklassen</dt> <dd><a href="#s-tree-splitter">tree-splitter</a></dd> +</dl> +<h3 id="Beispiele">Beispiele</h3> +<p> <img alt="splitter_arrow.png" class="internal default" src="/@api/deki/files/2917/=splitter_arrow.png" style="width: 313px; height: 28px;"></p> +<p><code><splitter tooltiptext="Größe der Suchbox verändern" oncommand="alert('Der Splitter wurde gezogen!')"><br> + <vbox id="Beispiel_vbox" /><br> +</splitter></code></p> +<h3 id="Attribute" name="Attribute">Attribute</h3> +<p> </p><div id="a-collapse"> + + +<dl> + <dt><code id="a-collapse"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Determines which side of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> is collapsed when its grippy is clicked. If this attribute is not specified, the splitter will not cause a collapse. You should put a <code><a href="/en-US/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code> element inside the splitter when it is used for collapsing.</dd> + <dd> + <dl> + <dt><code>none</code></dt> + <dd>No collapsing occurs.</dd> + <dt><code>before</code></dt> + <dd>When the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.</dd> + <dt><code>after</code></dt> + <dd>When the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.</dd> + <dt><code>both</code></dt> + <dd>Either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter. </dd> + </dl> + </dd> +</dl> +</div> <div id="a-resizeafter"> + + +<dl> + <dt><code id="a-resizeafter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>This attribute indicates which element to the right or below the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> should be resized when the splitter is repositioned.</dd> + <dd> + <dl> + <dt><code>closest</code></dt> + <dd>The element immediately to the right or below the splitter resizes.</dd> + <dt><code>farthest</code></dt> + <dd>The element that is the farthest away from the splitter to the right or below the splitter resizes.</dd> + <dt><code>grow</code></dt> + <dd>The elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.</dd> + <dt><code>flex</code></dt> + <dd>The closest flexible element resizes. </dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-resizebefore"> + + +<dl> + <dt><code id="a-resizebefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>This attribute indicates which element to the left or above the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> should be resized when the splitter is repositioned.</dd> + <dd> + <dl> + <dt><code>closest</code></dt> + <dd>The element immediately to the left or above the splitter resizes.</dd> + <dt><code>farthest</code></dt> + <dd>The element that is the farthest away from the splitter to the left or above the splitter resizes.</dd> + <dt><code>flex</code></dt> + <dd>The closest flexible element resizes. </dd> + </dl> + </dd> +</dl> +</div> <div id="a-state"> + + +<dl> + <dt><code id="a-state"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/state">state</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Indicates whether the <code><a href="/en-US/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> has collapsed content or not. This attribute will be updated automatically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state.</dd> + <dd> + <dl> + <dt><code>open</code></dt> + <dd>The content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.</dd> + <dt><code>collapsed</code></dt> + <dd>The content either before or after the splitter is collapsed and is not visible.</dd> + <dt><code>dragging</code></dt> + <dd>The user is current adjusting the position of the splitter, typically by dragging it with the mouse.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-substate"> + + +<dl> + <dt><code id="a-substate"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/substate">substate</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>On splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. Since collapse="both" is a Gecko 1.9+ feature, this will have no effect on earlier versions.</dd> + <dd> + <dl> + <dt><code>before</code></dt> + <dd>The element immediately before the splitter is collapsed.</dd> + <dt><code>after</code></dt> + <dd>The element immediately after the splitter is collapsed.</dd> + </dl> + </dd> +</dl> +</div> +<h3 id="Eigenschaften">Eigenschaften</h3> +<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Eigenschaften</strong><br> <small> <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/de/docs/XUL/Eigenschaften/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table> +<h3 id="Methoden" name="Methoden">Methoden</h3> +<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Geerbte Methoden</strong><br> <small><code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.addEventListener">element.addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.appendChild">node.appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.cloneNode">node.cloneNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.compareDocumentPosition">node.compareDocumentPosition()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.dispatchEvent">element.dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttribute">element.getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNode">element.getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNodeNS">element.getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getAttributeNS">element.getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getBoundingClientRect">element.getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getClientRects">element.getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByClassName">element.getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagName">element.getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.getElementsByTagNameNS">element.getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getFeature">node.getFeature()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.getUserData">node.getUserData()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttribute">element.hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.hasAttributeNS">element.hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasAttributes">nodes.hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.nodes.hasChildNodes">nodes.hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.insertBefore">node.insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isDefaultNamespace">node.isDefaultNamespace()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isEqualNode">node.isEqualNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSameNode">node.isSameNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.isSupported">node.isSupported()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupNamespaceURI">node.lookupNamespaceURI()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.lookupPrefix">node.lookupPrefix()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.normalize">node.normalize()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelector">element.querySelector()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.querySelectorAll">element.querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttribute">element.removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNode">element.removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeAttributeNS">element.removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.removeChild">node.removeChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.removeEventListener">element.removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.replaceChild">node.replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttribute">element.setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNode">element.setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNodeNS">element.setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.element.setAttributeNS">element.setAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/de/docs/DOM/element.node.setUserData">node.setUserData()</a></code></small></p> </td> </tr> </tbody> +</table> +<h3 id="Styleklassen">Styleklassen</h3> +<p>Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.</p> +<dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/tree-splitter">tree-splitter</a></code></dt> + <dd>This splitter is intended to be used in tree columns (in-between <code><a href="/en-US/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> elements). The splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized.</dd> +</dl> +<pre> <tree id="tree1" flex="1" height="300" enableColumnDrag="true"> + <treecols> + <treecol id="name" label="Name" flex="1"/> + <splitter class="tree-splitter"/> + <treecol id="id" label="ID" flex="1"/> + <splitter class="tree-splitter"/> + <treecol id="date" label="Date" flex="1"/> + <splitter class="tree-splitter"/> + </treecols> + <treechildren/> + </tree> +</pre> +<h3 id="Related" name="Related">Splitter resizing und overflow</h3> +<p>Das Maß, welches die Größe der Box verändert und was während der Größenveränderung passiert nachdem das Limit erreicht wurde, hängt von der festgelegten Höhe (oder Breite) der Box, welche über ein Attribut, über eine CSS Anweisung (min-height [oder min-width]) oder die wirkliche Höhe der Boxinhalte bestimmt werden kann, und von der An- oder Abwesenheit des eines <code>collapse</code> Attributs des Splitters ab.</p> +<p>Bei:</p> +<pre><vbox></vbox> +<splitter/> +<vbox></vbox></pre> +<p>...wird sich der Splitter nicht bewegen, da kein <code>collapse</code> Attribute für den Splitter festgeleget wurde, was dazu führt das der Splitter zusammenfällt, sobald er gezogen wird.</p> +<p>Bei:</p> +<pre><vbox></vbox> +<splitter/> +<vbox height="500"><vbox height="100"/></vbox></pre> +<p>...kann der Splitter bis auf eine Höhe von 100px der unteren Box gezogen werden, wo er nicht weiter gezogen werden kann (oder zusammenfällt, wenn der Splitter über ein <code>collapse</code> Attribut verfügt).</p> +<p>Bei:</p> +<pre><vbox></vbox> +<splitter/> +<vbox height="500" minheight="200"><vbox height="100"/></vbox></pre> +<p>...kann der Splitter bis auf eine Mindesthöhe von 200px gezogen werden, wo er stoppen wird oder zusammenfällt.</p> +<p>Bei:</p> +<pre><vbox></vbox> +<splitter> +<vbox height="500" style="min-height: 50"><vbox height="100"/></vbox></pre> +<p>...kann der Splitter bis unter einer Höhe von 100px der unteren Box gezogen werden, wodurch das Kindelement überläuft, wenn die Mindesthöhe erreicht wird. Dort stoppt oder fällt der Splitter zusammen. Das sollte auch mit einem <code>minheight</code> Attribut, das kleiner als die wirkliche Höhe ist, möglich sein. (Jedoch funktioniert der Überlauf tatsächlich wegen <a class=" external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=513597" title="http://bugzilla.mozilla.org/show_bug.cgi?id=513597">Bug 513597</a> nur beim Festlegen von<code> minheight</code> und <code>minwidth</code> Attributen oder bei einer Angabe von <code>min-height</code> oder <code>min-width</code> über CSS).</p> +<h3 id="Verwandte_Themen">Verwandte Themen</h3> +<p>TBD</p> |