[html5] r8080 - [e] (0) Example of context menu, with images Affected topics: HTML
whatwg at whatwg.org
whatwg at whatwg.org
Tue Jul 23 15:45:57 PDT 2013
Author: ianh
Date: 2013-07-23 15:45:55 -0700 (Tue, 23 Jul 2013)
New Revision: 8080
Modified:
complete.html
index
source
Log:
[e] (0) Example of context menu, with images
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2013-07-23 19:53:00 UTC (rev 8079)
+++ complete.html 2013-07-23 22:45:55 UTC (rev 8080)
@@ -39125,10 +39125,13 @@
<p class="buttons">
<input type=button value="Walk" onclick="blueRobot.walk()">
<input type=button value="Stop" onclick="blueRobot.stop()">
-<p>
+<footer>
<small> Blue Robot Player Sprite by <a href="http://johncolburn.deviantart.com/">JohnColburn</a>.
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</small>
-</p></pre>
+ <small> This work is itself licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative
+ Commons Attribution-ShareAlike 3.0 Unported License</a>.</small>
+</footer>
+</pre>
</div>
@@ -57208,7 +57211,29 @@
</div>
+ <div class=example>
+ <p>In this example, an image of cats is given a context menu with four possible commands:</p>
+
+ <pre><img src="cats.jpeg" alt="Cats" contextmenu=catsmenu>
+<menu type="popup" id="catsmenu">
+ <menuitem label="Pet the kittens" onclick="kittens.pet()">
+ <menuitem label="Cuddle with the kittens" onclick="kittens.cuddle()">
+ <menu label="Feed the kittens"><!-- note: contents of this submenu aren't visible in the pictures below -->
+ <menuitem label="Fish" onclick="kittens.feed(fish)">
+ <menuitem label="Chicken" onclick="kittens.feed(chicken)">
+ </menu>
+</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=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>
<pre class=idl>[Constructor(DOMString type, optional <a href=#relatedeventinit>RelatedEventInit</a> eventInitDict)]
@@ -104401,6 +104426,13 @@
<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
<a itemprop=http://creativecommons.org/ns#attributionURL href=http://johncolburn.deviantart.com/>JohnColburn</a>.
Modified: index
===================================================================
--- index 2013-07-23 19:53:00 UTC (rev 8079)
+++ index 2013-07-23 22:45:55 UTC (rev 8080)
@@ -39125,10 +39125,13 @@
<p class="buttons">
<input type=button value="Walk" onclick="blueRobot.walk()">
<input type=button value="Stop" onclick="blueRobot.stop()">
-<p>
+<footer>
<small> Blue Robot Player Sprite by <a href="http://johncolburn.deviantart.com/">JohnColburn</a>.
Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</small>
-</p></pre>
+ <small> This work is itself licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative
+ Commons Attribution-ShareAlike 3.0 Unported License</a>.</small>
+</footer>
+</pre>
</div>
@@ -57208,7 +57211,29 @@
</div>
+ <div class=example>
+ <p>In this example, an image of cats is given a context menu with four possible commands:</p>
+
+ <pre><img src="cats.jpeg" alt="Cats" contextmenu=catsmenu>
+<menu type="popup" id="catsmenu">
+ <menuitem label="Pet the kittens" onclick="kittens.pet()">
+ <menuitem label="Cuddle with the kittens" onclick="kittens.cuddle()">
+ <menu label="Feed the kittens"><!-- note: contents of this submenu aren't visible in the pictures below -->
+ <menuitem label="Fish" onclick="kittens.feed(fish)">
+ <menuitem label="Chicken" onclick="kittens.feed(chicken)">
+ </menu>
+</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=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>
<pre class=idl>[Constructor(DOMString type, optional <a href=#relatedeventinit>RelatedEventInit</a> eventInitDict)]
@@ -104401,6 +104426,13 @@
<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
<a itemprop=http://creativecommons.org/ns#attributionURL href=http://johncolburn.deviantart.com/>JohnColburn</a>.
Modified: source
===================================================================
--- source 2013-07-23 19:53:00 UTC (rev 8079)
+++ source 2013-07-23 22:45:55 UTC (rev 8080)
@@ -63281,7 +63281,33 @@
</div>
+ <div class="example">
+ <p>In this example, an image of cats is given a context menu with four possible commands:</p>
+
+ <pre><img src="cats.jpeg" alt="Cats" contextmenu=catsmenu>
+<menu type="popup" id="catsmenu">
+ <menuitem label="Pet the kittens" onclick="kittens.pet()">
+ <menuitem label="Cuddle with the kittens" onclick="kittens.cuddle()">
+ <menu label="Feed the kittens"><!-- note: contents of this submenu aren't visible in the pictures below -->
+ <menuitem label="Fish" onclick="kittens.feed(fish)">
+ <menuitem label="Chicken" onclick="kittens.feed(chicken)">
+ </menu>
+</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>
<pre class="idl">[Constructor(DOMString type, optional <span>RelatedEventInit</span> eventInitDict)]
@@ -116991,6 +117017,13 @@
<!--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
<a itemprop="http://creativecommons.org/ns#attributionURL" href="http://johncolburn.deviantart.com/">JohnColburn</a>.
More information about the Commit-Watchers
mailing list