Splitter / Split Pane / Docker options

SPLIT PANES / DOCKER allow you to display multiple areas, either side by side or one on top of each other. Nested layouts are often part of it. By dragging a divider that appears between the areas, the user can specify how much of the total width / height goes to each area.

I have been building a backend interface in the past weeks, that forced me to look into ways to organize the workspace more efficiently . I could code my own splitter, but is not a priority right now and makes no sense to always reinvent the wheel :)

Here some of the options out there…

Pure jQuery UI

This uses the jQuery UI draggable component and provides limited options :)

 $('.splitter').draggable({

    axis: 'x',

    containment: '#content',

    distance: 0,

    drag: function(event, ui) {

      var width = $('#content').width();

      $('#content .leftpane').css({ width: ui.position.left + 'px' });

      $('#content .rightpane').css({

        left: ui.position.left + 1 + 'px',

        width: (width - ui.position.left + 1) + 'px'

      });

    },

    refreshPositions: true,

    scroll: false

  });

jQuery UI

• Layout, has not been updated for a long time, but still provides a huge amount of options and methods to handle almost anything. Version 2.0 was announced, but never showed up. Google Groups / GitHub / Documentation
• ProPanelLayout (Commercial)

jQuery Plugins

• Split Pane / shagstrom
• Splitter
• Resizable / More information
• EasyUI – Layout
• w2UI – Layout

Pure Jasvascript

• Split.js (Split Pane)
• Golden Layout (Docker)
• Dock Spawn (Docker)

CSS only

• CSS3 Splitview

Enjoy coding …