Documentation

Getting Started

jqxSplitter represents a widget consisting of a moveable split bar(s) that divides a container's display area into two or more resizable and collapsible panels.
Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the JavaScript files and CSS dependencies to your project. The jqxSplitter widget requires the following files:


The next step is to create html element within the body of the html document.

The last step is to initialize the widget by adding the following script to the html document:

To call a function (method), you need to pass the method name and parameters (if any) in the jqxSplitter's constructor.
To get the result of a function after calling it, you can use the following syntax:
To set a property (option), you need to pass the property name and value(s) in the jqxSplitter's constructor.
To get a property (option), you need to pass the property name to the jqxSplitter's constructor.
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to get the selected value after the user change the current one. The example code below demonstrates how to bind to the ‘resize’ event of jqxSplitter.

Basic Splitter Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>jQuery Splitter Sample</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.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 async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<div id='content'>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#jqxSplitter").jqxSplitter({ theme: 'summer', panels: [{ size: '100px' }] });
      });
  </script>  
    <div id='jqxSplitter' style="width:300px; height: 150px; background-color: #FFFFAF">
        <div style="background-color: #97FFAF"></div>
        <div style="background-color: #E8C0AF"></div>
   </div>
</div>
</body>
</html>

The result of the above code is:

Change event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates splitter's events" />
    <title id='Description'>This demonstration shows how to trigger the jqxSplitter events.
    </title>
    <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/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: 600, height: 480,  panels: [{ size: 200}] });
            $('#mainSplitter').on('resize', function (event) {
                displayEvent(event);
            });
            $('#mainSplitter').on('expanded', function (event) {
                displayEvent(event);
            });
            $('#mainSplitter').on('collapsed', function (event) {
                displayEvent(event);
            });
            function capitaliseFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }
            function displayEvent(event) {
                var eventData = "Event:" + capitaliseFirstLetter(event.type);
                eventData += ", Panel 1: " + event.args.panels[0].size;
                eventData += ", Panel 2: " + event.args.panels[1].size;
                $('#events').jqxPanel('prepend', '<div class="item" style="margin-top: 5px;">' + eventData + '</div>');
            }
            $('#events').jqxPanel({height: '100px', width: '450px' });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="container" style="float: left">
            <div id="mainSplitter">
                <div class="splitter-panel" style="background-color:#F5FFF2;"><span style="margin: 5px;">Panel 1</span></div>
                <div class="splitter-panel" style="background-color:#F5FFF2;"><span style="margin: 5px;">Panel 2</span></div>
            </div>
            <br />
            <div style="font-family: Verdana; font-size: 13;">
                Events:</div>
            <div id="events" style="border-width: 0px;">
            </div>
        </div>     
    </div>
</body>
</html>

The result of the above code is:


3 pane Split Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, AngularJS, Angular Splitter, AngularJS Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <title id='Description'>This demonstration shows how to trigger the jqxSplitter events.
    </title>
    <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/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150 }] });
            $('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: '60%', collapsible: false }] });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div id="mainSplitter">
        <div>
            Left Panel
        </div>
        <div>
            <div id="rightSplitter">
                <div>
                    Top-Right Panel
                </div>
                <div>
                    Bottom-Right Panel
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The result of the above code is:

Fit to the document's bounds

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <title id='Description'>This demonstration shows how to create a splitter that fits the entire browser window's contents.
    </title>
    <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/jqxsplitter.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', min: 250 }, { size: '80%'}] });
       });
    </script>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div style="border: none;" id='splitter'>
        <div></div>
        <div></div>
    </div>
    </body>
</html>

The Splitter below fits to the iframe's bounds. The splitter will automatically adjust its size to fill the iframe's bounds.

3 pane Split Layout that fits to the document's bounds

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates three-pane columns splitter" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <title id='Description'>This demonstration shows how to create a three-pane splitter
        that fits to the browser's window. </title>
    <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/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%'}] });
            $('#rightSplitter').jqxSplitter({ height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%'}] });
        });
    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div style="border: none;" id="mainSplitter">
        <div>
            Left Panel</div>
        <div>
            <div style="border: none;" id="rightSplitter">
                <div>
                    Top-Right Panel</div>
                <div>
                    Bottom-Right Panel</div>
            </div>
        </div>
    </div>
</body>
</html>

The Splitter below fits to the iframe's bounds. The splitter will automatically adjust its size to fill the iframe's bounds.

Setting minimum pane sizes

To set the minimum size of the splitter, you need to set the 'min' properties of its panels. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This demonstration shows how to set the minimum size of the Splitter." />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <title id='Description'>Splitter Minimum Size
    </title>
    <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/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150, min: 100 }, { min: 300, size: 450 }] });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="container">
            <div id="mainSplitter">
                <div>Left Panel</div>
                <div>Right Panel</div>
            </div>
        </div>     
    </div>
</body>
</html>

The result of the above code is: