Skip to content

Commit

Permalink
[e] (0) Add a half-baked intro for <menu>.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@3646 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 17, 2009
1 parent 2512f3f commit 7b1db1a
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 110 deletions.
78 changes: 23 additions & 55 deletions index
View file
Expand Up @@ -40268,12 +40268,14 @@ interface <dfn>DataGridListener</dfn> {

<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>&lt;menu type="commands"&gt;
<pre>&lt;menu type="toolbar"&gt;
&lt;li&gt;
&lt;menu label="File"&gt;
&lt;button type="button" onclick="fnew()"&gt;New...&lt;/button&gt;
Expand All @@ -40295,23 +40297,22 @@ interface <dfn>DataGridListener</dfn> {
&lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/menu&gt;
&lt;/li&gt;
&lt;/menu&gt;
&lt;/menu&gt;</pre>

...
<p>In a supporting user agent, this might look like this:</p>

&lt;input command="save"/&gt; &lt;!- - This will act exactly like the
Save button above, including reflecting
its <code>disabled</code> state dynamically - -&gt;
<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>&lt;form action="redirect.cgi"&gt;
&lt;menu type="commands"&gt;
<pre>&lt;form action="redirect.cgi"&gt;
&lt;menu type="toolbar"&gt;
&lt;label for="goto"&gt;Go to...&lt;/label&gt;
&lt;menu label="Go"&gt;
&lt;select id="goto"
Expand All @@ -40327,45 +40328,12 @@ interface <dfn>DataGridListener</dfn> {
&lt;/menu&gt;
&lt;/form&gt;</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>

<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

-->

<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>


<div class=impl>
Expand Down
80 changes: 25 additions & 55 deletions source
View file
Expand Up @@ -44939,12 +44939,14 @@ interface <dfn>DataGridListener</dfn> {

<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>&lt;menu type="commands"&gt;
<pre>&lt;menu type="toolbar"&gt;
&lt;li&gt;
&lt;menu label="File"&gt;
&lt;button type="button" onclick="fnew()"&gt;New...&lt;/button&gt;
Expand All @@ -44966,23 +44968,24 @@ interface <dfn>DataGridListener</dfn> {
&lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/menu&gt;
&lt;/li&gt;
&lt;/menu&gt;
&lt;/menu&gt;</pre>

...
<p>In a supporting user agent, this might look like this:</p>

&lt;input command="save"/&gt; &lt;!- - This will act exactly like the
Save button above, including reflecting
its <code>disabled</code> state dynamically - -&gt;
<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>&lt;form action="redirect.cgi"&gt;
&lt;menu type="commands"&gt;
<p>The following implements a similar toolbar, with a single button
whose values, when selected, redirect the user to Web sites.</p>

<pre>&lt;form action="redirect.cgi"&gt;
&lt;menu type="toolbar"&gt;
&lt;label for="goto"&gt;Go to...&lt;/label&gt;
&lt;menu label="Go"&gt;
&lt;select id="goto"
Expand All @@ -44998,45 +45001,12 @@ interface <dfn>DataGridListener</dfn> {
&lt;/menu&gt;
&lt;/form&gt;</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>

<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

-->

<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>


<div class="impl">
Expand Down

0 comments on commit 7b1db1a

Please sign in to comment.