1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery Fullscreen Plugin demo</title>
<script type="text/javascript" src="file:///usr/share/javascript/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.fullscreen-min.js"></script>
<script type="text/javascript">
$(function() {
$(".fullscreen-supported").toggle($(document).fullScreen() != null);
$(".fullscreen-not-supported").toggle($(document).fullScreen() == null);
$(document).bind("fullscreenchange", function(e) {
console.log("Full screen changed.");
$("#status").text($(document).fullScreen() ?
"Full screen enabled" : "Full screen disabled");
});
$(document).bind("fullscreenerror", function(e) {
console.log("Full screen error.");
$("#status").text("Browser won't enter full screen mode for some reason.");
});
});
</script>
</head>
<body style="background:white">
<h1>jQuery Fullscreen Plugin demo</h1>
<form action="test.php" id="form">
<input type="text"></input>
<input type="submit" />
</form>
<div id="buttons">
<button onclick="$(document).fullScreen(true)">Enter Fullscreen mode (Document)</button>
<button onclick="$('#form').fullScreen(true)">Enter Fullscreen mode
(Form)</button>
<button onclick="$('#buttons').fullScreen(true)">Enter Fullscreen mode (Button panel)</button><br />
<button onclick="$(document).fullScreen(false)">Exit Fullscreen mode</button><br />
<button onclick="$(document).toggleFullScreen()">Toggle Fullscreen mode (Document)</button><br />
<button onclick="alert($(document).fullScreen())">Query Fullscreen mode</button>
</div>
<iframe src="iframe.html" width="512" height="100" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
<p class="fullscreen-supported">
Browser supports fullscreen mode.
</p>
<p class="fullscreen-not-supported">
Browser does not support fullscreen mode.
</p>
<p id="status"></p>
</body>
</html>
|
