jQuery Splitter

The jQuery Splitter plug in consists of a movable split bar that divides a container’s display area into two or more resizable panels. We are going to show you some of the basic features of the Splitter and how to add it to your web page.

HTML Coding

HTML markup for a splitter looks like this:

<div id="MySplitter">
  <div> First content goes here </div>
  <div> Second content goes here </div>
</div>

The top-level div has two child divs for the splitter panels. (In a horizontal splitter, the first panel is the top and the second is the bottom.) The splitter dynamically adds a splitbar that goes between the panels. To create the splitter, you need to select the MySplitter div in a jQuery object and pass it to the jqxSplitter constructor.

Javascript Coding

<script type="text/javascript">
    $(document).ready(function () {
        $('#MySplitter').jqxSplitter
        ({ width: 400, height: 400, panels: [{ size: 200 }, { size: 200}] });
    });
</script>

The initialization includes setting the splitter’s width, height and panels size. The size of the first panel defines the initial splitbar position. Users can move the splitbar by moving the mouse over it and then clicking and dragging it.

To change the splitter orientation, you can set the ‘orientation’ property to either ‘horizontal’ or ‘vertical’.

<script type="text/javascript">
    $(document).ready(function () {
        $('#MySplitter').jqxSplitter
        ({orientation: 'vertical', width: 400, 
        height: 400, panels: [{ size: 200 }, { size: 200}] });
    });
</script>

The plug in has an option that lets the code or user “dock” the splitbar to one side of the splitter, collapsing one panel and using the entire splitter area for the other panel. To use this option, specify the collapsible option in the panels definition when creating the splitter. If you specify collapsible: false, the splitter will allow the splitbar to be collapsed only by code with the ‘collapseAt’ function.

<script type="text/javascript">
    $(document).ready(function () {
        $('#MySplitter').jqxSplitter({orientation: 'vertical', width: 400, height: 400, 
        panels: [{ size: 200, collapsible: false }, { size: 200, collapsible: false}] });
    });
</script>

Adding an additional panel to the splitter is easy. The HTML markup below defines the structure for a splitter with three panels.

HTML Coding

<div id="MySplitter">
    <div>
        First content goes here
    </div>
    <div>
        Second content goes here
    </div>
    <div>
        Third content goes here
    </div>
</div>

JavaScript Coding

<script type="text/javascript">
    $(document).ready(function () {
        $('#MySplitter').jqxSplitter({ width: 400, height: 400, 
        panels: [{ size: 150 }, { size: 150 }, { size: 100}] });
    });
</script>

CodeProject