Create a HTML file called NestedSplitters.html that contains the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.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>
<script type="text/javascript">
$(document).ready(function () {
var theme = 'classic';
$('#mainSplitter').jqxSplitter({ theme: theme, width: '500px', height: '500px', orientation: 'horizontal', panels: [{ size: '150px' }, { size: '350px'}] });
$('#firstNested').jqxSplitter({ theme: theme, orientation: 'vertical', panels: [{ size: '125px' }, { size: '250px' }, { size: '125px'}] });
});
</script>
</head>
<body class='default'>
<div id="mainSplitter">
<div>
<span>North</span>
</div>
<div id="firstNested">
<div>
<span>West</span>
</div>
<div>
<span>Center</span>
</div>
<div>
<span>East</span>
</div>
</div>
</div>
</body>
</html>
In the Head section of the page, we include the jQuery javascript file, the jQWidgets core framework file – jqxcore.js, the main jqxSplitter plug-in file – jqxsplitter.js file, the base jQWidgets stylesheet – jqx.base.css and the classic theme’s stylesheet – jqx.classic.css.
Now let’s look at the HTML structure:
<div id="mainSplitter">
<div>
<span>North</span>
</div>
<div id="firstNested">
<div>
<span>West</span>
</div>
<div>
<span>Center</span>
</div>
<div>
<span>East</span>
</div>
</div>
</div>
The first DIV tag represents the main Splitter. It has two panels. The first panel contains the text “North” and the second one contains another Splitter with three panels.
In the code below, we create the two Splitters and initialize them by calling the jqxSplitter constructor. In the initialization, we set the width, height, theme and splitter’s orientation properties.
$(document).ready(function () {
var theme = 'classic';
$('#mainSplitter').jqxSplitter({ theme: theme, width: '500px', height: '500px', orientation: 'horizontal', panels: [{ size: '150px' }, { size: '350px'}] });
$('#firstNested').jqxSplitter({ theme: theme, orientation: 'vertical', panels: [{ size: '125px' }, { size: '250px' }, { size: '125px'}] });
});
