Andreas Hocevar
153 lines
4.6 KiB
HTML
153 lines
4.6 KiB
HTML
<!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);
|
|
});
|
|
|
|
var currDialog;
|
|
|
|
function showDialog(dialog) {
|
|
currDialog = dialog;
|
|
dialog.setVisible(true);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|