jQuery UI Widgets Forums Layouts Splitter How do I create a full quadrant layout like this?

This topic contains 2 replies, has 2 voices, and was last updated by  browserspot 6 years, 10 months ago.

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

  • browserspot
    Participant

    This question is similar to the following:

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm#demos/jqxsplitter/nested-side-splitters.htm

    However, I would like to make all panels equally resizable like the following image:
    http://imgur.com/41txLR2

    This is the code for the original “Nested Side Splitters”:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>This sample illustrates how to create a Splitter with Nested
    Side Splitters</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" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    $('#splitContainer').jqxSplitter({ height: 600, width: 600, orientation: 'vertical', theme: theme, panels: [{ size: '50%' }, { size: '50%'}] });
    $('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', theme: theme, panels: [{ size: '50%' }, { size: '50%'}] });
    $('#rightSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal', theme: theme, panels: [{ size: '50%' }, { size: '50%'}] });
    });
    </script>
    </head>
    <body class='default'>
    <div id="splitContainer">
    <div>
    <div id="leftSplitter">
    <div>
    West - North
    </div>
    <div>
    West - South
    </div>
    </div>
    </div>
    <div>
    <div id="rightSplitter">
    <div>
    East - North
    </div>
    <div>
    East - South
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Dimitar
    Participant

    Hello browserspot,

    Unfortunately, such layout cannot be achieved with jqxSplitter. It would be possible if the vertical splitbars are merged into one.

    Best Regards,
    Dimitar

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


    browserspot
    Participant

    Understood. Thank you, Dimitar!

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

You must be logged in to reply to this topic.