jQWidgets Forums

Tagged: jqxsplitter, layout, splitter

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 achieve the following two layouts? Posts

September 14, 2013 at 8:51 pm 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>

September 16, 2013 at 7:10 am 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/

September 17, 2013 at 3:54 pm How do I achieve the following two layouts? #29138

browserspot

Participant

Thank you, Dimitar! You are awesome!

Author

Posts

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

You must be logged in to reply to this topic.