jQWidgets Forums

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

Tagged: , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    How do I create a full quadrant layout like this? Posts
  • September 14, 2013 at 10:16 pm How do I create a full quadrant layout like this? #28991

    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>
    September 16, 2013 at 6:55 am How do I create a full quadrant layout like this? #29015

    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/

    September 17, 2013 at 3:53 pm How do I create a full quadrant layout like this? #29137

    browserspot
    Participant

    Understood. Thank you, Dimitar!

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

You must be logged in to reply to this topic.