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.