Three-Pane Splitter

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>
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 }] });
three-pane-splitter Online Demo: Three Pane Splitter

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxSplitter and tagged , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

2 Responses to Three-Pane Splitter

  1. venkat says:

    Hi sir,
    I’m new to java script i’m learning ,Can you provide the code for this three pane splitter code

    Thanks in Advance

    Thanks & Regards,

Leave a Reply