DHTMLX Docs & Samples Explorer

Minimal Init

Input Position (x,y)
Input Size (width, height)
Input Header Text
Source
<link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxwindows.js"></script>
 
<script src="../../codebase/dhtmlxcontainer.js"></script>
 
<div>
<table>
    <tr>
        <td>Input Position (x,y)</td>
        <td><input id="win_x" type="text" style="width: 30px;" value="20"> <input id="win_y" type="text" style="width: 30px;" value="30"></td>
    </tr>
    <tr>
        <td>Input Size (width, height)</td>
        <td><input id="win_w" type="text" style="width: 30px;" value="320"> <input id="win_h" type="text" style="width: 30px;" value="200"></td>
    </tr>
    <tr>
        <td>Input Header Text</td>
        <td><input id="win_t" type="text" style="width: 150px;" value="New dhtmlxWindow"></td>
    </tr>
    <tr>
        <td colspan="2" align="center" style="padding-top: 10px;"><input type="button" value="Create Window" onclick="createWindow();"></td>
    </tr>
</table>
</div>
<div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;"></div>
<script>
var dhxWins;
function doOnLoad() {
    dhxWins = new dhtmlXWindows();
    dhxWins.enableAutoViewport(false);
    dhxWins.attachViewportTo("winVP");
    dhxWins.setImagePath("../../codebase/imgs/");
}
var idPrefix = 1;
function createWindow() {
    var p = 0;
    dhxWins.forEachWindow(function() {
        p++;
    });
    if (p > 5) {
        alert("Too many windows");
        return;
    }
    var id = "userWin" + (idPrefix++);
    //;
    var w = Number(document.getElementById("win_w").value);
    var h = Number(document.getElementById("win_h").value);
    var x = Number(document.getElementById("win_x").value);
    var y = Number(document.getElementById("win_y").value);
    //;
    dhxWins.createWindow(id, x, y, w, h);
    dhxWins.window(id).setText(document.getElementById("win_t").value);
    // dhxWins.window(id).keepInViewport(true);
    //;
    document.getElementById("win_x").value = x + 8;
    document.getElementById("win_y").value = y + 6;
}
</script>