Skip to content

Commit

Permalink
Define a <details> element to act as a disclosure triangle widget.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@77 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jul 6, 2006
1 parent 6cfbd8c commit f98736a
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 66 deletions.
141 changes: 90 additions & 51 deletions index
View file
Expand Up @@ -24,7 +24,7 @@

<h1 id="web-applications">Web Applications 1.0</h1>

<h2 class="no-num no-toc" id="working">Working Draft &mdash; 1 July 2006</h2>
<h2 class="no-num no-toc" id="working">Working Draft &mdash; 6 July 2006</h2>

<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
Expand Down Expand Up @@ -518,7 +518,9 @@
elements</a>
<ul class="toc">
<li><a href="#disclosure"><span class="secno">3.19.1.
</span>Disclosure widget <span title="TBW">[TBW]</span></a>
</span>Disclosure widgets: the <dfn
id="details"><code>details</code></dfn> element <span
title="TBW">[TBW]</span></a>

<li><a href="#scs-the"><span class="secno">3.19.2. </span><span
title="SCS">[SCS]</span> The <dfn
Expand Down Expand Up @@ -8086,35 +8088,72 @@ interface <dfn id="htmlsectionelement">HTMLSectionElement</dfn> : <span><a href=

<h3 id="interactive1"><span class="secno">3.19. </span>Interactive elements</h3>

<h4 id="disclosure"><span class="secno">3.19.1. </span>Disclosure widget
<span title="TBW"><a href="#tbw">[TBW]</a></span></h4>
<!-- XXXXXXXXXX
<p><span title="interactive elements">Interactive</span>,
<span title="block-level elements">block-level element</span>.</p>
<h4 id="disclosure"><span class="secno">3.19.1. </span>Disclosure widgets:
the <dfn id="details0"><code>details</code></dfn> element <span
title="TBW"><a href="#tbw">[TBW]</a></span></h4>

<p><span title="interactive elements"><a
href="#interactive3">Interactive</a></span>, <span title="block-level
elements"><a href="#block-level1">block-level element</a></span>.

<dl class="element">
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>block-level elements</span> are expected.</dd>
<dt>Content model:</dt>

<dd>Zero or more <span>block-level elements</span>, or <span>inline-level content</span> (but not both).</dd>

<dt>Element-specific attributes:</dt>
<dd><code title="attr-script-src">src</code></dd>
<dd><code title="attr-script-type">type</code></dd>
<dd><code title="attr-script-defer">defer</code> (if the <code title="attr-script-src">src</code> attribute is present)</dd>
<dd><code title="attr-script-async">async</code> (if the <code title="attr-script-src">src</code> attribute is present)</dd>
<dt>DOM interface:</dt>
<dt>Contexts in which this element may be used:

<dd>Where <span><a href="#block-level1">block-level elements</a></span>
are expected.

<dt>Content model:

<dd>One <code>legend</code> element followed by either zero or more
<span><a href="#block-level1">block-level elements</a></span> or <span><a
href="#inline-level1">inline-level content</a></span> (but not both).

<dt>Element-specific attributes:

<dd>None.

<dt>DOM interface:

<dd>
<pre class="idl">interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
attribute DOMString <code title="dom-script-text">text</code>;
attribute DOMString <code title="dom-script-src">src</code>;
attribute DOMString <code title="dom-script-type">type</code>;
attribute boolean <code title="dom-script-defer">defer</code>;
attribute boolean <code title="dom-script-async">async</code>;
<pre
class="idl">interface <dfn id="htmldetailselement">HTMLDetailsElement</dfn> : <span><a href="#htmlelement">HTMLElement</a></span> {
void <code title="dom-details-open"><a href="#open">open</a></code>();
void <code title="dom-details-close"><a href="#close">close</a></code>();
};</pre>
</dd>
</dl>

<p>The <code><a href="#details0">details</a></code> element represents
additional information which, by default, the user is not shown, but which
the user can obtain on demand.

<p>The first element child of a <code><a
href="#details0">details</a></code> element, if it is a
<code>legend</code> element, represents the summary of the details. This
should be the information shown to the user by default. The rest of the
contents of the element represents the details. These should be shown on
request.

<p>If the first element is not a <code>legend</code> element, the UA should
provide its own legend (e.g. "Details").

<p>The <dfn id="open" title="dom-details-open"><code>open()</code></dfn>
method, when invoked, must cause the user agent to act as if the user had
requested that the details be shown. The <dfn id="close"
title="dom-details-close"><code>close()</code></dfn> method, when invoked,
must cause the user agent to act as if the user had requested that the
details be hidden.

<p class="note">These methods don't trigger the UI events that would lead
up to the <code><a href="#details0">details</a></code> element being
openned or closed; for example, if typically the details are shown when
the element's box is clicked, the <code title="dom-details-open"><a
href="#open">open()</a></code> method wouldn't trigger a <code
title="event-click">click</code> event; it would simply show the details,
as if the default action of that event had executed.</p>
<!--
http://mail.gnome.org/archives/usability/2006-June/msg00015.html
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGControls/chapter_18_section_7.html
https://www.google.com/base/settings
-->

<h4 id="scs-the"><span class="secno">3.19.2. </span><span title="SCS"><a
Expand Down Expand Up @@ -8577,7 +8616,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<td>Rows

<td>The row can be opened and closed, and, unless the <code
title="datagrid-row-class-open"><a href="#open">open</a></code> class
title="datagrid-row-class-open"><a href="#open0">open</a></code> class
is also present, the row is currently closed.

<tr>
Expand Down Expand Up @@ -8644,7 +8683,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
href="#datagrid0">datagrid</a></code> is initially rendered.

<tr>
<td><!--open--><dfn id="open"
<td><!--open--><dfn id="open0"
title="datagrid-row-class-open"><code>open</code></dfn>

<td>Rows
Expand Down Expand Up @@ -8985,7 +9024,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<li>If the row's element contains other elements that are also in the
view, and the element's <code title="attr-class">class</code> attribute
doesn't contain the <code title="">closed</code> class: <code
title="datagrid-row-class-open"><a href="#open">open</a></code>
title="datagrid-row-class-open"><a href="#open0">open</a></code>
</ul>

<p>The <code title="dom-provider-toggleRowOpenState"><a
Expand Down Expand Up @@ -9118,7 +9157,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<li>If the row's element contains other elements that are also in the
view, and the element's <code title="attr-class">class</code> attribute
doesn't contain the <code title="">closed</code> class: <code
title="datagrid-row-class-open"><a href="#open">open</a></code>
title="datagrid-row-class-open"><a href="#open0">open</a></code>

<li>If the row's element is an <code><a
href="#h10">h1</a></code>-<code><a href="#h60">h6</a></code> element:
Expand Down Expand Up @@ -9526,7 +9565,7 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<dt id="rowType1">To establish whether a row is openable

<dd>Check whether one of the <code title="datagrid-row-class-open"><a
href="#open">open</a></code> or <code
href="#open0">open</a></code> or <code
title="datagrid-row-class-closed"><a href="#closed">closed</a></code>
classes applies to the row. If one (or both) of these are present, then
the row can be opened and closed, otherwise neither are present and the
Expand All @@ -9536,14 +9575,14 @@ interface <dfn id="datagriddataprovider">DataGridDataProvider</dfn> {
<dt>To establish whether an openable row is open or closed

<dd>Check whether the <code title="datagrid-row-class-open"><a
href="#open">open</a></code> class applies to the row. If it does, the
href="#open0">open</a></code> class applies to the row. If it does, the
row is open. Otherwise, the row is closed. The <code
title="datagrid-row-class-closed"><a href="#closed">closed</a></code>
class is not examined to make this determination (although either it or
the <code title="datagrid-row-class-open"><a href="#open">open</a></code>
class must be present to make the row openable in the first place). If a
closed row has rows that consider it a parent, those rows must still be
included in the rendering.</dd>
the <code title="datagrid-row-class-open"><a
href="#open0">open</a></code> class must be present to make the row
openable in the first place). If a closed row has rows that consider it a
parent, those rows must still be included in the rendering.</dd>
<!-- XXXPA
<dt>To establish whether a row is deletable</dt>

Expand Down Expand Up @@ -16769,7 +16808,7 @@ document.getElementById('stock').addEventListener('stock change',
title="dom-connection-readyState"><a
href="#readystate">readyState</a></code> attribute's value must be changed
to 1, and the <code title="event-connection-open"><a
href="#open0">open</a></code> event must be fired on the <code><a
href="#open1">open</a></code> event must be fired on the <code><a
href="#connection0">Connection</a></code> object.

<p>When data is received, the <code title="event-connection-read"><a
Expand All @@ -16782,7 +16821,7 @@ document.getElementById('stock').addEventListener('stock change',
title="dom-connection-readyState"><a
href="#readystate">readyState</a></code> attribute's value must be changed
to 2, and the <code title="event-connection-close"><a
href="#close">close</a></code> event must be fired on the <code><a
href="#close0">close</a></code> event must be fired on the <code><a
href="#connection0">Connection</a></code> object.

<p>The <dfn id="onopen"
Expand All @@ -16791,9 +16830,9 @@ document.getElementById('stock').addEventListener('stock change',
id="onclose" title="dom-connection-onclose"><code>onclose</code></dfn>
attributes must, when set, register their new value as an event listener
for their respective events (namely <code title="event-connection-open"><a
href="#open0">open</a></code>, <code title="event-connection-read"><a
href="#open1">open</a></code>, <code title="event-connection-read"><a
href="#read">read</a></code>, and <code title="event-connection-close"><a
href="#close">close</a></code>), and unregister their previous value if
href="#close0">close</a></code>), and unregister their previous value if
any.

<p>The <dfn id="send" title="dom-connection-send"><code>send()</code></dfn>
Expand All @@ -16806,7 +16845,7 @@ document.getElementById('stock').addEventListener('stock change',
title="dom-connection-disconnect"><code>disconnect()</code></dfn> method
must close the connection, if it is open. If the connection is already
closed, it must do nothing. Closing the connection causes a <code
title="event-connection-close"><a href="#close">close</a></code> event to
title="event-connection-close"><a href="#close0">close</a></code> event to
be fired and the <code title="dom-connection-readyState"><a
href="#readystate">readyState</a></code> attribute's value to change, as
<a href="#closeConnection">described above</a>.
Expand All @@ -16817,12 +16856,12 @@ document.getElementById('stock').addEventListener('stock change',
<code>http://www.w3.org/2001/xml-events</code> namespace, which do not
bubble, are not cancelable, and have no default action.

<p>The <dfn id="open0"
<p>The <dfn id="open1"
title="event-connection-open"><code>open</code></dfn> event is fired when
the connection is established. UAs must use the normal <code>Event</code>
interface when firing this event.

<p>The <dfn id="close"
<p>The <dfn id="close0"
title="event-connection-close"><code>close</code></dfn> event is fired
when the connection is closed (whether by the author, calling the <code
title="dom-connection-disconnect"><a
Expand Down Expand Up @@ -17009,7 +17048,7 @@ document.getElementById('stock').addEventListener('stock change',

<p>As soon as the object is returned, the connection <a
href="#openConnection">has been established</a>, which implies that the
<code title="event-connection-open"><a href="#open0">open</a></code> event
<code title="event-connection-open"><a href="#open1">open</a></code> event
must be fired. Broadcast connections are never closed.

<h5 id="broadcasting"><span class="secno">7.2.5.1. </span>Broadcasting over
Expand Down Expand Up @@ -17857,7 +17896,7 @@ function receiver(e) {

<dd>
<p>If the next input character is a U+002F SOLIDUS (/) character,
consume it and switch to the <span><a href="#close0">close tag open
consume it and switch to the <span><a href="#close1">close tag open
state</a></span>. If the next input character is not a U+002F SOLIDUS
(/) character, emit a U+003C LESS-THAN SIGN character token and
reconsume the current input character in the <span><a
Expand All @@ -17877,7 +17916,7 @@ function receiver(e) {

<dt>U+002F SOLIDUS (/)

<dd>Switch to the <span><a href="#close0">close tag open
<dd>Switch to the <span><a href="#close1">close tag open
state</a></span>.

<dt>U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL
Expand Down Expand Up @@ -17921,7 +17960,7 @@ function receiver(e) {
</dl>
</dl>

<dt><dfn id="close0">Close tag open state</dfn>
<dt><dfn id="close1">Close tag open state</dfn>

<dd>
<p>If the <span><a href="#content2">content model flag</a></span> is set
Expand Down Expand Up @@ -21129,7 +21168,7 @@ function receiver(e) {
"colgroup", "tbody", "td", "tfoot", "th", "thead", "tr"

<dd>
<p><span><a href="#close1">Close the cell</a></span> (see below) and
<p><span><a href="#close2">Close the cell</a></span> (see below) and
reprocess the current token.</p>

<dt>An end tag whose tag name is one of: "body", "col", "colgroup",
Expand All @@ -21149,13 +21188,13 @@ function receiver(e) {
"tbody", "tfoot" and "thead"), then this is a <span><a
href="#parse">parse error</a></span> and the token must be ignored.</p>

<p>Otherwise, <span><a href="#close1">close the cell</a></span> (see
<p>Otherwise, <span><a href="#close2">close the cell</a></span> (see
below) and reprocess the current token.</p>

<dt>An end-of-file token

<dd>
<p><span><a href="#close1">Close the cell</a></span> and reprocess
<p><span><a href="#close2">Close the cell</a></span> and reprocess
the end-of-file token.</p>

<dt>Anything else
Expand All @@ -21165,7 +21204,7 @@ function receiver(e) {
mode</a></span> was "in body".</p>
</dl>

<p>Where the steps above say to <dfn id="close1">close the cell</dfn>,
<p>Where the steps above say to <dfn id="close2">close the cell</dfn>,
they mean to follow the following algorithm:</p>

<ol>
Expand Down
57 changes: 42 additions & 15 deletions source
View file
Expand Up @@ -6571,34 +6571,61 @@ interface <dfn>HTMLSectionElement</dfn> : <span>HTMLElement</span> {



<h4>Disclosure widget <span title="TBW">[TBW]</span></h4>
<!-- XXXXXXXXXX
<h4>Disclosure widgets: the <dfn><code>details</code></dfn> element <span title="TBW">[TBW]</span></h4>

<p><span title="interactive elements">Interactive</span>,
<span title="block-level elements">block-level element</span>.</p>

<dl class="element">
<dt>Contexts in which this element may be used:</dt>
<dd>Where <span>block-level elements</span> are expected.</dd>
<dt>Content model:</dt>

<dd>Zero or more <span>block-level elements</span>, or <span>inline-level content</span> (but not both).</dd>

<dd>One <code>legend</code> element followed by either zero or more
<span>block-level elements</span> or <span>inline-level
content</span> (but not both).</dd>
<dt>Element-specific attributes:</dt>
<dd><code title="attr-script-src">src</code></dd>
<dd><code title="attr-script-type">type</code></dd>
<dd><code title="attr-script-defer">defer</code> (if the <code title="attr-script-src">src</code> attribute is present)</dd>
<dd><code title="attr-script-async">async</code> (if the <code title="attr-script-src">src</code> attribute is present)</dd>
<dd>None.</dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
attribute DOMString <code title="dom-script-text">text</code>;
attribute DOMString <code title="dom-script-src">src</code>;
attribute DOMString <code title="dom-script-type">type</code>;
attribute boolean <code title="dom-script-defer">defer</code>;
attribute boolean <code title="dom-script-async">async</code>;
<pre class="idl">interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
void <code title="dom-details-open">open</code>();
void <code title="dom-details-close">close</code>();
};</pre>
</dd>
</dl>

<p>The <code>details</code> element represents additional
information which, by default, the user is not shown, but which the
user can obtain on demand.</p>

<p>The first element child of a <code>details</code> element, if it
is a <code>legend</code> element, represents the summary of the
details. This should be the information shown to the user by
default. The rest of the contents of the element represents the
details. These should be shown on request.</p>

<p>If the first element is not a <code>legend</code> element, the
UA should provide its own legend (e.g. "Details").</p>

<p>The <dfn title="dom-details-open"><code>open()</code></dfn>
method, when invoked, must cause the user agent to act as if the
user had requested that the details be shown. The <dfn
title="dom-details-close"><code>close()</code></dfn> method, when
invoked, must cause the user agent to act as if the user had
requested that the details be hidden.</p>

<p class="note">These methods don't trigger the UI events that would
lead up to the <code>details</code> element being openned or closed;
for example, if typically the details are shown when the element's
box is clicked, the <code title="dom-details-open">open()</code>
method wouldn't trigger a <code title="event-click">click</code>
event; it would simply show the details, as if the default action of
that event had executed.</p>

<!--
http://mail.gnome.org/archives/usability/2006-June/msg00015.html
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGControls/chapter_18_section_7.html
https://www.google.com/base/settings
-->


Expand Down

0 comments on commit f98736a

Please sign in to comment.