[html5] r3646 - [e] (0) Add a half-baked intro for <menu>.

[whatwg at whatwg.org]

Author: ianh
Date: 2009-08-17 03:28:19 -0700 (Mon, 17 Aug 2009)
New Revision: 3646

Modified:
   index
   source
Log:
[e] (0) Add a half-baked intro for <menu>.

Modified: index
===================================================================
--- index	2009-08-17 09:47:22 UTC (rev 3645)
+++ index	2009-08-17 10:28:19 UTC (rev 3646)
@@ -40268,12 +40268,14 @@
 
   <p><i>This section is non-normative.</i></p>
 
-  <p class=XXX>...</p>
+  <p>The <code><a href=#menus>menu</a></code> element is used to define context menus and
+  tool bars.</p>
 
-<!--
+  <p>For example, the following represents a toolbar with three menu
+  buttons on it, each of which has a dropdown menu with a series of
+  options:</p>
 
-
-  <pre><menu type="commands">
+  <pre><menu type="toolbar">
  <li>
   <menu label="File">
    <button type="button" onclick="fnew()">New...</button>
@@ -40295,23 +40297,22 @@
    <li><a href="about.html">About</a></li>
   </menu>
  </li>
-</menu>
+</menu></pre>
 
-...
+  <p>In a supporting user agent, this might look like this:</p>
 
-<input command="save"/> <!- - This will act exactly like the
-                             Save button above, including reflecting
-                             its <code>disabled</code> state dynamically - ->
+  <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." src=images/sample-toolbar-1.png></p>
 
-</pre>
+  <p>In a legacy user agent, the above would look like a bulleted list
+  with three items, the first of which has four buttons, the second of
+  which has three, and the third of which has two nested bullet points
+  with two items consisting of links.</p>
 
-  <p>Here's some markup that falls back on the traditional abuse of
-  the <code>select</code> element as a navigation menu, but which is
-  implemented as a semi-correct menu using the new techniques of this
-  document:</p>
+  <hr><p>The following implements a similar toolbar, with a single button
+  whose values, when selected, redirect the user to Web sites.</p>
 
-<pre><form action="redirect.cgi">
- <menu type="commands">
+  <pre><form action="redirect.cgi">
+ <menu type="toolbar">
   <label for="goto">Go to...</label>
   <menu label="Go">
    <select id="goto"
@@ -40327,47 +40328,14 @@
  </menu>
 </form></pre>
 
-<form ...>
- <menu type="toolbar">
-  <li>
-   <select name="foo" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </li>
-  <li>
-   <select name="bar" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </li>
- </menu>
-</form>
+  <p>The behavior in supporting user agents is similar to the example
+  above, but here the legacy behaviour consists of a single
+  <code><a href=#the-select-element>select</a></code> element with a submit button. The submit button
+  doesn't appear in the toolbar, because it is not a direct child of
+  the <code><a href=#menus>menu</a></code> element or of its <code><a href=#the-li-element>li</a></code>
+  children.</p>
 
-<form ...>
- <menu type="toolbar">
-  <menu label="Foo">
-   <select name="foo" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </menu>
-  <menu label="Bar">
-   <select name="bar" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </menu>
- </menu>
-</form>
 
-
-explain that only direct children of the <menu> matter
-
--->
-
-
-
   <div class=impl>
 
   <h5 id=building-menus-and-tool-bars><span class=secno>4.11.3.2 </span><dfn>Building menus and tool bars</dfn></h5>

Modified: source
===================================================================
--- source	2009-08-17 09:47:22 UTC (rev 3645)
+++ source	2009-08-17 10:28:19 UTC (rev 3646)
@@ -44939,12 +44939,14 @@
 
   <p><i>This section is non-normative.</i></p>
 
-  <p class="XXX">...</p>
+  <p>The <code>menu</code> element is used to define context menus and
+  tool bars.</p>
 
-<!--
+  <p>For example, the following represents a toolbar with three menu
+  buttons on it, each of which has a dropdown menu with a series of
+  options:</p>
 
-
-  <pre><menu type="commands">
+  <pre><menu type="toolbar">
  <li>
   <menu label="File">
    <button type="button" onclick="fnew()">New...</button>
@@ -44966,23 +44968,24 @@
    <li><a href="about.html">About</a></li>
   </menu>
  </li>
-</menu>
+</menu></pre>
 
-...
+  <p>In a supporting user agent, this might look like this:</p>
 
-<input command="save"/> <!- - This will act exactly like the
-                             Save button above, including reflecting
-                             its <code>disabled</code> state dynamically - ->
+  <p><img src="images/sample-toolbar-1.png" alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'."></p>
 
-</pre>
+  <p>In a legacy user agent, the above would look like a bulleted list
+  with three items, the first of which has four buttons, the second of
+  which has three, and the third of which has two nested bullet points
+  with two items consisting of links.</p>
 
-  <p>Here's some markup that falls back on the traditional abuse of
-  the <code>select</code> element as a navigation menu, but which is
-  implemented as a semi-correct menu using the new techniques of this
-  document:</p>
+  <hr>
 
-<pre><form action="redirect.cgi">
- <menu type="commands">
+  <p>The following implements a similar toolbar, with a single button
+  whose values, when selected, redirect the user to Web sites.</p>
+
+  <pre><form action="redirect.cgi">
+ <menu type="toolbar">
   <label for="goto">Go to...</label>
   <menu label="Go">
    <select id="goto"
@@ -44998,47 +45001,14 @@
  </menu>
 </form></pre>
 
-<form ...>
- <menu type="toolbar">
-  <li>
-   <select name="foo" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </li>
-  <li>
-   <select name="bar" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </li>
- </menu>
-</form>
+  <p>The behavior in supporting user agents is similar to the example
+  above, but here the legacy behaviour consists of a single
+  <code>select</code> element with a submit button. The submit button
+  doesn't appear in the toolbar, because it is not a direct child of
+  the <code>menu</code> element or of its <code>li</code>
+  children.</p>
 
-<form ...>
- <menu type="toolbar">
-  <menu label="Foo">
-   <select name="foo" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </menu>
-  <menu label="Bar">
-   <select name="bar" onchange="form.submit()">
-     ...
-   </select>
-   <button>Go</button>
-  </menu>
- </menu>
-</form>
 
-
-explain that only direct children of the <menu> matter
-
--->
-
-
-
   <div class="impl">
 
   <h5><dfn>Building menus and tool bars</dfn></h5>