jQWidgets Forums

Tagged: jqxsplitter, nested, splitter

This topic contains 5 replies, has 2 voices, and was last updated by d_l 12 years, 2 months ago.

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

Author

collapse two outer jqxSplitters bounding centre jqxSplitter Posts

April 1, 2013 at 7:59 pm collapse two outer jqxSplitters bounding centre jqxSplitter #18362

d_l

Member

I’ve been experimenting with v2.8 jqxSplitter and there is one configuration I can’t yet quite work out.

Consider four columns each column containing two splitter panels.

jqxSplitter-1 (horizontal orientation)
panels:
outer-west-top
outer-west-bottom

jqxSplitter-2 (vertical orientation)
panels:
centre-west
centre-east

jqxSplitter-3 (horizontal orientation)
panels:
outer-east-top
outer-east-bottom

Now I can get each of these jqxSplitter instances to work.
But I would like to add another “overlay” of control

where

jqxSplitter-5 (vertical orientation)
panels:
jqxSplitter-1 panel set
jqxSplitter-2 panel set

jqxSplitter-6 (vertical orientation)
panels:
jqxSplitter-1 panel set
jqxSplitter-2 panel set

Ending with three vertical splitterbars and two horizontal splitterbars.

i.e. the centre jqxSplitter-2 remains fixed (with twin panels) but the outer
jqxSplitter-1 and jqxSplitter-3 can collapse and resize.

When either of the outer jqxSplitters collapse or resize the other jqxSplitters should resize to take up the extra width.

All the jqxSplitter demos appear to be at one level.

I can think of one possible approach by php dynamically writing jqxSplitter container div’s on clicking on either outer jqxSplitter div’s but this would require a page reload each time. Is there an easier way?

April 2, 2013 at 2:07 pm collapse two outer jqxSplitters bounding centre jqxSplitter #18420

Dimitar

Participant

Hello d_l,

Please post a code of your initial splitter configuration which we may modify and help you if possible.

Best Regards,
Dimitar

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

April 2, 2013 at 7:20 pm collapse two outer jqxSplitters bounding centre jqxSplitter #18466

d_l

Member

I’ve experimented further since posting my question and I now see how I might use nested jqxSplitters to achieve the layout I want.

I read an adjacent thread which suggested that the jqxSplitter panels have each to be wrapped in a “blank div”. I tried that but it didn’t work. I don’t quite understand the rules or need for adding blank div containers or wrappers.

With trial and error I got to the following trimmed code which does not use blank div’s as wrappers..

Ideally I would like the centre splitterbar to be moved left or right without resizing the outer panels.

I suppose I might achieve this by some jQuery method which captures the positions of the panels before a vertical splitterbar is dragged and then reset outer panes to these positions.

Any other approaches to this issue of just moving centre splitterbar without affecting other splitterbars?

Thanks.

/================= code =======================

“nested vertical and horizontal splitters”

html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

#west-centre-Splitter { background: white; float: left; }
#east-centre-Splitter { background: white; float: left; }

$(document).ready(function () {

$(‘#west-Splitter’).jqxSplitter({
width: ‘20%’,
height: 500,
orientation: ‘horizontal’,
panels: [
{ size: ‘50%’, collapsible: true },
{ size: ‘50%’, collapsible: false }
]
});

$(‘#east-Splitter’).jqxSplitter({
width: ‘20%’,
height: 500,
orientation: ‘horizontal’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

$(‘#west-centre-Splitter’).jqxSplitter({
width: ‘50%’,
height: 500,
orientation: ‘vertical’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

$(‘#east-centre-Splitter’).jqxSplitter({
width: ‘50%’,
height: 500,
orientation: ‘vertical’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

$(‘#total-Splitter’).jqxSplitter({
width: ‘100%’,
height: 500,
orientation: ‘vertical’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

}); // end

west top panel

west bottom panel

centre west panel

centre east panel

east top panel

east bottom panel

April 2, 2013 at 7:23 pm collapse two outer jqxSplitters bounding centre jqxSplitter #18467

d_l

Member

Sorry, I lost the raw code I had posted. Here it is again in block.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="test nested vertical and horizontal splitters" />
    <title id='Description'>"nested vertical and horizontal splitters"
    </title>
 
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-documentation/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxsplitter.js"></script>
<style type="text/css" media="screen">
        
    html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        
    #west-centre-Splitter { background: white; float: left; }
    #east-centre-Splitter { background: white; float: left; }
          
</style>   
<script type="text/javascript">
        $(document).ready(function () {
                            
            $('#west-Splitter').jqxSplitter({
                width: '20%',
                height: 500,
                orientation: 'horizontal',
                panels: [
                         { size: '50%', collapsible: true },
                         { size: '50%', collapsible: false }
                        ]
                });
            $('#east-Splitter').jqxSplitter({
                width: '20%',
                height: 500,
                orientation: 'horizontal',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
            $('#west-centre-Splitter').jqxSplitter({
                width: '50%',
                height: 500,
                orientation: 'vertical',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
                
            $('#east-centre-Splitter').jqxSplitter({
                width: '50%',
                height: 500,
                orientation: 'vertical',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
                 
            $('#total-Splitter').jqxSplitter({
                width: '100%',
                height: 500,
                orientation: 'vertical',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
            
        }); // end
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
    
<div id="total-Splitter">
<div id="west-centre-Splitter">
    <div id="west-Splitter">
        <div>
            <div>west top panel</div>
        </div>
        <div>
            <div>west bottom panel</div>
        </div>
    </div><!-- end of #west-Splitter -->
        <div>
        <div>centre west panel</div>
        </div>
</div><!-- end of #west-centre-Splitter -->
<!-- split between #west-centre-Splitter and #east-centre-Splitter -->
<div id="east-centre-Splitter">
    <div>
        <div>centre east panel</div>
    </div>
    <div id="east-Splitter">
        <div>east top panel</div>
        <div>east bottom panel</div>
    </div>
</div><!-- end of #east-centre-Splitter -->
</div><!-- end of wrapper for #total-Splitter -->
</div><!-- end of wrapper for #jqxWidget -->            
</body>
</html>
.

April 3, 2013 at 12:39 pm collapse two outer jqxSplitters bounding centre jqxSplitter #18506

Dimitar

Participant

Hi d_l,

Here is the solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Nested Splitters with jqxTabs. The sample demonstrates how to
        add the jqxTabs widget inside a Split Panel</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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>
    <style type="text/css" media="screen">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        
        #west-centre-Splitter
        {
            background: white;
            overflow: hidden;
        }
        
        #east-centre-Splitter
        {
            background: white;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#total-Splitter').jqxSplitter({
                width: '100%',
                height: 500,
                orientation: 'vertical',
                panels: [
                         { size: '33%', collapsible: false },
                         { size: '67%', collapsible: true }
                ]
            });
            $('#west-Splitter').jqxSplitter({
                width: '100%',
                height: '100%',
                orientation: 'horizontal',
                panels: [
                                     { size: '50%', collapsible: true },
                                     { size: '50%', collapsible: false }
                ]
            });
            $('#east-centre-Splitter').jqxSplitter({
                width: '100%',
                height: '100%',
                orientation: 'vertical',
                panels: [
                                     { size: '50%', collapsible: false },
                                     { size: '50%', collapsible: true }
                ]
            });
            $('#east-Splitter').jqxSplitter({
                width: '100%',
                height: '100%',
                orientation: 'horizontal',
                panels: [
                                     { size: '50%', collapsible: false },
                                     { size: '50%', collapsible: true }
                ]
            });
            $('#centre-Splitter').jqxSplitter({
                width: '100%',
                height: '100%',
                orientation: 'vertical',
                panels: [
                                     { size: '50%', collapsible: false },
                                     { size: '50%', collapsible: true }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="total-Splitter">
            <div style="overflow: hidden;">
                <div id="west-Splitter">
                    <div style="overflow: hidden;">
                    </div>
                    <div style="overflow: hidden;">
                    </div>
                </div>
            </div>
            <div style="overflow: hidden;">
                <div id="east-centre-Splitter">
                    <div style="overflow: hidden;">
                        <div id="centre-Splitter">
                            <div>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                    <div style="overflow: hidden;">
                        <div id="east-Splitter">
                            <div>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 3, 2013 at 2:03 pm collapse two outer jqxSplitters bounding centre jqxSplitter #18532

d_l

Member

Thanks for that solution.

I see that you’ve changed the symmetry of the jqxSplitters – using three instead of my four. It is close to what I want so I can build on this.

Some tweaks needs:

(1) The centre splitter-vertical-bar works as required (with the other vertical bars not moving).

(2) If either the left or right splitter-vertical-bars are dragged the other splitter-vertical bars should not move.

(3) I changed left panel collapse so that one or both of the centre panels are always visible and the outer panels callapse.

…

I will try adding some jQuery methods to allow left or right vertical bar not to move other vertical bars.

…

One tip for php users .. since it can be tricky adding content into the jqxSplitter divs (particularly if other jqxwidgets are to be nested or embedded) … I am using

<?php include_once ("include-file.inc") ?>

throughout and drawing on a library of snippets (html or javascript) to be included on page load.

Makes it easier to follow the logic.

Author

Posts

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

You must be logged in to reply to this topic.