jQuery Docking

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

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxWidget'>
    <div id="docking">
        <div style="overflow: hidden;">
            <div id="window0" style="height: 100px">
                <div>Header 1</div>
                <div>Content 1</div>
            </div>
            <div id="window1" style="height: 100px">
                <div>Header 2</div>
                <div>Content 2</div>
            </div>
        </div>
        <div style="overflow: hidden;">
            <div id="window2" style="height: 100px; ">
                <div>Header 3</div>
                <div>Content 3</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>
</div>

JavaScript

$('#docking').jqxDocking({
        theme: 'classic',
        orientation: 'horizontal',
        width: 250,
        mode: 'default'
    });
  $("#exportButton").jqxButton({});
    $('#exportButton').click(function () {
        $('#exportOutput').val($('#docking').jqxDocking('exportLayout'));
    });