Click here to Skip to main content
Click here to Skip to main content

jQuery Splitter

By , 6 Jan 2012
Rate this:
Please Sign up or sign in to vote.

The jQuery Splliter plugin 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.

vertical splitter

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 plugin 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>

jquery ui splitter

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

jqwidgets
jQWidgets
United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

Follow on   Twitter

Comments and Discussions

 
QuestionIs this Paid or free? Pinmemberchirag.khatsuriya17-Apr-12 18:46 
AnswerRe: Is this Paid or free? Pingroupjqwidgets18-Apr-12 3:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 6 Jan 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid