Draggable Panes Splitter Plugin - jQuery Granit

Granit is a fully configurable split layout plugin to split your webpage into several panes which are resizable via drag and drop.

The drag and drop functionality is based on jQuery UI Draggable function.

How to use it:

1. Load the necessary jQuery and jQuery UI in the HTML file.

<link href="/path/to/cdn/jquery-ui.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Load the granit's JavaScript and CSS files in the HTML file.

<link href="/path/to/granit.min.css" rel="stylesheet" />
<script src="/path/to/granitUtils.min.js"></script>
<script src="/path/to/granit.min.js"></script>

3. Add horizontal & vertical panes to the split layout following the markup structure as these:

<div id="splitterOuter" class="granit-splitter-vertical">
  <div class="stein_content">
    Pane 1
  </div>
  <div id="splitterInner" class="granit-splitter-horizontal">
      <div class="stein_content" style="width:1200px;height:1200px;">
        Pane 2
      </div>
      <div class="stein_content" style="width:auto;height:100%;">
        Pane 3
      </div>
      <div class="stein_content" style="width:auto;height:200px;">
        Pane 4
      </div>
      <div id="splitterInner2" class="granit-splitter-vertical">
        <article class="stein_content" style="width:1200px;height:1200px;">
          Pane 5
        </article>
        <article class="stein_content" style="width:auto;height:100%;">
          Pane 6
        </article>
        <article class="stein_content" style="width:auto;height:200px;">
          Pane 7
        </article>
        <article class="stein_content" style="width:1200px;height:100%;">
          Pane 8
        </article>
      </div>
      <div class="stein_content" style="width:1200px;height:100%;">
        Pane 9
      </div>
  </div>
  <div class="stein_content" style="width:1200px;height:1200px;">
    Pane 10
  </div>
  <div class="stein_content">
    Pane 11
  </div>
</div>

4. Call the plugin to enable the split layout.

$(function(){
  $("div[class^='granit-splitter']").each(function() {
    $(this).splitter()
  });
});

5. You're also allowed to generate a split layout directly in the JavaScript:

$("#splitterContainer").splitter({
  panel: [
    { index: 0, size: "10ch", class: "panelLayout1 panelLayout7", resizable: true },
    { index: 1, size: "10.4vw", class: "panelLayout2 panelLayout7" },
    { index: 2, size: "10ex" },
    { index: 3, class: "panelLayout3 panelLayout5" }
  ],
  // splitter: [
  //     { index: 0, width: 10 },
  //     { index: 1, width: 15, length: "200rem" },
  //     { index: 2, width: 10 }
  // ],
  splitterTemplate: { width: "3em", length: "75%" },
  direction: "vertical", // or horizontal
});

6. Full plugin options with default values to config the split layout.

$("#splitterContainer").splitter({
  classes: {
    "granit-splitter-panel": "granit_panel_default",
    "granit-splitter-state-default": "granit_splitter_state_default",
    "granit-splitter-state-hover": "granit_splitter_state_hover",
    "granit-splitter-state-active": "granit_splitter_state_active"
  },
  direction: undefined,
  overflow: "auto",
  panel: [],
  splitter: [],
  panelTemplate: { size: "auto", minSize: 30, maxSize: "none", resizable: true, flexible: true },
  splitterTemplate: { width: "6px", length: "100%", disabled: false },
  reconvert: "all"
});

---

This awesome jQuery plugin is developed by stein-t. For more Advanced Usages, please check the demo page or visit the official website.