Let’s see how to create a Splitter with 4 columns. The same approach can be used for creating a Splitter with any number of columns.
1. Add the HTML structure to the document’s body. The HTML markup contains a DIV tag with 4 nested DIV tags.
<div id="mainSplitter"> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> <div>Column 4</div></div>
2. Add the necessary JavaScript and CSS files – jqx.base.css, jQuery Framework(jquery-1.7.1.min.js), jQWidgets Framework(jqxcore.js) and the Splitter widget – 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. Select the “mainSplitter” DIV tag and call the jqxSplitter constructor to create the Splitter. In the constructor, we set the splitter’s width and height and also the size of each split panel.
<script type="text/javascript"> $(document).ready(function () { $('#mainSplitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150 }, { size: 150 }, { size: 150}, { size: 150}] }); });</script>
Here’s the result:
