jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Docking › Save windows location

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Minko 13 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Save windows location Posts
  • May 7, 2012 at 12:39 pm Save windows location #3947

    Stephen
    Member

    How to create an event after the window is moved. Example: I move a window and when in place, an alert () is enabled.

    So I wonder if it’s possible to know the location of windows in the section.

    Before moving:

    window1 (1)
    Window2 (2)
    window3 (3)

    After moving:

    window1 (1)
    window3 (2)
    Window2 (3)

    Thank you for the help

    Stephen

    May 7, 2012 at 1:14 pm Save windows location #3950

    Minko
    Blocked

    Hello Stephen,

    the method displayWindowsPositions in the code below shows the positions of all windows in their parent section:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#docking').jqxDocking({ theme: 'classic', orientation: 'horizontal', width: 310, mode: 'default' });
                $('#docking').jqxDocking('hideAllCloseButtons');
                function displayWindowsPositions(window) {
                    var parent = $('#' + window).parent(),
                        windows = parent.children('.jqx-window'),
                        current;
                    $('#data').empty();
                    for (var position = 0; position < windows.length; position += 1) {
                        current = windows[position];
                        $('#data').append(
                            '<div>' + $(current).find('.jqx-window-header').text() + '</div>'
                        );
                        if ($(window).attr('id') === window) {
                            return position;
                        }
                    }
                }
                $('#docking').bind('dragEnd', function (event) {
                    displayWindowsPositions(event.args.window);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="docking" style="float: left;">
            <div>
                <div id="window0" style="height: 150px">
                    <div>
                        CISC</div>
                    <div>
                        Before the RISC philosophy became prominent, many computer architects tried to bridge
                        the so called semantic gap, i.e. to design instruction sets that directly supported
                        high-level programming constructs such as procedure calls, loop control, and complex...</div>
                </div>
                <div id="window1" style="height: 150px">
                    <div>
                        Database management system</div>
                    <div>
                        A database management system (DBMS) is a software package with computer programs
                        that control the creation, maintenance, and the use of a database. It allows organizations
                        to conveniently develop databases...</div>
                </div>
                <div id="window2" style="height: 150px">
                    <div>
                        RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs around 1975 include the
                        observations that the memory-restricted compilers of the time were often unable
                        to take advantage...</div>
                </div>
            </div>
        </div>
        <div id="data" style="border-width: 0px; float: left;
            margin-left: 30px;">
        </div>
    </body>
    </html>

    Best regards,
    Minko

    jQWidgets Team
    http://jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.