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().
You can open
the debug window if you want to see
some debug outputs.
Do not forget to check PWC-OS
This sample opens a simple window with
some parameters like specific hide and show effects. This sample
use a wired frame for move/resize.
<![CDATA[ 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(); ]]>
This sample opens a window with
RubyOnRails.com site in it. It uses another theme.
<![CDATA[ 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(); ]]>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
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.
It also uses a window observer
to restore the div after closing the window.
<![CDATA[ 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); } ]]>
This sample opens a alert dialog with the
default alert theme (alert.css). width/height/okLabel are specified
and also ok callback function.
<![CDATA[ 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;}}); ]]>
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).
<![CDATA[
<style>
#myDialogId .myButtonClass {
padding: 3px;
font-size: 20px;
width: 100px;
}
#myDialogId .ok_button {
color: #2F2;
}
#myDialogId .cancel_button {
color: #F88;
}
</style>
]]>
<![CDATA[ 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;} });
]]>
This sample opens a info dialog with a
progress image. It will be display 3 seconds with a countdown.
<![CDATA[ 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();
]]>
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.
Here is the login HTML code (see also login CSS file):
<![CDATA[
<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>
]]>
<![CDATA[ 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;}}); ]]>
Instead of writing HTML in the same page, fill the dialog with an
Ajax request. (View the requested file info_panel.html,
do view source to see HTML content)
<![CDATA[Dialog.alert({url: "info_panel.html",
options: {method: 'get'}}, {className: "alphacube", width:540,
okLabel: "Close"});]]>
9. Samples included in the distrib
- Constraint:
Constraint move/resize inside a div, insiade a page event by
settings top/bottom/left/right margins.
- Multi Modal:
Open three modal windows one by one. You can keep them visible or
hidden one by one.
- Window
Store add-on: Save in cookies windows location but also open/close
status.
- Window Key
add-on: Set a key to close dialog (escape key by default)
- Tooltip
add-on: 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.