jQuery Docking

Invoke the addWindow method of the jqxDocking. Author: http://jqwidgets.com Author: http://jqwidgets.com

by txhi

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<input type="button" id="movebutton" value="Move" />

    <div id="holdWindow">

        <div>
            Held Reports
        </div>
        <div>
            <div id="jqxDocking" style="float: left;">
                <div id="dockPanel1">
                    <div id="window1">
                        <div>Header 1</div>
                        <div>Content 1</div>
                    </div>
                    <div id="window2">
                        <div>Header 2</div>
                        <div>Content 2</div>
                    </div>
                </div>

                <div id="dockPanel2">
                    <div id="window3">
                        <div>Header 3</div>
                        <div>Content 3</div>
                    </div>                    
                </div>
            </div>
        </div>

    </div>

JavaScript

$("#holdWindow").jqxWindow({
    width: 800,
    height: 500,
    modalOpacity: 0.8,
    initContent: function ()
    {
        $("#dockPanel2").append(`<div id="window4"><div>Header 4</div><div>Content 4</div></div>`);
        $("#jqxDocking").jqxDocking({
            width: "100%",
            theme: 'energyblue',
            windowsMode: {
                'window2': 'floating',
                //'window3': 'floating'
            }
        });
        $('#jqxDocking').jqxDocking('setWindowPosition', 'window2', 570, 300);
        $('#window3').jqxWindow("setContent", "stuff<br>more stuff");
        $('#window3').jqxWindow("resizable", true);
        $('#window3').jqxWindow("height", "150px");

        $('#jqxDocking').jqxDocking('addWindow', 'window4', 'default', 0, 1);
        $('#window4').jqxWindow("setContent", "For the fourth time, stuff");
        $('#window4').jqxWindow({ "resizable": true });
        $('#window4').css('zIndex', 99999);


        $("#movebutton").jqxButton({});
        $('#movebutton').on('click', function ()
        {
            $('#jqxDocking').jqxDocking('setWindowPosition', 'window2', 570, 300);
            $('#window2').css('zIndex', 99999);
            $('#jqxDocking').jqxDocking('move', "window4", 0, 1);
        });
    }
});