/jquery.splitter

jQuery Splitter is plugin that split your content with movable splitter between them

Primary LanguageJavaScriptGNU Lesser General Public License v3.0LGPL-3.0

jQuery Splitter

jQuery Splitter is plugin that split your content with movable splitter between them.

Example

var splitter = $('#foo').height(200).split({
    orientation: 'vertical',
    limit: 10,
    position: '50%', // if there is no percentage it interpret it as pixels
    onDrag: function(event) {
        console.log(splitter.position());
    }
});
<div id="foo">
    <div id="leftPane">Foo</div>
    <div id="rightPane">Bar</div>
</div>

Note: You need to set the height of the container for splitter to work.

Options

  • orientation - string 'horizontal' or 'vertical'.
  • limit - number how many pixels where you can't move the splitter on the edge.
  • position - number or string with % indicate initial position of the splitter.
  • onDrag - event fired when draging the splitter, the event object is from mousemove

Demo

http://jquery.jcubic.pl/splitter.php

Patch Contributors

License

Copyright (C) 2010-2013 Jakub Jankiewicz <http://jcubic.pl>

Released under the terms of the GNU Lesser General Public License