blob: 8e9831b9fd6fb50a130887c5f99bbd265d139ef0 (
plain)
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
|
<!DOCTYPE html>
<html>
<!--
Copyright 2008 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>ScrollFloater</title>
<script src="../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.ui.ScrollFloater');
goog.require('goog.ui.ToggleButton');
</script>
<link rel="stylesheet" href="../css/button.css">
<style>
table {
border: 1px solid black;
width: 100%;
height: 1500px;
}
#left-cell {
color: black;
background-color: lightgray;
width: 50%;
vertical-align: top;
}
#right-cell {
background-color: lightblue;
width: 50%;
vertical-align: top;
}
.spacer {
border: 1px solid black;
height: 200px;
}
.goog-scrollfloater {
border: 1px solid black;
height: 150px;
width: 90%;
color: yellow;
background-color: blue;
}
</style>
</head>
<body>
<form action="javascript:void(0)">
<table style="border: 1px solid black">
<tr>
<td id="left-cell">
<div class="spacer">
This content does not float.
</div>
<div class="spacer">
This content does not float.
</div>
<div id="floater1">
</div>
</td>
<td id="right-cell">
<div class="spacer">
This content does not float.
</div>
<div id="floater2container">
</div>
</td>
</tr>
</table>
<p>This is the bottom of the page.</p>
</form>
<script>
var parentForm = document.getElementsByTagName('form')[0];
var scrollfloater1 = new goog.ui.ScrollFloater();
var button1 = new goog.ui.ToggleButton("Enable Floater 1");
button1.render(goog.dom.getElement('floater1'));
scrollfloater1.decorate(goog.dom.getElement('floater1'));
var scrollfloater2 = new goog.ui.ScrollFloater();
var button2 = new goog.ui.ToggleButton("Enable Floater 2");
scrollfloater2.addChild(button2, true);
scrollfloater2.render(goog.dom.getElement('floater2container'));
function setupClickHandler(ctrl, floater) {
goog.events.listen(ctrl, goog.ui.Component.EventType.ACTION,
function() {
floater.setScrollingEnabled(ctrl.isChecked());
});
}
button1.setState(goog.ui.Component.State.CHECKED, true);
button2.setState(goog.ui.Component.State.CHECKED, true);
setupClickHandler(button1, scrollfloater1);
setupClickHandler(button2, scrollfloater2);
</script>
</body>
</html>
|
