Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[e] (0) Example of context menu, with images
Affected topics: HTML

git-svn-id: http://svn.whatwg.org/webapps@8080 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Jul 23, 2013
1 parent 4cd624f commit 0c8820d
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 4 deletions.
36 changes: 34 additions & 2 deletions complete.html
Expand Up @@ -39125,10 +39125,13 @@ <h6 id=examples><span class=secno>4.8.11.2.22 </span>Examples</h6>
&lt;p class="buttons"&gt;
&lt;input type=button value="Walk" onclick="blueRobot.walk()"&gt;
&lt;input type=button value="Stop" onclick="blueRobot.stop()"&gt;
&lt;p&gt;
&lt;footer&gt;
&lt;small&gt; Blue Robot Player Sprite by &lt;a href="http://johncolburn.deviantart.com/"&gt;JohnColburn&lt;/a&gt;.
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.&lt;/small&gt;
&lt;/p&gt;</pre>
&lt;small&gt; This work is itself licensed under a &lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative
Commons Attribution-ShareAlike 3.0 Unported License&lt;/a&gt;.&lt;/small&gt;
&lt;/footer&gt;
</pre>

</div>

Expand Down Expand Up @@ -57208,6 +57211,28 @@ <h5 id=processing-model-2><span class=secno>4.11.5.2 </span>Processing model</h5

</div>

<div class=example>

<p>In this example, an image of cats is given a context menu with four possible commands:</p>

<pre>&lt;img src="cats.jpeg" alt="Cats" contextmenu=catsmenu&gt;
&lt;menu type="popup" id="catsmenu"&gt;
&lt;menuitem label="Pet the kittens" onclick="kittens.pet()"&gt;
&lt;menuitem label="Cuddle with the kittens" onclick="kittens.cuddle()"&gt;
&lt;menu label="Feed the kittens"&gt;<!-- note: contents of this submenu aren't visible in the pictures below -->
&lt;menuitem label="Fish" onclick="kittens.feed(fish)"&gt;
&lt;menuitem label="Chicken" onclick="kittens.feed(chicken)"&gt;
&lt;/menu&gt;
&lt;/menu&gt;</pre>

<p>When a user of a mouse-operated visual Web browser right-clicks on the image, the browser
might pop up a context menu like this:</p>

<p><img src=http://images.whatwg.org/contextmenu-collapsed.png alt="A context menu, shown over a picture of cats, with four lines: the first two offering the menu items described in the markup above ('Pet the kittens' and 'Cuddle with the kittens'), the third giving a submenu labeled 'Feed the kittens', and the fourth, after a horizontal splitter, consisting of only a downwards-pointing disclosure triangle."><p>When the user clicks the disclosure triangle, such a user agent would expand the context menu
in place, to show the browser's own commands:</p>

<p><img src=http://images.whatwg.org/contextmenu-expanded.png alt="This would result in the same basic interface, but with a longer menu; the disclosure triangle having been replaced by items such as 'View Image', 'Copy Image', 'Copy Image Location', and so forth."></div>


<h5 id=event-definitions-0><span class=secno>4.11.5.3 </span>Event definitions</h5>

Expand Down Expand Up @@ -104400,6 +104425,13 @@ <h2 class=no-num id=references>References</h2><!--REFS-->



<div itemscope="" itemtype=http://n.whatwg.org/work>
<p>The image of two cute kittens in a basket used in the context menu example is based on
<a itemprop=work href=http://www.flickr.com/photos/digidreamgrafix/8370087640/>a photo</a>
by <a itemprop=http://creativecommons.org/ns#attributionURL href=http://www.flickr.com/photos/digidreamgrafix/>Alex G</a>.
(<a itemprop=license href=http://creativecommons.org/licenses/by/2.0/>CC BY 2.0</a>)
</div>

<div itemscope="" itemtype=http://n.whatwg.org/work>
<p>The Blue Robot Player sprite used in the canvas demo is based on
<a itemprop=work href=http://johncolburn.deviantart.com/art/Blue-Robot-Player-Sprite-323813997>a work</a> by
Expand Down
36 changes: 34 additions & 2 deletions index
Expand Up @@ -39125,10 +39125,13 @@ function AddCloud(data, x, y) { ... }</pre>
&lt;p class="buttons"&gt;
&lt;input type=button value="Walk" onclick="blueRobot.walk()"&gt;
&lt;input type=button value="Stop" onclick="blueRobot.stop()"&gt;
&lt;p&gt;
&lt;footer&gt;
&lt;small&gt; Blue Robot Player Sprite by &lt;a href="http://johncolburn.deviantart.com/"&gt;JohnColburn&lt;/a&gt;.
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.&lt;/small&gt;
&lt;/p&gt;</pre>
&lt;small&gt; This work is itself licensed under a &lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative
Commons Attribution-ShareAlike 3.0 Unported License&lt;/a&gt;.&lt;/small&gt;
&lt;/footer&gt;
</pre>

</div>

Expand Down Expand Up @@ -57208,6 +57211,28 @@ fur

</div>

<div class=example>

<p>In this example, an image of cats is given a context menu with four possible commands:</p>

<pre>&lt;img src="cats.jpeg" alt="Cats" contextmenu=catsmenu&gt;
&lt;menu type="popup" id="catsmenu"&gt;
&lt;menuitem label="Pet the kittens" onclick="kittens.pet()"&gt;
&lt;menuitem label="Cuddle with the kittens" onclick="kittens.cuddle()"&gt;
&lt;menu label="Feed the kittens"&gt;<!-- note: contents of this submenu aren't visible in the pictures below -->
&lt;menuitem label="Fish" onclick="kittens.feed(fish)"&gt;
&lt;menuitem label="Chicken" onclick="kittens.feed(chicken)"&gt;
&lt;/menu&gt;
&lt;/menu&gt;</pre>

<p>When a user of a mouse-operated visual Web browser right-clicks on the image, the browser
might pop up a context menu like this:</p>

<p><img src=http://images.whatwg.org/contextmenu-collapsed.png alt="A context menu, shown over a picture of cats, with four lines: the first two offering the menu items described in the markup above ('Pet the kittens' and 'Cuddle with the kittens'), the third giving a submenu labeled 'Feed the kittens', and the fourth, after a horizontal splitter, consisting of only a downwards-pointing disclosure triangle."><p>When the user clicks the disclosure triangle, such a user agent would expand the context menu
in place, to show the browser's own commands:</p>

<p><img src=http://images.whatwg.org/contextmenu-expanded.png alt="This would result in the same basic interface, but with a longer menu; the disclosure triangle having been replaced by items such as 'View Image', 'Copy Image', 'Copy Image Location', and so forth."></div>


<h5 id=event-definitions-0><span class=secno>4.11.5.3 </span>Event definitions</h5>

Expand Down Expand Up @@ -104400,6 +104425,13 @@ if (s = prompt('What is your name?')) {



<div itemscope="" itemtype=http://n.whatwg.org/work>
<p>The image of two cute kittens in a basket used in the context menu example is based on
<a itemprop=work href=http://www.flickr.com/photos/digidreamgrafix/8370087640/>a photo</a>
by <a itemprop=http://creativecommons.org/ns#attributionURL href=http://www.flickr.com/photos/digidreamgrafix/>Alex G</a>.
(<a itemprop=license href=http://creativecommons.org/licenses/by/2.0/>CC BY 2.0</a>)
</div>

<div itemscope="" itemtype=http://n.whatwg.org/work>
<p>The Blue Robot Player sprite used in the canvas demo is based on
<a itemprop=work href=http://johncolburn.deviantart.com/art/Blue-Robot-Player-Sprite-323813997>a work</a> by
Expand Down
33 changes: 33 additions & 0 deletions source
Expand Up @@ -63281,6 +63281,32 @@ fur

</div>

<div class="example">

<p>In this example, an image of cats is given a context menu with four possible commands:</p>

<pre>&lt;img src="cats.jpeg" alt="Cats" contextmenu=catsmenu>
&lt;menu type="popup" id="catsmenu">
&lt;menuitem label="Pet the kittens" onclick="kittens.pet()">
&lt;menuitem label="Cuddle with the kittens" onclick="kittens.cuddle()">
&lt;menu label="Feed the kittens"><!-- note: contents of this submenu aren't visible in the pictures below -->
&lt;menuitem label="Fish" onclick="kittens.feed(fish)">
&lt;menuitem label="Chicken" onclick="kittens.feed(chicken)">
&lt;/menu>
&lt;/menu></pre>

<p>When a user of a mouse-operated visual Web browser right-clicks on the image, the browser
might pop up a context menu like this:</p>

<p><img src="images/contextmenu-collapsed.png" alt="A context menu, shown over a picture of cats, with four lines: the first two offering the menu items described in the markup above ('Pet the kittens' and 'Cuddle with the kittens'), the third giving a submenu labeled 'Feed the kittens', and the fourth, after a horizontal splitter, consisting of only a downwards-pointing disclosure triangle.">

<p>When the user clicks the disclosure triangle, such a user agent would expand the context menu
in place, to show the browser's own commands:</p>

<p><img src="images/contextmenu-expanded.png" alt="This would result in the same basic interface, but with a longer menu; the disclosure triangle having been replaced by items such as 'View Image', 'Copy Image', 'Copy Image Location', and so forth.">

</div>


<h5>Event definitions</h5>

Expand Down Expand Up @@ -116990,6 +117016,13 @@ if (s = prompt('What is your name?')) {

<!--START dev-html-->

<div itemscope itemtype="http://n.whatwg.org/work">
<p>The image of two cute kittens in a basket used in the context menu example is based on
<a itemprop="work" href="http://www.flickr.com/photos/digidreamgrafix/8370087640/">a photo</a>
by <a itemprop="http://creativecommons.org/ns#attributionURL" href="http://www.flickr.com/photos/digidreamgrafix/">Alex G</a>.
(<a itemprop="license" href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)
</div>

<div itemscope itemtype="http://n.whatwg.org/work">
<p>The Blue Robot Player sprite used in the canvas demo is based on
<a itemprop="work" href="http://johncolburn.deviantart.com/art/Blue-Robot-Player-Sprite-323813997">a work</a> by
Expand Down

0 comments on commit 0c8820d

Please sign in to comment.