OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <!-- | 3 <!-- |
4 Copyright (c) 2011 The Chromium Authors. All rights reserved. | 4 Copyright (c) 2011 The Chromium Authors. All rights reserved. |
5 Use of this source code is governed by a BSD-style license that can be | 5 Use of this source code is governed by a BSD-style license that can be |
6 found in the LICENSE file. | 6 found in the LICENSE file. |
7 --> | 7 --> |
8 <head> | 8 <head> |
9 <title>Mouse Lock Example</title> | 9 <title>Mouse Lock Example</title> |
10 <style type="text/css"> | |
11 :-webkit-full-screen { | |
12 width: 100%; | |
13 height: 100%; | |
14 } | |
15 </style> | |
16 <script> | |
17 var fullscreen = false; | |
18 function ToggleFullscreen() { | |
19 if (fullscreen) { | |
20 document.webkitCancelFullScreen(); | |
21 } else { | |
22 document.getElementById('container').webkitRequestFullScreen( | |
23 Element.ALLOW_KEYBOARD_INPUT); | |
24 } | |
25 fullscreen = !fullscreen; | |
26 } | |
27 </script> | |
10 </head> | 28 </head> |
11 | |
12 <body title="This tooltip should not be shown if the mouse is locked."> | 29 <body title="This tooltip should not be shown if the mouse is locked."> |
13 <ul> | 30 <div id="container"> |
14 <li>Lock mouse: left click in either of the two boxes; or right click in | 31 <ul> |
15 either of the boxes to ensure that it is focused and then press Enter key. | 32 <li>There are two different kinds of fullscreen mode - "tab fullscreen" and |
16 </li> | 33 "browser fullscreen". |
17 <li>Unlock mouse: lose focus, press Esc key, or right click.</li> | 34 <ul> |
18 </ul> | 35 <li>"tab fullscreen" refers to when a tab enters fullscreen mode via the |
19 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | 36 JS or Pepper fullscreen API;</li> |
20 width="300" height="300" border="2px"></object> | 37 <li>"browser fullscreen" refers to the user putting the browser itself |
21 <div></div> | 38 into fullscreen mode from the UI (e.g., pressing F11).</li> |
22 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | 39 </ul> |
23 width="300" height="300" border="2px"></object> | 40 <span style="font-weight:bold"> |
41 NOTE: Mouse lock is only allowed in "tab fullscreen" mode. | |
42 </span> | |
43 </li> | |
44 <li>Lock mouse: | |
45 <ul> | |
46 <li>left click in either of the two boxes; or</li> | |
47 <li>right click in either of the boxes to ensure that it is focused and | |
48 then press Enter key. (You could verify that the tooltip window is | |
49 dismissed properly by this second approach.)</li> | |
50 </ul> | |
51 </li> | |
52 <li>Unlock mouse: | |
53 <ul> | |
54 <li>lose focus; or</li> | |
55 <li>press Esc key; or</li> | |
56 <li>right click; or</li> | |
scheib
2011/09/28 22:48:32
Consider for this change, or a future one: I sugge
yzshen1
2011/09/29 20:41:04
I would like to have a way to exit by mouse click,
| |
57 <li>exit from the "tab fullscreen" mode.</li> | |
58 </ul> | |
59 </li> | |
60 </ul> | |
61 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | |
62 width="300" height="300" border="2px"></object> | |
63 <div></div> | |
64 <object id="plugin" type="application/x-ppapi-example-mouse-lock" | |
65 width="300" height="300" border="2px"></object> | |
66 <div> | |
67 <button id="toggle_fullscreen" onclick="ToggleFullscreen();"> | |
68 Toggle Tab Fullscreen | |
69 </button> | |
70 </div> | |
71 </div> | |
24 </body> | 72 </body> |
25 </html> | 73 </html> |
OLD | NEW |