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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>goog.ui.Dialog</title>
<script src="../base.js"></script>
<script>
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.ui.Dialog');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/dialog.css">
<style>
.modal-dialog {
width: 430px;
}
</style>
</head>
<body>
<h1>goog.ui.Dialog</h1>
<div><input id="openOnKeyDown" type="checkbox">
<label>Enable open on keydown</label>
<span>(use "Space" to open dialog with no Iframe, "Enter" to open with Iframe
mask</span>
</div>
<div><input id="swapModalOnShift" type="checkbox">
<label>Enable modal change with shift when the dialog is open</label>
</div>
<button onclick="showDialog(dialog1);">
Open Dialog (no Iframe)</button>
<br>
<button onclick="showDialog(dialog2);">
Open Dialog (w/ Iframe mask)
</button>
<fieldset style="margin-top: 2em;">
<legend>A sample web page</legend>
<h2>
A World Beyond AJAX: Accessing Google's APIs from Flash and
Non-JavaScript Environments
</h2>
<cite>Vadim Spivak (Google)</cite>
<p>
AJAX isn't the only way to access Google APIs. Learn how to use Google's
services from Flash and other non-JavaScript programming environments.
We'll show you how easy it is to augment your site with dynamic search
and feed data from non-JavaScript environments.
</p>
<p>
Participants should be familiar with general web application
development.
</p>
<p>Select Element:
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</p>
<p>
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/7fbz8WOec1g&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/7fbz8WOec1g&hl=en&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="344"></embed>
</object>
</p>
</fieldset>
<script>
goog.events.listen(document, goog.events.EventType.KEYDOWN, function(e) {
var code = e.keyCode;
if (goog.dom.getElement('openOnKeyDown').checked) {
switch (code) {
case goog.events.KeyCodes.MAC_ENTER:
case goog.events.KeyCodes.ENTER:
showDialog(dialog1);
break;
case goog.events.KeyCodes.SPACE:
showDialog(dialog2);
break;
default:
// no-op
}
}
if (goog.dom.getElement('swapModalOnShift').checked) {
switch (code) {
case goog.events.KeyCodes.SHIFT:
if (currDialog && currDialog.isVisible()) {
currDialog.setModal(!currDialog.getModal());
}
break;
default:
// no-op
}
}
});
var dialog1 = new goog.ui.Dialog();
dialog1.setContent('<img src="http://images.icanhascheezburger.com/' +
'completestore/2009/3/25/128825075025577352.jpg" ' +
'width="400" height="255"><br>' +
'Lorem ipsum dolor sit amet, consectetuer' +
'adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula ' +
'mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa ' +
'lacinia lorem, in fermentum purus ligula quis nunc. Duis porttitor ' +
'euismod risus. Nam hendrerit lacus vehicula augue. Duis ante.');
dialog1.setTitle('My favorite LOLCat');
dialog1.setButtonSet(goog.ui.Dialog.ButtonSet.CONTINUE_SAVE_CANCEL);
goog.events.listen(dialog1, goog.ui.Dialog.EventType.SELECT, function(e) {
alert('You chose: ' + e.key);
});
var dialog2 = new goog.ui.Dialog(null, true);
dialog2.setContent('Some windowed elements leak through standard divs so ' +
'we add an iframe to mask the nasties.');
dialog2.setTitle('I have an Iframe mask :)');
dialog2.setButtonSet(goog.ui.Dialog.ButtonSet.YES_NO_CANCEL);
goog.events.listen(dialog2, goog.ui.Dialog.EventType.SELECT, function(e) {
alert('You chose: ' + e.key);
});
goog.events.listen(window, 'unload', function() {
goog.events.removeAll();
});
var currDialog;
function showDialog(dialog) {
currDialog = dialog;
dialog.setVisible(true);
}
</script>
</body>
</html>
|
