jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Docking › Detecting open and collapse events

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  dpdragnev 11 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Detecting open and collapse events Posts
  • June 26, 2013 at 7:06 pm Detecting open and collapse events #23931

    dpdragnev
    Member

    Hi,

    Is there a way to detect when the user collapses or expands a window?

    In the API there are only 2 events: dragStart and dragEnd. I would like to be able to save the layout when the user expands or collapses a window not only when dragging.

    Thank you

    Daniel

    June 26, 2013 at 8:29 pm Detecting open and collapse events #23950

    Peter Stoev
    Keymaster

    Hi,

    You can bind and use the jqxWindow’s ‘expand’ and ‘collapse’ Events.

    Example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this demo, the jqxDocking layout is exported to JSON string by using the exportLayout method.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.web.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.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 () {
                $("#window3").on('expand', function () {
                    alert('expanded');
                });
                $("#window3").on('collapse', function () {
                    alert('collapsed');
                });
                $('#docking').jqxDocking({ theme: 'classic', mode: 'docked', orientation: 'horizontal', width: 300 });
                $('#docking').jqxDocking('showAllCollapseButtons');
                $('#docking').jqxDocking('hideAllCloseButtons');
                $('#exportButton').click(function () {
                    $('#exportOutput').val($('#docking').jqxDocking('exportLayout'));
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="docking">
                <div>
                    <div id="window3" style="height: 120px;">
                        <div>Title</div>
                        <div>Content</div>
                    </div>
                    <div id="window1" style="height: 300px;">
                        <div>Title</div>
                        <div>Content</div>
                    </div>
                    <div id="window2" style="height: 220px;">
                        <div>Title</div>
                        <div>Content</div>
                    </div>
                    <div id="window5" style="height: 255px;">
                       <div>Title</div>
                        <div>Content</div>
                     </div>
                    <div id="window4" style="height: 120px;">
                        <div>Title</div>
                        <div>Content</div>
                    </div>
                </div>
            </div>
            <div>
                <br /><br />
                <input type="button" value="Export layout" id="exportButton" /><br />
                <textarea id="exportOutput" rows="20" cols="40"></textarea>
            </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    June 27, 2013 at 6:10 pm Detecting open and collapse events #24039

    dpdragnev
    Member

    Thank you Peter. That was exactly what I was looking for.

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

You must be logged in to reply to this topic.