DHTML Windowing Toolkit Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DHTML Windowing Toolkit Demo</title>
<link href="styles/dwt.css" rel="stylesheet" type="text/css" />
<style type=text/css>
span.identityName {
vertical-align: middle;
border: 0px solid #808080;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000000;
white-space: nowrap;
overflow-x: hidden;
}
input.updateInterval {
vertical-align: middle;
border: 1px solid #808080;
padding: 1px 3px;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
}
span.submit {
vertical-align: middle;
border: 1px solid #808080;
padding: 1px 3px 1px 3px;
cursor: pointer;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
}
div.messageFormBodyBorder {
border: 1px solid #808080;
padding: 1px 1px 1px 3px;
background-color: Window;
overflow: auto;
}
textarea.messageFormBody {
margin: 0px;
border: 0px solid #808080;
padding: 0px;
width: 100%;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 10pt;
font-weight: normal;
color: #000000;
overflow: auto;
}
input.title {
float: right;
vertical-align: middle;
margin: 2px;
border: 1px solid #808080;
padding: 1px 3px;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
}
span.openButton {
float: right;
vertical-align: middle;
margin: 2px;
border: 1px solid #808080;
padding: 1px 3px 1px 3px;
cursor: pointer;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
}
<!-- WORKAROUND: Internet Explorer textarea width 100% scroll bar bug. -->
textarea.messageFormBody {
width: expression(this.parentNode.offsetWidth - 8);
}
</style>
<script src="scripts/lib/prototype.js" type="text/javascript"></script>
<script src="scripts/lib/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="scripts/dwt.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
/**
* JavaScript example (chat window).
*
* @param name The window title / id.
*
* @return The chat window.
*/
function createChatWindow(name) {
// Frame
var frame = document.createElement(dwt.WindowManager.FRAME.tagName);
frame.setAttribute("id", name);
frame.className = dwt.WindowManager.FRAME.activeClassName;
frame.style.left = "250px";
frame.style.top = "150px";
frame.style.width = "350px";
frame.setAttribute("effect", "Grow");
// Title bar
var titleBar = document.createElement(dwt.WindowManager.TITLE_BAR.tagName);
titleBar.className = dwt.WindowManager.TITLE_BAR.activeClassName;
titleBar.setAttribute("minimizedClass", "dwtMinimizedWindowTitleBar");
titleBar.setAttribute("inactiveMinimizedClass", "dwtInactiveMinimizedWindowTitleBar");
var table = document.createElement("table");
var tbody = document.createElement("tbody");
// Left chrome
var tr = document.createElement("tr");
var td = document.createElement("td");
td.className = dwt.WindowManager.TITLE_BAR_CHROME_LEFT.activeClassName;
var img = document.createElement("img");
img.className = "dwtWindowTitleBarChrome";
img.src = "images/dwt/blank.gif";
td.appendChild(img);
tr.appendChild(td);
// Title bar icon
td = document.createElement("td");
td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
img = document.createElement("img");
img.className = "dwtWindowTitleBarIcon";
img.src = "images/dwt/blank.gif";
td.appendChild(img);
tr.appendChild(td);
// Title bar text
td = document.createElement("td");
td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
td.setAttribute("valign", "center");
var titleBarText = document.createElement(dwt.WindowManager.TITLE_BAR_TEXT.tagName);
titleBarText.className = dwt.WindowManager.TITLE_BAR_TEXT.activeClassName;
titleBarText.appendChild(document.createTextNode(name));
td.appendChild(titleBarText);
tr.appendChild(td);
td = document.createElement("td");
td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
img = document.createElement("img");
img.className = "dwtWindowTitleBarWhitespace";
img.src = "images/dwt/blank.gif";
td.appendChild(img);
tr.appendChild(td);
// Controls (minimize, close)
td = document.createElement("td");
td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName
img = document.createElement("img");
img.className = dwt.WindowManager.TITLE_BAR_CONTROL.activeClassName;
img.src = "images/dwt/minimize.gif";
img.setAttribute("mouseoverSrc", "images/dwt/minimize.mouseover.gif");
img.setAttribute("restoreSrc", "images/dwt/restore.gif");
img.setAttribute("restoreMouseoverSrc", "images/dwt/restore.mouseover.gif");
img.setAttribute("effect", "Fold");
img.setAttribute("restoreEffect", "BlindDown");
img.setAttribute("controlType", "minimize");
td.appendChild(img);
tr.appendChild(td);
td = document.createElement("td");
td.className = dwt.WindowManager.TITLE_BAR_CELL.activeClassName;
img = document.createElement("img");
img.className = "dwtWindowTitleBarControl";
img.src = "images/dwt/close.gif";
img.setAttribute("mouseoverSrc", "images/dwt/close.mouseover.gif");
img.setAttribute("effect", "SwitchOff");
img.setAttribute("controlType", "close");
td.appendChild(img);
tr.appendChild(td);
// Right chrome
td = document.createElement("td");
td.className = dwt.WindowManager.TITLE_BAR_CHROME_RIGHT.activeClassName;
img = document.createElement("img");
img.className = "dwtWindowTitleBarChrome";
img.src = "images/dwt/blank.gif";
td.appendChild(img);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
titleBar.appendChild(table);
frame.appendChild(titleBar);
// Border, contents
border = document.createElement(dwt.WindowManager.BORDER.tagName);
border.className = dwt.WindowManager.BORDER.activeClassName;
contents = document.createElement(dwt.WindowManager.CONTENTS.tagName);
contents.className = dwt.WindowManager.CONTENTS.activeClassName;
contents.style.height = "150px";
border.appendChild(contents);
// Message form (status bar)
messageForm = document.createElement(dwt.WindowManager.STATUS_BAR.tagName);
messageForm.className = dwt.WindowManager.STATUS_BAR.activeClassName;
messageForm.style.borderTopWidth = "2px";
messageForm.style.textAlign = "right";
var div = document.createElement("div");
div.className = "messageFormBodyBorder";
var messageFormBody = document.createElement("textarea");
messageFormBody.className = "messageFormBody";
messageFormBody.setAttribute("rows", "2");
div.appendChild(messageFormBody);
messageForm.appendChild(div);
div = document.createElement("div");
div.style.paddingTop = "5px";
div.style.paddingBottom = "3px";
var submit = document.createElement("span");
submit.className = "submit";
submit.appendChild(document.createTextNode("Send"));
div.appendChild(submit);
messageForm.appendChild(div);
border.appendChild(messageForm);
frame.appendChild(border);
document.body.appendChild(frame);
var chatWindow = new dwt.Window(frame);
// Update the zIndex of the text area's containers.
// This is an attempt to work around Mozilla Bug 167801,
// but it doesn't seem to have any effect :(
chatWindow.setZIndexOnFocus.push(messageForm.parentNode);
chatWindow.setZIndexOnFocus.push(messageForm);
chatWindow.setZIndexOnFocus.push(messageFormBody.parentNode);
chatWindow.setZIndexOnFocus.push(messageFormBody);
dwt.WindowManager.windows[frame.id] = chatWindow;
// Create an open button for this window
var openButton = document.createElement("span");
openButton.className = "openButton";
openButton.dwtWindow = chatWindow;
openButton.appendChild(document.createTextNode("Open " + chatWindow.id));
document.body.appendChild(openButton);
Event.observe(openButton, "click", window.openClick, false);
return chatWindow;
}
function openClick(event) {
var dwtWindow = null;
if (window.event) {
dwtWindow = window.event.srcElement.dwtWindow;
} else if (event) {
dwtWindow = event.target.dwtWindow;
}
if (dwtWindow) {
dwtWindow.open(dwtWindow.effect);
}
}
function onLoad() {
// Allows creation of chat windows with arbitrary titles
var inputTitle = document.createElement("input");
inputTitle.setAttribute("id", "input.title");
inputTitle.setAttribute("type", "text");
inputTitle.className = "title";
document.body.appendChild(inputTitle);
var buttonCreate = document.createElement("span");
buttonCreate.className = "openButton";
buttonCreate.style.backgroundColor = "#ebebe4";
buttonCreate.appendChild(document.createTextNode("Create: "));
document.body.appendChild(buttonCreate);
Event.observe(buttonCreate, "click",
function () {
var inputText = document.getElementById("input.title");
if (inputText && inputText.value && inputText.value != "") {
var chatWindow = window.createChatWindow(inputText.value);
chatWindow.open(chatWindow.effect);
inputText.value = "";
}
},
false);
// Create pager window
var _pager = document.getElementById("pager.window");
var pager = new dwt.Window(_pager);
var inputs = _pager.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
pager.setZIndexOnFocus.push(inputs[i]);
}
pager.open(pager.effect);
// Create open button for pager window
var openButton = document.createElement("span");
openButton.className = "openButton";
openButton.appendChild(document.createTextNode("Open A Really Long Window Title..."));
openButton.dwtWindow = pager;
document.body.appendChild(openButton);
Event.observe(openButton, "click", window.openClick, false);
// Create a chat window
chatWindow = createChatWindow("randomtaskdotorg");
chatWindow.open(chatWindow.effect);
var span = document.createElement("span");
span.appendChild(document.createTextNode("Welcome to the DHTML Windowing Toolkit demo. These windows can be opened, closed, minimized, restored, moved, and resized; with optional script.aculo.us effects. Use the buttons above to open a window after you've closed it, or to dynamically create new windows."));
chatWindow.contents[0].appendChild(span);
}
-->
</script>
</head>
<body onload="onLoad()">
<!-- HTML Example (Pager) -->
<div id="pager.window" class="dwtWindow" effect="Appear" style="left: 5px; top: 5px; width: 190px;">
<div id="pager.window.titleBar" class="dwtWindowTitleBar" minimizedClass="dwtMinimizedWindowTitlebar" inactiveMinimizedClass="dwtInactiveMinimizedWindowTitleBar">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="dwtWindowTitleBarChromeLeft"><img class="dwtWindowTitleBarChrome" src="images/dwt/blank.gif" /></td>
<td class="dwtWindowTitleBar" valign="center"><img class="dwtWindowTitleBarIcon" src="images/dwt/blank.gif" /></td>
<td id="pager.window.titleBar.titleBarText" class="dwtWindowTitleBar"><div class="dwtWindowTitleBarText">This is a Really Long Window Title That Will Need to be Clipped</div></td>
<td class="dwtWindowTitleBar"><img class="dwtWindowTitleBarWhitespace" src="images/dwt/blank.gif" /></td>
<td class="dwtWindowTitleBar"><img class="dwtWindowTitleBarControl" controlType="minimize" effect="Fade" restoreEffect="Appear" src="images/dwt/minimize.gif" mouseoverSrc="images/dwt/minimize.mouseover.gif" restoreSrc="images/dwt/restore.gif" restoreMouseoverSrc="images/dwt/restore.mouseover.gif" /></td>
<td class="dwtWindowTitleBar"><img class="dwtWindowTitleBarControl" controlType="close" effect="DropOut" src="images/dwt/close.gif" mouseoverSrc="images/dwt/close.mouseover.gif" /></td>
<td class="dwtWindowTitleBarChromeRight"><img class="dwtWindowTitleBarChrome" src="images/dwt/blank.gif" /></td>
</tr>
</table>
</div>
<div class="dwtWindowBorder">
<div class="dwtWindowContents" style="height: 200px; background-color: #ebebe4;" nsResizeTarget="true">
<span class="identityName">This is a really long line with nowrap that will require horizontal scrolling.<br />
<br />
This window has multiple vertical resize targets.<br />
Vertically resize me!
</span>
</div>
<div class="dwtWindowStatusBar" style="height: 28px; white-space: normal;" nsResizeTarget="true">
<span class="dwtWindowStatusBarText">Update Interval:</span> <input type="text" id="pager.window.form.timeout" class="updateInterval" size="2" /> <span class="submit">Submit</span>
</div>
<div class="dwtWindowStatusBar" style="height: 28px; white-space: normal;" nsResizeTarget="true">
<span id="pager.window.status" class="dwtWindowStatusBarText"> </span>
</div>
</div>
</div>
</body>
</html>
dwt.zip( 76 k)Related examples in the same category