Blogs

In this post, we will show you how to create a simple three pane splitter. 1. Create the HTML structure for the Splitters. The jqxSplitter widget requires at least 3 DIV tags – 1 container DIV and 2 nested DIV tags for the split panels. That’s why, we create a DIV tag with id=’mainSplitter’ and we add inside it two additional DIV tags. The first DIV tag represents the splitter’s left panel. The second DIV tag is the right panel. We want to horizontally split the DIV tags inside the second panel.

<div id="mainSplitter">
	<div>Left Panel</div>
	<div id="rightSplitter">
		<div>Top-Right Panel</div>
		<div>Bottom-Right Panel</div>
	</div>
</div>

2. Add the required JavaScript and CSS files – jQuery Framework(jquery-1.7.1.min.js), jQWidgets CSS stylesheet(jqx.base.css), jQWidgets Framework(jqxcore.js) and the Splitter(jqxsplitter.js).

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>

3. Initialize the Splitters by using the jqxSplitter constructor. In order to initialize a splitter, we need to select its DIV tag and call the jqxSplitter constructor. The initialization process includes settings the splitter’s ‘width’, ‘height’ and additional properties regarding its panels like ‘size’, or the optional ‘min’ and ‘max’ properties that specify the panels minimum and maximum size. To split the panels horizontally, we set the ‘orientation’ property to ‘horizontal’.

$('#mainSplitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150 }, { size: 450 }] });
$('#rightSplitter').jqxSplitter({ width: 450, height: '100%', orientation: 'horizontal', panels: [{ size: 400, collapsible: false }, { size: 100 }] });

Online Demo: Three Pane Splitter