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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Prototype Window Class : Samples</title>
<!-- Prototype Window Class Part -->
<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/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>
<link href="../themes/alphacube.css" rel="stylesheet" type="text/css" > </link>
<link href="../themes/debug.css" rel="stylesheet" type="text/css" > </link>
<!-- Doc Part-->
<script type="text/javascript" src="js/application.js"> </script>
<link href="stylesheets/login.css" rel="stylesheet" type="text/css" > </link>
<link href="stylesheets/style.css" rel="stylesheet" type="text/css" > </link>
<style>
#myDialogId .myButtonClass {
padding:3px;
font-size:20px;
width:100px;
}
#myDialogId .ok_button {
color:#2F2;
}
#myDialogId .cancel_button {
color:#F88;
}
</style>
</head>
<script>
var contentWin;
</script>
<body onload="">
<script>Application.insertNavigation('samples')</script>
<div id="wrapper">
<div id= "content" class="content">
<div id="samples">
Here is a list of sample codes to show different ways to create windows and dialogs. You can view source of each example, even edit it and test your modification immediatly in your browser. Just click again on the link to open a new window/dialog with the modified code. Each window uses a javascript function to get a new id and DO NOT call setDestroyOnClose().<br/>
You can open <a href="#" onclick="showDebug();"> the debug window </a> if you want to see some debug outputs.
<br/><br/><img border=0 src="pwc_os_thumb.png"/><br/><b>Do not forget to check <a href="PWC-OS/index.html">PWC-OS</a></b>
<script>Application.addTitle('Open a simple window', 'open_window1')</script>
<p class="description">
This sample opens a simple window with some parameters like specific hide and show effects. This sample use a wired frame for move/resize.
</p>
<script>Application.addShowButton('open_window1')</script>
<div class="listing" style="display:none" id="open_window1_codediv">
<xmp id="open_window1" class="listing" >
var win = new Window({className: "dialog", width:350, height:400, zIndex: 100, resizable: true, title: "Sample window", showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff, draggable:true, wiredDrag: true})
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.setStatusBar("Status bar info");
win.showCenter();
</xmp>
<script>Application.addEditButton('open_window1')</script>
</div>
<script>Application.addTitle('Open a window with an URL inside', 'open_window2')</script>
<p class="description">
This sample opens a window with RubyOnRails.com site in it. It uses another theme.
</p>
<script>Application.addShowButton('open_window2')</script>
<div class="listing" style="display:none" id="open_window2_codediv">
<xmp id="open_window2" class="listing">
var win = new Window({className: "spread", title: "Ruby on Rails",
top:70, left:100, width:300, height:200,
url: "http://www.rubyonrails.org/", showEffectOptions: {duration:1.5}})
win.show();
</xmp>
<script>Application.addEditButton('open_window2')</script>
</div>
<script>Application.addTitle('Open a window with an existing content inside', 'open_window3')</script>
<p class="description">
<div id="container">
<div id="test_content" style="float:right;width:100px; height:150px;background:#DFA; color:#000; font-size:12px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
This sample opens a window with green div on the right as content. It will keep the same size and position. Close the window to restore the div in the page.<br/>
It also uses a window observer to restore the div after closing the window.
</p>
</div>
<script>Application.addShowButton('open_window3')</script>
<div class="listing" style="display:none" id="open_window3_codediv">
<xmp id="open_window3" class="listing">
if (contentWin != null) {
Dialog.alert("Close the window 'Test' before opening it again!",{width:200, height:130});
}
else {
contentWin = new Window({maximizable: false, resizable: false, hideEffect:Element.hide, showEffect:Element.show, minWidth: 10, destroyOnClose: true})
contentWin.setContent('test_content', true, true)
contentWin.show();
// Set up a windows observer, check ou debug window to get messages
myObserver = {
onDestroy: function(eventName, win) {
if (win == contentWin) {
$('container').appendChild($('test_content'));
contentWin = null;
Windows.removeObserver(this);
}
debug(eventName + " on " + win.getId())
}
}
Windows.addObserver(myObserver);
}
</xmp>
<script>Application.addEditButton('open_window3')</script>
</div>
<script>Application.addTitle('Open an alert dialog', 'open_alert')</script>
<p class="description">
This sample opens a alert dialog with the default alert theme (alert.css). width/height/okLabel are specified and also ok callback function.
</p>
<script>Application.addShowButton('open_alert')</script>
<div class="listing" style="display:none" id="open_alert_codediv">
<xmp id="open_alert" class="listing">
Dialog.alert("Test of alert panel, check out debug window after closing it",
{width:300, height:100, okLabel: "close",
ok:function(win) {debug("validate alert panel"); return true;}});
</xmp>
<script>Application.addEditButton('open_alert')</script>
</div>
<script>Application.addTitle('Open a confirm dialog', 'open_confirm')</script>
<p class="description">
This sample opens a confirm dialog with the default alert theme (alert.css). width/okLabel are specified and also ok/cancel callback function.
Height is not set so the dialog will fit content's height. It also change ok/cancel button class (CSS above).
</p>
<xmp id="button_css"><style>
#myDialogId .myButtonClass {
padding:3px;
font-size:20px;
width:100px;
}
#myDialogId .ok_button {
color:#2F2;
}
#myDialogId .cancel_button {
color:#F88;
}
</style></xmp>
<script>Application.addShowButton('open_confirm')</script>
<div class="listing" style="display:none" id="open_confirm_codediv">
<xmp id="open_confirm">
Dialog.confirm("Test of confirm panel, check out debug window after closing it.",
{width:300, okLabel: "close",
buttonClass: "myButtonClass",
id: "myDialogId",
cancel:function(win) {debug("cancel confirm panel")},
ok:function(win) {debug("validate confirm panel"); return true;}
});
</xmp>
<script>Application.addEditButton('open_confirm')</script>
</div>
<script>Application.addTitle('Open a info dialog', 'open_info')</script>
<p class="description">
This sample opens a info dialog with a progress image. It will be display 3 seconds with a countdown.
</p>
<script>Application.addShowButton('open_info')</script>
<div class="listing" style="display:none" id="open_info_codediv">
<xmp id="open_info">
var timeout;
function openInfoDialog() {
Dialog.info("Test of info panel, it will close <br>in 3s ...",
{width:250, height:100, showProgress: true});
timeout=3;
setTimeout(infoTimeout, 1000)
}
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()
}
openInfoDialog();
</xmp>
<script>Application.addEditButton('open_info')</script>
</div>
<script>Application.addTitle('Open a login window', 'open_login')</script>
<p class="description">
This advanced sample opens a login window with a nice effect if login fails. The window update also its height to display an error message to avoid scrollbars.
The login window design is done in the HTML file with display:none.<br/>
Here is the login HTML code (<a href="stylesheets/login.css">see also login CSS file</a>):
</p>
<xmp><div id="login" style="display:none">
<p><span id='login_error_msg' class="login_error" style="display:none"> </span></p>
<div style="clear:both"></div>
<p><span class="login_label">login</span> <span class="login_input"><input type="text"/></span></p>
<div style="clear:both"></div>
<p><span class="login_label">password</span> <span class="login_input"><input type="password"/></span></p>
<div style="clear:both"></div>
</div></xmp>
</p>
<div id="login" style="display:none">
<p><span id='login_error_msg' class="login_error" style="display:none"> </span></p>
<div style="clear:both"></div>
<p><span class="login_label">login</span> <span class="login_input"><input type="text"/></span></p>
<div style="clear:both"></div>
<p><span class="login_label">password</span> <span class="login_input"><input type="password"/></span></p>
<div style="clear:both"></div>
</div>
<script>Application.addShowButton('open_login')</script>
<div class="listing" style="display:none" id="open_login_codediv">
<xmp id="open_login">
Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400,
okLabel: "login", cancelLabel: "cancel",
onOk:function(win){
$('login_error_msg').innerHTML='Login or password inccorect';
$('login_error_msg').show();
Windows.focusedWindow.updateHeight();
new Effect.Shake(Windows.focusedWindow.getId()); return false;}});
</xmp>
<script>Application.addEditButton('open_login')</script>
</div>
<script>Application.addTitle('Ajax Dialog', 'ajax_dialog')</script>
<p class="description">
Instead of writing HTML in the same page, fill the dialog with an Ajax request. (View the requested file <a href="info_panel.html">info_panel.html</a>, do view source to see HTML content)
</p>
<script>Application.addShowButton('open_ajax_dialog')</script>
<div class="listing" style="display:none" id="open_ajax_dialog_codediv">
<xmp id="ajax_dialog">Dialog.alert({url: "info_panel.html", options: {method: 'get'}},
{className: "alphacube", width:540, okLabel: "Close"});</xmp>
<script>Application.addEditButton('open_ajax_dialog')</script>
</div>
<h2>
9. Samples included in the distrib
</h2>
<ul>
<li><a href="current/samples/constraint.html">Constraint</a>: Constraint move/resize inside a div, insiade a page event by settings top/bottom/left/right margins.</li>
<li><a href="current/samples/multi_modal.html">Multi Modal</a>: Open three modal windows one by one. You can keep them visible or hidden one by one.</li>
<li><a href="current/samples/window_store.html">Window Store add-on</a>: Save in cookies windows location but also open/close status.</li>
<li><a href="current/samples/window_key.html">Window Key add-on</a>: Set a key to close dialog (escape key by default)</li>
<li><a href="current/samples/tooltips/tooltip.html">Tooltip add-on</a>: Use PWC to create tooltips. Tooltips will stay visible if you move your mouse over. You can add forms or links inside. Tooltip content can be HTML, Ajax or an URL.</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">Application.addRightColumn()</script>
</body>
</html>
|
