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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background:#DDD;
font-family: verdana, arial, sans-serif;
font-size:14px;
}
#container {
float:left;
margin-top:100px;
font-family: Tahoma, Arial, sans-serif;
font-size: 10px;
}
</style>
<script type="text/javascript" src="../javascripts/prototype.js"> </script>
<script type="text/javascript" src="../javascripts/effects.js"> </script>
<script type="text/javascript" src="../javascripts/window.js"> </script>
<script type="text/javascript" src="../javascripts/window_effects.js"> </script>
<script type="text/javascript" src="../javascripts/debug.js"> </script>
<link href="../themes/default.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/theme1.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/mac_os_x.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/alphacube.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/darkX.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/spread.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/alert.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/alert_lite.css" rel="stylesheet" type="text/css" > </link>
<title>Sample Windows</title>
</head>
<body>
<div class="dialog_n" id="tmp" style="display:none">toto</div>
The window with rubyonrails.org in it has a close callback to prevent closing. That's why you cannot close it. Check out the code to see how to do it.<br>
Open a <a href="javascript:openConfirmDialog()">confirm dialog</a>,
an <a href="javascript:openAlertDialog()">alert dialog</a>
or an <a href="javascript:openInfoDialog()">info dialog</a> (with alert_lite.css)
<br/>
<a href="javascript:openModalDialog()">Click here to open a modal window</a>
<br/>
<div id="select">
Test select for IE <SELECT NAME="partnumber">
<OPTION VALUE="1"> One
<OPTION VALUE="2"> Two
<OPTION VALUE="3"> Three
<OPTION VALUE="5"> Five
<OPTION VALUE="4"> Oooopppppppps I forgot four
</SELECT>
<br/>
</div>
<a href="javascript:openContentWindow()">Click here to open a window with the div below at the exact same size and position</a>
<br/>
<a href="javascript:Windows.closeAll()">Close all windows</a> (if it's possible)
<div style="clear:both"></div>
<div id="container">
<div style="float:left; width:150px"> </div> <!-- margin -->
<div id="test_content" style="float:left;width:100px; height:150px;background:#DFA; color:#000; font-size:12px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
<script>
var index= 0;
var contentWin = null;
// Debug window
showDebug();
// Window with scrollable text
win = new Window('dialog1', {className: "alphacube", width:300, height:400, zIndex: 100, resizable: true, title: "Not draggable!!", showEffect:Element.show, hideEffect: Effect.SwitchOff, draggable:false})
win.getContent().innerHTML= "<div style='padding:10px'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incom dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. \
At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguon doas nog apoply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar. Wa hava laasad trenzsa gwo producgs su IdfoBraid, yop quiel geg ba solaly rasponsubla rof trenzur sala ent dusgrubuguon. Offoctivo immoriatoly, hawrgaxeeis phat eit sakem eit vory gast te Plok peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon quiel ba trenz Spraadshaag ent trenz dreek wirc procassidt program. Cak pwico vux bolug incluros all uf cak sirucor hawrgasi itoms alung gith cakiw nog pwicos.\
Lor sum amet, commy nulputat. Duipit lum ipisl eros dolortionsed tin hent aliquis illam volor in ea feum in ut adipsustrud elent ulluptat. Duisl ullan ex et am vulputem augiam doloreet amet enibh eui te dipit acillutat acilis amet, suscil er iuscilla con utat, quisis eu feugait ad dolore commy nullam iuscilisl iureril ilisl del ut pratuer iliquis acipissit accum quis nulluptat. Dui bla faccumsan velis auguero con henis duismolor sumsandrem quat vulluptat alit er iniamcore exeriure vero core te dit ut nulla feummolore commod dipis augiamcommod tem ese dolestrud do odo odiamco eetummy nis aliquamcommy nonse eu feugue del eugiamconsed ming estrud magnis exero eumsandio enisim del dio od tat.sumsan et pratum velit ing etue te consequis alis nullan et, quis am iusci bla feummy.</div>"
win.showCenter();
// Windows with an URL as content
win2 = new Window('dialog2', {title: "Ruby on Rails",
bottom:70, left:0, width:300, height:200,
resizable: true, url: "http://www.rubyonrails.com/", showEffectOptions: {duration:3}})
win2.show();
win2.setDestroyOnClose();
win3 = new Window('dialog3', {className: "spread", title: "Not Closable",
top:10, right:20, width:300, height:200,
closable: false, url: "http://www.google.com/", showEffectOptions: {duration:3}})
win3.show();
function openConfirmDialog() {
Dialog.confirm("Test of confirm panel, check out debug window after closing it<br>Test select for IE <SELECT NAME='partnumber'><OPTION VALUE='1'> One<OPTION VALUE='2'> Two<OPTION VALUE='3'> Three<OPTION VALUE='5'> Five<OPTION VALUE='4'> Oooopppppppps I forgot four</SELECT>",
{windowParameters: {width:300, height:100}, okLabel: "close",
cancel:function(win) {debug("cancel confirm panel")},
ok:function(win) {debug("validate confirm panel"); return true}
});
}
function openAlertDialog() {
Dialog.alert("Test of alert panel, check out debug window after closing it",
{windowParameters: {width:300, height:100}, okLabel: "close",
ok:function(win) {debug("validate alert panel"); return true}
});
}
var timeout;
function openInfoDialog() {
Dialog.info("Test of info panel, it will close <br>in 3s ...",
{windowParameters: {className: "alert_lite",width:250, height:100}, showProgress: true});
// timeout=3;
// setTimeout("infoTimeout()", 1000)
Dialog.closeInfo()
}
function infoTimeout() {
timeout--;
if (timeout >0) {
Dialog.setInfoMessage("Test of info panel, it will close <br>in " + timeout + "s ...")
setTimeout("infoTimeout()", 1000)
}
else
Dialog.closeInfo()
}
function openModalDialog() {
debug($('modal_window_content'))
var win = new Window('modal_window', {className: "dialog", title: "Ruby on Rails",top:100, left:100, width:300, height:200, zIndex:150, opacity:1, resizable: true})
//win.getContent().innerHTML = "Hi"
win.setContent("select")
win.setDestroyOnClose();
win.show(true);
}
function openContentWindow() {
if (contentWin != null) {
Dialog.alert("Close the window 'Test' before opening it again!", {windowParameters:{ width:200, height:130}});
}
else {
contentWin = new Window('content_win', {className: "darkX", resizable: false, hideEffect:Element.hide, showEffect:Element.show})
contentWin.setContent('test_content', true, true)
contentWin.toFront();
contentWin.setDestroyOnClose();
contentWin.show();
}
}
// Sample code to see how to implement a closeCallback
function canClose(win) {
debug("You cannot close " + win.getId());
// return false, the window cannot be closed
return false;
}
// Set up a deleagte for win2 (the one with rubyonrails.org in it)
win2.setCloseCallback(canClose);
date=new Date();
date.setMonth(date.getMonth()+3);
win2.setCookie("test", date);
// Set up a windows observer, check ou debug window to get messages
var myObserver = {
onStartMove: function(eventName, win) {
debug(eventName + " on " + win.getId())
},
onEndMove: function(eventName, win) {
debug(eventName + " on " + win.getId())
},
onStartResize: function(eventName, win) {
debug(eventName + " on " + win.getId())
},
onEndResize: function(eventName, win) {
debug(eventName + " on " + win.getId())
},
onClose: function(eventName, win) {
debug(eventName + " on " + win.getId())
},
onDestroy: function(eventName, win) {
if (win == contentWin) {
$('container').appendChild($('test_content'));
contentWin = null;
}
debug(eventName + " on " + win.getId())
}
}
Windows.addObserver(myObserver);
</script>
</body>
</html>
|
