DHTMLX-Windows

来源：互联网发布：淘宝天猫装修助手编辑：程序博客网时间：2024/06/08 02:10

DHTMLX-Windows

dhtmlxWindows窗口,允许用户使用几个窗户并允许windows重叠,并提供对用户执行标准操作,比如移动/调整窗口大小,发送窗口的前景/背景,最小化/最大化一个窗口,改变窗口位置。

第一个例子

代码

<!DOCTYPE html><html><head>    <title>Minimal init</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>    <link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>    <script src="../../../codebase/dhtmlx.js"></script>    <script>        var dhxWins        function doOnLoad() {            dhxWins = new dhtmlXWindows();            // 创建窗口            dhxWins.attachViewportTo("winVP");        }        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);            // 创建Window            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;        }        function doOnUnload() {            if (dhxWins != null && dhxWins.unload != null) {                dhxWins.unload();                dhxWins = null;            }        }    </script></head><body onload="doOnLoad();" onunload="doOnUnload();">    <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></body></html>