DHTMLX-Windows

DHTMLX-Windows


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

DHTMLX-Windows_第1张图片

第一个例子

代码


<html>
<head>
    <title>Minimal inittitle>
    <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 Texttd>
                <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>

效果

DHTMLX-Windows_第2张图片

皮肤

DHX除默认的皮肤样式之外还另外提供的3种可选皮肤。

分别为:dhx_web; dhx_terrace; dhx_skyblue;

设置方法:myWins.setSkin(String skin);

效果:

DHTMLX-Windows_第3张图片

DHTMLX-Windows_第4张图片

DHTMLX-Windows_第5张图片

在Windows中添加Form

DHTMLX-Windows_第6张图片
效果:
DHTMLX-Windows_第7张图片

未完待续!!!。。。。。。。

你可能感兴趣的:(【DHTMLX】)