[e] (0) Add examples of <command>.

git-svn-id: http://svn.whatwg.org/webapps@4159 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Oct 18, 2009 · 06984fe · 06984fe
1 parent b09460f
commit 06984fe
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 3 deletions.
diff --git a/complete.html b/complete.html
@@ -42344,7 +42344,7 @@ <h4 id=the-command><span class=secno>4.11.2 </span>The <dfn><code>command</code>
   <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three
   keywords and states. The "<dfn id=attr-command-type-keyword-command title=attr-command-type-keyword-command><code>command</code></dfn>"
   keyword maps to the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state, the
-  <dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
+  "<dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
   keyword maps to the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state, and
   the "<dfn id=attr-command-type-keyword-radio title=attr-command-type-keyword-radio><code>radio</code></dfn>"
   keyword maps to the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state. The
@@ -42484,7 +42484,27 @@ <h4 id=the-command><span class=secno>4.11.2 </span>The <dfn><code>command</code>
   <p class=note><code><a href=#the-command>command</a></code> elements are not rendered
   unless they <a href=#menus title=menu>form part of a menu</a>.</p>
 
+  <div class=example>
+
+   <p>Here is an example of a toolbar with three buttons that let the
+   user toggle between left, center, and right alignment. One could
+   imagine such a toolbar as part of a text editor. The toolbar also
+   has a separator followed by another button labeled "Publish",
+   though that button is disabled.</p>
+
+   <pre>&lt;menu type="toolbar"&gt;
+ &lt;command type="radio" radiogroup="alignment" checked="checked"
+          label="Left" icon="icons/alL.png" onclick="setAlign('left')"&gt;
+ &lt;command type="radio" radiogroup="alignment"
+          label="Center" icon="icons/alC.png" onclick="setAlign('center')"&gt;
+ &lt;command type="radio" radiogroup="alignment"
+          label="Right" icon="icons/alR.png" onclick="setAlign('right')"&gt;
+ &lt;hr&gt;
+ &lt;command type="command" disabled
+          label="Publish" icon="icons/pub.png" onclick="publish()"&gt;
+&lt;/menu&gt;</pre>
 
+  </div>
 
 
 
@@ -42628,6 +42648,7 @@ <h5 id=menus-intro><span class=secno>4.11.3.1 </span>Introduction</h5>
   children.</p>
 
 
+
   <div class=impl>
 
   <h5 id=building-menus-and-toolbars><span class=secno>4.11.3.2 </span><dfn>Building menus and toolbars</dfn></h5>
@@ -42779,6 +42800,25 @@ <h5 id=context-menus><span class=secno>4.11.3.3 </span><dfn>Context menus</dfn><
 
   </div>
 
+  <div class=example>
+
+   <p>Here is an example of a context menu for an input control:</p>
+
+   <pre>&lt;form name="npc"&gt;
+ &lt;label&gt;Character name: &lt;input name=char type=text contextmenu=namemenu required&gt;&lt;/label&gt;
+ &lt;menu type=context id=namemenu&gt;
+  &lt;command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"&gt;
+  &lt;command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"&gt;
+ &lt;/menu&gt;
+&lt;/form&gt;</pre>
+
+   <p>This adds to items to the control's context menu, one called
+   "Pick random name", and one called "Prefill other fields based on
+   name". They invoke scripts that are not shown in the example
+   above.</p>
+
+  </div>
+
 
 
   <div class=impl>

diff --git a/index b/index
@@ -42173,7 +42173,7 @@ interface <dfn>DataGridListener</dfn> {
   <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three
   keywords and states. The "<dfn id=attr-command-type-keyword-command title=attr-command-type-keyword-command><code>command</code></dfn>"
   keyword maps to the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state, the
-  <dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
+  "<dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
   keyword maps to the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state, and
   the "<dfn id=attr-command-type-keyword-radio title=attr-command-type-keyword-radio><code>radio</code></dfn>"
   keyword maps to the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state. The
@@ -42313,7 +42313,27 @@ interface <dfn>DataGridListener</dfn> {
   <p class=note><code><a href=#the-command>command</a></code> elements are not rendered
   unless they <a href=#menus title=menu>form part of a menu</a>.</p>
 
+  <div class=example>
+
+   <p>Here is an example of a toolbar with three buttons that let the
+   user toggle between left, center, and right alignment. One could
+   imagine such a toolbar as part of a text editor. The toolbar also
+   has a separator followed by another button labeled "Publish",
+   though that button is disabled.</p>
+
+   <pre>&lt;menu type="toolbar"&gt;
+ &lt;command type="radio" radiogroup="alignment" checked="checked"
+          label="Left" icon="icons/alL.png" onclick="setAlign('left')"&gt;
+ &lt;command type="radio" radiogroup="alignment"
+          label="Center" icon="icons/alC.png" onclick="setAlign('center')"&gt;
+ &lt;command type="radio" radiogroup="alignment"
+          label="Right" icon="icons/alR.png" onclick="setAlign('right')"&gt;
+ &lt;hr&gt;
+ &lt;command type="command" disabled
+          label="Publish" icon="icons/pub.png" onclick="publish()"&gt;
+&lt;/menu&gt;</pre>
 
+  </div>
 
 
 
@@ -42457,6 +42477,7 @@ interface <dfn>DataGridListener</dfn> {
   children.</p>
 
 
+
   <div class=impl>
 
   <h5 id=building-menus-and-toolbars><span class=secno>4.11.3.2 </span><dfn>Building menus and toolbars</dfn></h5>
@@ -42608,6 +42629,25 @@ interface <dfn>DataGridListener</dfn> {
 
   </div>
 
+  <div class=example>
+
+   <p>Here is an example of a context menu for an input control:</p>
+
+   <pre>&lt;form name="npc"&gt;
+ &lt;label&gt;Character name: &lt;input name=char type=text contextmenu=namemenu required&gt;&lt;/label&gt;
+ &lt;menu type=context id=namemenu&gt;
+  &lt;command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"&gt;
+  &lt;command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"&gt;
+ &lt;/menu&gt;
+&lt;/form&gt;</pre>
+
+   <p>This adds to items to the control's context menu, one called
+   "Pick random name", and one called "Prefill other fields based on
+   name". They invoke scripts that are not shown in the example
+   above.</p>
+
+  </div>
+
 
 
   <div class=impl>

diff --git a/source b/source
@@ -47011,7 +47011,7 @@ interface <dfn>DataGridListener</dfn> {
   title="attr-command-type-keyword-command"><code>command</code></dfn>"
   keyword maps to the <span
   title="attr-command-type-state-command">Command</span> state, the
-  <dfn
+  "<dfn
   title="attr-command-type-keyword-checkbox"><code>checkbox</code></dfn>"
   keyword maps to the <span
   title="attr-command-type-state-checkbox">Checkbox</span> state, and
@@ -47187,7 +47187,27 @@ interface <dfn>DataGridListener</dfn> {
   <p class="note"><code>command</code> elements are not rendered
   unless they <span title="menu">form part of a menu</span>.</p>
 
+  <div class="example">
+
+   <p>Here is an example of a toolbar with three buttons that let the
+   user toggle between left, center, and right alignment. One could
+   imagine such a toolbar as part of a text editor. The toolbar also
+   has a separator followed by another button labeled "Publish",
+   though that button is disabled.</p>
 
+   <pre>&lt;menu type="toolbar">
+ &lt;command type="radio" radiogroup="alignment" checked="checked"
+          label="Left" icon="icons/alL.png" onclick="setAlign('left')">
+ &lt;command type="radio" radiogroup="alignment"
+          label="Center" icon="icons/alC.png" onclick="setAlign('center')">
+ &lt;command type="radio" radiogroup="alignment"
+          label="Right" icon="icons/alR.png" onclick="setAlign('right')">
+ &lt;hr>
+ &lt;command type="command" disabled
+          label="Publish" icon="icons/pub.png" onclick="publish()">
+&lt;/menu></pre>
+
+  </div>
 
 
 
@@ -47346,6 +47366,7 @@ interface <dfn>DataGridListener</dfn> {
   children.</p>
 
 
+
   <div class="impl">
 
   <h5><dfn>Building menus and toolbars</dfn></h5>
@@ -47519,6 +47540,25 @@ interface <dfn>DataGridListener</dfn> {
 
   </div>
 
+  <div class="example">
+
+   <p>Here is an example of a context menu for an input control:</p>
+
+   <pre>&lt;form name="npc">
+ &lt;label>Character name: &lt;input name=char type=text contextmenu=namemenu required>&lt;/label>
+ &lt;menu type=context id=namemenu>
+  &lt;command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
+  &lt;command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
+ &lt;/menu>
+&lt;/form></pre>
+
+   <p>This adds to items to the control's context menu, one called
+   "Pick random name", and one called "Prefill other fields based on
+   name". They invoke scripts that are not shown in the example
+   above.</p>
+
+  </div>
+
 
 
   <div class="impl">