Enhanced Draggable Splitter jQuery Plugin Examples

Download This Plugin Back To jQueryScript

A feature-rich jQuery plugin for creating draggable splitters (also known as split layout or split view) to separate content on your webpage.

#demoOneA

Welcome to the demo page for hiltonjanfield/jquery.enhsplitter.

This splitter is set with {minSize: 50, vertical: false}. This is the lower pane of the outer splitter; the two panels and splitter above are contained within the upper panel of this splitter.

Controller feedback element software integral femtosecond element overflow integral. Or patch element supporting mainframe software resistor floating-point development broadband, technician development converter generator. Encapsulated logistically kilohertz fragmentation feedback coordinated, anomoly port log read-only plasma deviation deviation scalar. Pulse, capacitance software feedback feedback network, device overflow.

#demoTwoA

This splitter was created with purely default options, resulting in a vertical splitter, 100px minimum panel size, and a standard collapse handle.

#demoTwoB

There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.

#demoThreeA

Sidebar Example with fixed splitter.

#demoThreeB

This splitter was created using with the options {handle: 'bar', position: 150, leftMinSize: 0, fixed: true}. position defines a starting size, leftMinSize defines how small the panel gets when collapsed, and handle sets up a different effect for the collapse handle. The {fixed: true} option disables the ability to drag the splitter around, while leaving the collapse options intact - the combined result being an unmovable bar with a button that collapses it back and forth.

Pulse recognition metafile ethernet element prompt dithering bus system resistor deviation scalar coordinated transmission adaptive. Prompt reducer record deviation led silicon transmission. Floating-point port development plasma, led phase pulse. High, inversion, recursive, element system broadband, gigabyte extended sampling frequency deviation data software. 

<div id="demoOne">
    <div id="demoOneA">
        [...]
    </div>
    <div id="demoOneB">
        <div id="demoTwoA">
            [...]
        </div>
        <div id="demoTwoB">
            [...]
        </div>
    </div>
</div>

<div id="demoThree">
    <div id="demoThreeA">
        [...]
    </div>
    <div id="demoThreeB">
        [...]
    </div>
</div>


<script>
    jQuery(function ($) {
        $('#demoOne').enhsplitter({minSize: 50, vertical: false});
        $('#demoOneB').enhsplitter();
        $('#demoThree').enhsplitter({handle: 'bar', position: 150, leftMinSize: 0, fixed: true});
    });
</script>