[html5] r4541 - / images

[whatwg at whatwg.org]

Author: ianh
Date: 2010-01-07 03:37:34 -0800 (Thu, 07 Jan 2010)
New Revision: 4541

Added:
   images/sample-details-1.png
   images/sample-details-2.png
Modified:
   complete.html
   index
   source
   vocabs-index
Log:
[e] (0) Add an example of <details>.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8668

Modified: complete.html
===================================================================
--- complete.html	2010-01-07 10:37:03 UTC (rev 4540)
+++ complete.html	2010-01-07 11:37:34 UTC (rev 4541)
@@ -63,6 +63,8 @@
    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
    .apple-table-examples sup { line-height: 0; }
 
+   .details-example img { vertical-align: top; }
+
   </style><link href=status.css rel=stylesheet><script>
    var loadTimer = new Date();
    var current_revision = "r" + "$Revision$".substr(11);
@@ -40151,8 +40153,28 @@
 
   </div>
 
+  <div class=example>
 
+   <p>The following shows how a <code><a href=#the-details-element>details</a></code> element can be
+   used to hide some controls by default:</p>
 
+   <pre><details>
+ <dt>Name & Extension:
+ <dd>
+  <p><input type=text name=fn value="Pillar Magazine.pdf">
+  <p><label><input type=checkbox name=ext checked> Hide extension</label>
+</details></pre>
+
+   <p>One could use this in conjuction with other <code><a href=#the-details-element>details</a></code>
+   in a list to allow the user to collapse a set of fields down to a
+   small set of headings, with the ability to open each one.</p>
+
+   <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>
+
+  </div>
+
+
+
 <!-- v2DATAGRID
   <h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
 

Added: images/sample-details-1.png
===================================================================
(Binary files differ)


Property changes on: images/sample-details-1.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream

Added: images/sample-details-2.png
===================================================================
(Binary files differ)


Property changes on: images/sample-details-2.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream

Modified: index
===================================================================
--- index	2010-01-07 10:37:03 UTC (rev 4540)
+++ index	2010-01-07 11:37:34 UTC (rev 4541)
@@ -63,6 +63,8 @@
    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
    .apple-table-examples sup { line-height: 0; }
 
+   .details-example img { vertical-align: top; }
+
   </style><link href=data:text/css, id=complete rel=stylesheet title="Complete specification"><link href=data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20} id=author rel="alternate stylesheet" title="Author documentation only"><link href=data:text/css,.impl%20{%20background:%20%23FFEEEE;%20} id=highlight rel="alternate stylesheet" title="Highlight implementation requirements"><link href=status.css rel=stylesheet><script>
    var loadTimer = new Date();
    var current_revision = "r" + "$Revision$".substr(11);
@@ -39986,8 +39988,28 @@
 
   </div>
 
+  <div class=example>
 
+   <p>The following shows how a <code><a href=#the-details-element>details</a></code> element can be
+   used to hide some controls by default:</p>
 
+   <pre><details>
+ <dt>Name & Extension:
+ <dd>
+  <p><input type=text name=fn value="Pillar Magazine.pdf">
+  <p><label><input type=checkbox name=ext checked> Hide extension</label>
+</details></pre>
+
+   <p>One could use this in conjuction with other <code><a href=#the-details-element>details</a></code>
+   in a list to allow the user to collapse a set of fields down to a
+   small set of headings, with the ability to open each one.</p>
+
+   <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>
+
+  </div>
+
+
+
 <!-- v2DATAGRID
   <h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
 

Modified: source
===================================================================
--- source	2010-01-07 10:37:03 UTC (rev 4540)
+++ source	2010-01-07 11:37:34 UTC (rev 4541)
@@ -44818,8 +44818,28 @@
 
   </div>
 
+  <div class="example">
 
+   <p>The following shows how a <code>details</code> element can be
+   used to hide some controls by default:</p>
 
+   <pre><details>
+ <dt>Name & Extension:
+ <dd>
+  <p><input type=text name=fn value="Pillar Magazine.pdf">
+  <p><label><input type=checkbox name=ext checked> Hide extension</label>
+</details></pre>
+
+   <p>One could use this in conjuction with other <code>details</code>
+   in a list to allow the user to collapse a set of fields down to a
+   small set of headings, with the ability to open each one.</p>
+
+   <p class="details-example"><img src="images/sample-details-1.png" alt=""><img src="images/sample-details-2.png" alt=""></p>
+
+  </div>
+
+
+
 <!-- v2DATAGRID
   <h4 id="datagrid">The <dfn><code>datagrid</code></dfn> element</h4>
 

Modified: vocabs-index
===================================================================
--- vocabs-index	2010-01-07 10:37:03 UTC (rev 4540)
+++ vocabs-index	2010-01-07 11:37:34 UTC (rev 4541)
@@ -43,6 +43,8 @@
    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
    .apple-table-examples sup { line-height: 0; }
 
+   .details-example img { vertical-align: top; }
+
   </style><body class="cfc">
 
   <header class="head"><p><a class="logo" href="http://www.whatwg.org/" rel="home"><img alt="WHATWG" src="/images/logo"></a></p>