Andreas Hocevar
251 lines
7.5 KiB
HTML
251 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2007 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.
|
|
-->
|
|
<!--
|
|
|
|
File for testing bubble control.
|
|
-->
|
|
<head>
|
|
<title>goog.ui.Bubble</title>
|
|
<script src="../base.js"></script>
|
|
<script>
|
|
if (typeof goog == 'undefined') {
|
|
alert('Closure failed to load');
|
|
} else {
|
|
goog.require('goog.ui.Bubble');
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<link rel="stylesheet" href="../css/bubble.css">
|
|
</head>
|
|
<body bgcolor="green">
|
|
<h1>goog.ui.Bubble</h1>
|
|
<table width="100%" align="center">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div align="left">
|
|
<form>
|
|
<input type="text" id="textField1"/>
|
|
<input type="button" id="button1" value="Click for a bubble!!!"
|
|
onclick="clickButton(button1, textField1);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div align="center">
|
|
<form>
|
|
<input type="text" id="textField2"/>
|
|
<input type="button" id="button2" value="Click for a bubble!!!"
|
|
onclick="clickButton(button2, textField2);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div align="right">
|
|
<form>
|
|
<input type="text" id="textField3"/>
|
|
<input type="button" id="button3" value="Click for a bubble!!!"
|
|
onclick="clickButton(button3, textField3);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr height>
|
|
<td>
|
|
<div align="left">
|
|
<form>
|
|
<input type="text" id="textField4"/>
|
|
<input type="button" id="button4" value="Click for a bubble!!!"
|
|
onclick="clickButton(button4, textField4);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<br>
|
|
<div align="left">
|
|
<form>
|
|
<table>
|
|
<tbody>
|
|
<tr><td>X:</td>
|
|
<td><input type="text" id="xcoord" value="100"/></td>
|
|
</tr>
|
|
<tr><td>Y:</td>
|
|
<td><input type="text" id="ycoord" value="100"/></td>
|
|
</tr>
|
|
<tr><td>Corner orientation(0-3):</td>
|
|
<td><input type="text" id="corner" value="1"/></td>
|
|
</tr>
|
|
<tr><td>Auto-hide (true or false):</td>
|
|
<td><input type="text" id="autoHide" value="false"/></td>
|
|
</tr>
|
|
<tr><td>Timeout (ms):</td>
|
|
<td><input type="text" id="timeout" value="0"/></td>
|
|
<tr><td>Decorated</td>
|
|
<td><input type="checkbox" id="decorated"/></td>
|
|
<tr><td><input type="button" id="button5.0.0"
|
|
value="Click for a custom bubble!!!"
|
|
onclick=
|
|
"doCustom(xcoord, ycoord, corner, autoHide, timeout, decorated);"/>
|
|
</td><td><input type="button" id="button5.0.1"
|
|
value="Toggle custom button!"
|
|
onclick="toggleVisibility();"/>
|
|
</td>
|
|
</tr>
|
|
<tr><td><input type="button" id="button5.1"
|
|
value="Click for a random bubble!!!"
|
|
onclick="doRandom();"/>
|
|
</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
<br>
|
|
</td>
|
|
<td>
|
|
<div align="right">
|
|
<form>
|
|
<input type="text" id="textField6"/>
|
|
<input type="button" id="button6" value="Click for a bubble!!!"
|
|
onclick="clickButton(button6, textField6);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td height="30%">
|
|
<div align="left">
|
|
<form>
|
|
<input type="text" id="textField7"/>
|
|
<input type="button" id="button7" value="Click for a bubble!!!"
|
|
onclick="clickButton(button7, textField7);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div align="center">
|
|
<form>
|
|
<input type="text" id="textField8"/>
|
|
<input type="button" id="button8" value="Click for a bubble!!!"
|
|
onclick="clickButton(button8, textField8);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div align="right">
|
|
<form>
|
|
<input type="text" id="textField9"/>
|
|
<input type="button" id="button9" value="Click for a bubble!!!"
|
|
onclick="clickButton(button9, textField9);"/>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<script>
|
|
|
|
var defaultTimeout = 10000;
|
|
var bubble = null;
|
|
function clickButton(anchor, textField) {
|
|
if (bubble) {
|
|
bubble.dispose();
|
|
bubble = null;
|
|
}
|
|
var textString = textField.value;
|
|
if (!textString) {
|
|
textString = 'Input here!';
|
|
anchor = textField;
|
|
}
|
|
|
|
bubble = new goog.ui.Bubble(textString);
|
|
bubble.setAutoHide(false);
|
|
bubble.setPosition(new goog.positioning.AnchoredPosition(anchor, null));
|
|
bubble.setTimeout(defaultTimeout);
|
|
bubble.render();
|
|
bubble.attach(anchor);
|
|
bubble.setVisible(true);
|
|
}
|
|
|
|
var decorated = false;
|
|
var bubbleC = null;
|
|
function doCustom(xcoord, ycoord, corner, autoHide, timeout, decorated) {
|
|
if (bubbleC) {
|
|
bubbleC.dispose();
|
|
bubbleC = null;
|
|
}
|
|
if (parseInt(xcoord.value) == NaN ||
|
|
parseInt(ycoord.value) == NaN ||
|
|
parseInt(corner.value) == NaN ||
|
|
parseInt(timeout.value) == NaN ||
|
|
(autoHide.value != "true" && autoHide.value != "false") ||
|
|
(corner.value < 0 || corner.value > 3)) {
|
|
alert('Incorrect input!');
|
|
return;
|
|
}
|
|
var internalElement = null;
|
|
if (decorated.checked) {
|
|
internalElement = goog.dom.createElement('div');
|
|
internalElement.innerHTML = '<table><tbody>' +
|
|
'<tr><td>One!</td><td>Two!</td></tr>' +
|
|
'<tr><td>Three!</td><td>Four!</td></tr>' +
|
|
'</tbody></table>';
|
|
} else {
|
|
internalElement = 'Random Bubble. La-la-la-la! La-la-la-la-la!!!';
|
|
}
|
|
bubbleC = new goog.ui.Bubble(internalElement);
|
|
bubbleC.setAutoHide(autoHide.value == "false" ? false : true);
|
|
bubbleC.setPinnedCorner(parseInt(corner.value));
|
|
bubbleC.setPosition(new goog.positioning.AbsolutePosition(
|
|
parseInt(xcoord.value), parseInt(ycoord.value)));
|
|
bubbleC.setTimeout(parseInt(timeout.value));
|
|
|
|
bubbleC.render();
|
|
bubbleC.setVisible(true);
|
|
}
|
|
|
|
function toggleVisibility () {
|
|
if (bubbleC) {
|
|
bubbleC.setVisible(!bubbleC.isVisible());
|
|
}
|
|
}
|
|
|
|
var timer = null;
|
|
function doRandom() {
|
|
if (timer) {
|
|
window.clearInterval(timer);
|
|
timer = null;
|
|
return;
|
|
}
|
|
doRandomClick();
|
|
timer = window.setInterval(doRandomClick, 2000);
|
|
}
|
|
|
|
function doRandomClick() {
|
|
for ( ; ; ) {
|
|
var number=Math.floor(Math.random()*9) + 1;
|
|
if (number != 5) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
var button = document.getElementById("button" + number);
|
|
if (button) {
|
|
var defaultTimeoutSav = defaultTimeout;
|
|
defaultTimeout = 2000;
|
|
button.click ();
|
|
defaultTimeout = defaultTimeoutSav;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|