jQuery UI Widgets Forums Layouts Splitter Building Layout with splitter

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Building Layout with splitter #28246

    mesken
    Participant

    Hi Team,

    Please can you help me build a layout with your splitter having 5 parts : Left – Right – Top – Bottom – Centre that fills the whole page and is used as the application layout. This example is not included in your demos and I have not been able to build it alone.

    Thanks for your support

    Building Layout with splitter #28261

    Peter Stoev
    Keymaster

    Hi mesken,

    Please, find below a sample with jqxSplitter with Nested Splitters. Hope that is what you are looking for.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>This page demonstrates how to create three-pane layout using jqxSplitter. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '25%' }, { size: '75%' }] });
    $('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'vertical', panels: [{ size: '50%', collapsible: false }, { size: '50%' }] });
    $('#centerSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%', collapsible: false }, { size: '50%' }] });
    $('#centerTop').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', panels: [{ size: '50%', collapsible: false }, { size: '50%' }] });
    });
    </script>
    <style type="text/css">
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id="mainSplitter">
    <div>
    Left Panel</div>
    <div>
    <div id="rightSplitter">
    <div>
    <div id="centerSplitter"><div><div id="centerTop"><div>Top</div><div>Center</div></div></div><div>Bottom</div></div>
    </div>
    <div>
    Right Panel</div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.