jQWidgets Forums

Tagged: 3x2, Angular splitter, jquery splitter, jqxsplitter, layout, split bar, splitter

This topic contains 5 replies, has 2 voices, and was last updated by nkuznetsov 9 years, 8 months ago.

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

Author

3×2 Splitter All-way Resizing Posts

July 30, 2015 at 3:40 pm 3×2 Splitter All-way Resizing #74324

nkuznetsov

Participant

Hi,

I need some advice on my 3×2 splitter. Here is my current layout:

http://postimg.org/image/rco9xg3cz/

I need it resizeable all-way. Currently all 3 of my horizontal splitters are present and work well. I’m having trouble with the 2 vertical splitters. I’ve implemented the one that divides top and middle section but not sure how to do that for the middle and bottom section. Here is my splitter code:

HTML (window numbering goes from left to right, top to bottom):


<div id="splitterHorizontalTop">
		<div>
			<div id="splitterTop">
				<div id="window0"></div>
				<div id="window1"></div>
			</div>
		</div>
		<div>
			<div id="splitterCenter">
				<div id="window2"></div>
				<div id="window3"></div>
			</div>
		</div>
	</div>
	<div id="splitterBottom">
		<div id="window4"></div>
		<div id="window5"></div>
	</div>
</div>

I basically wrapped top and middle section in a vertical splitter.

Here is my js (typescript):

// Horizontal splitter for the 2 top sections
        $('#splitterHorizontalTop').jqxSplitter(
            {
                width: '100%',
                height: some height,
                orientation: 'horizontal',
                panels: [{ size: some size }, { size: some size }]
            });

        // Top section
        $('#splitterTop').jqxSplitter(
            {
                width: '100%',
                height: '100%',
                panels: [{ size: some size }, { size: some size }]
            });

        // Middle section
        $('#splitterCenter').jqxSplitter(
            {
                width: '100%',
                height: '100%',
                panels: [{ size: some size }, { size: some size }]
            });

        // Bottom section
        $('#splitterBottom').jqxSplitter(
            {
                width: '100%',
                height: some height,
                panels: [{ size: some size }, { size: some size }]
            });

Thanks!

July 30, 2015 at 3:43 pm 3×2 Splitter All-way Resizing #74326

nkuznetsov

Participant

Nevermind. I figured I can simply wrap the top+middle sections and bottom section in a vertical splitter in similar fashion as I am wrapping top and middle. Was wondering if there’s cleaner way of doing that though.

July 30, 2015 at 4:06 pm 3×2 Splitter All-way Resizing #74327

nkuznetsov

Participant

Actually, I tried that approach, and it doesn’t work very well when using horizontal splitters. Still looking for something cleaner.

July 31, 2015 at 7:00 am 3×2 Splitter All-way Resizing #74352

Dimitar

Participant

Hi nkuznetsov,

There are several possible approaches, but I think you may find this one useful:

<!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#mainSplitter").jqxSplitter({ width: 1000, height: 600, panels: [{ size: '200px' }, { size: '400px'}], orientation: 'horizontal' });
            $("#upperSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '500px' }, { size: '500px'}], orientation: 'vertical' });
            $("#lowerSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '200px' }, { size: '200px'}], orientation: 'horizontal' });
            $("#middleSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '500px' }, { size: '500px'}], orientation: 'vertical' });
            $("#bottomSplitter").jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '500px' }, { size: '500px'}], orientation: 'vertical' });
        });
    </script>
</head>
<body>
    <div id='mainSplitter'>
        <div>
            <div id="upperSplitter">
                <div>
                    <span>Panel 1</span></div>
                <div>
                    <span>Panel 2</span></div>
            </div>
        </div>
        <div>
            <div id="lowerSplitter">
                <div>
                    <div id="middleSplitter">
                        <div>
                            <span>Panel 3</span></div>
                        <div>
                            <span>Panel 4</span></div>
                    </div>
                </div>
                <div>
                    <div id="bottomSplitter">
                        <div>
                            <span>Panel 5</span></div>
                        <div>
                            <span>Panel 6</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

July 31, 2015 at 2:56 pm 3×2 Splitter All-way Resizing #74379

nkuznetsov

Participant

Thanks, will try this out and let know how it went.

August 6, 2015 at 6:36 pm 3×2 Splitter All-way Resizing #74588

nkuznetsov

Participant

This approach works, thank you.

Author

Posts

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

You must be logged in to reply to this topic.