jQuery UI Widgets Forums Layouts Splitter How do I achieve the following two layouts?

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
  • How do I achieve the following two layouts? #28989

    browserspot
    Participant

    1. One large panel on right (width: 50%, height:100%), 3 small panels on left (height: 33% each, width:50% each)

    http://imgur.com/ODU9sPL

    ***********************************************
    I tried the following code, but it is not working…

    I want to create the following two layouts:
    1. 3 panels on left and one panel on right
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <title id='Description'>This demonstration shows how to trigger the jqxSplitter events.
    </title>
    <link rel="stylesheet" href="css/jqx.base.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jqxcore.js"></script>
    <script type="text/javascript" src="javascripts/jqxsplitter.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: 150 }, { size: 450}] });
    $('#leftSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '36%' }, { size: '32%'}, { size: '32%'}] });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="container">
    <div id="mainSplitter">
    <div>
    <div style="border: none;" id="leftSplitter">
    <div>Top-Left Panel</div>
    <div>Center-Left Panel</div>
    <div>Bottom-Left Panel</div>
    </div>
    </div>
    <div>Right Panel</div>
    </div>
    </div>
    </div>
    </body>
    </html>

    and the following:
    2. One large panel on top (height:50%, width: 100%), and three small ones (width:33% each, height:50% each) at the bottom:

    http://imgur.com/9bIx8eW

    I tried the following code, but it is not working:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title></title>
    <link rel="stylesheet" href="css/jqx.base.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jqxcore.js"></script>
    <script type="text/javascript" src="javascripts/jqxsplitter.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $('#splitContainer').jqxSplitter({ height: 600, width: 600, orientation: 'horizontal',panels: [{ size: '20%' }, { size: '80%'}] });
    $('#nestedSplitter').jqxSplitter({ orientation: 'vertical',height: '100%', width: '100%', panels: [{ size: '30%' }, { size: '60%'}, {size: '30%'}] });
    });
    </script>
    </head>
    <body class='default'>
    <div id="splitContainer">
    <div>
    North
    </div>
    <div>
    <div id="nestedSplitter">
    <div>
    West
    </div>
    <div>
    Center
    </div>
    <div>
    East
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    • This topic was modified 6 years, 10 months ago by  browserspot.
    How do I achieve the following two layouts? #29017

    Dimitar
    Participant

    Hello browserspot,

    Here is the first layout:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <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: 600, height: 500, panels: [{ size: "50%" }, { size: "50%"}] });
    $('#leftSplitter').jqxSplitter({ height: '100%', orientation: 'horizontal', panels: [{ size: "33%" }, { size: "66%"}] });
    $('#bottomLeftSplitter').jqxSplitter({ orientation: 'horizontal', panels: [{ size: "50%" }, { size: "50%"}] });
    });
    </script>
    </head>
    <body class='default'>
    <div id="mainSplitter">
    <div style="overflow: hidden;">
    <div id="leftSplitter">
    <div>
    Top-Left Panel</div>
    <div style="overflow: hidden;">
    <div id="bottomLeftSplitter">
    <div>
    Center-Left Panel</div>
    <div>
    Bottom-Left Panel</div>
    </div>
    </div>
    </div>
    </div>
    <div>
    Right Panel</div>
    </div>
    </body>
    </html>

    And here is the second one:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <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: 600, height: 500, orientation: "horizontal", panels: [{ size: "50%" }, { size: "50%"}] });
    $('#bottomSplitter').jqxSplitter({ height: '100%', orientation: 'vertical', panels: [{ size: "33%" }, { size: "66%"}] });
    $('#rightBottomSplitter').jqxSplitter({ orientation: 'vertical', panels: [{ size: "50%" }, { size: "50%"}] });
    });
    </script>
    </head>
    <body class='default'>
    <div id="mainSplitter">
    <div>
    Top Panel</div>
    <div style="overflow: hidden;">
    <div id="bottomSplitter">
    <div>
    Left-Bottom Panel</div>
    <div style="overflow: hidden;">
    <div id="rightBottomSplitter">
    <div>
    Center-Bottom Panel</div>
    <div>
    Right-Bottom Panel</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How do I achieve the following two layouts? #29138

    browserspot
    Participant

    Thank you, Dimitar! You are awesome!

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

You must be logged in to reply to this topic.