Create Resizable Split Views Using jQuery - split.js

Create Resizable Split Views Using jQuery - split.js

A resizable, responsive, horizontal/vertical split layout jQuery plugin which allows the user to adjust the height & width (%) of panes by dragging the splitter.

A typical use of this plugin is to generate draggable split views for code playground, responsive layout mockup, etc.

1. Insert the JavaScript file split.js after jQuery library and we're ready to go.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="split.js"></script>

2. The necessary CSS styles.

.arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  cursor: ns-resize;
  background-color: red;
}
.hj-transverse-split-div {
  position: relative;
  float: left;
  height: 100%;
  padding: 0px;
  background: gray;
  overflow: hidden;
}
.hj-wrap .hj-transverse-split-label {
  position: absolute;
  right: 0;
  top: 0;
  float: left;
  width: 2px;
  height: 100%;
  display: block;
  cursor: ew-resize;
  background-color: #fff;
  z-index: 9;
}
.hj-vertical-split-div {
  position: relative;
  border: 0px solid red;
  width: 99.9%;
  margin: 0 auto;
  background-color: gray;
}
.hj-vertical-split-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
  cursor: ns-resize;
  background-color: #fff;
  z-index: 9;
}

3. Create a vertical split layout.

<div class='hj-wrap verticals'>
  <div class="hj-vertical-split-div">Top
    <label class="hj-vertical-split-label"></label>
  </div>
  <div class="hj-vertical-split-div">Middle
    <label class="hj-vertical-split-label"></label>
  </div>
  <div class="hj-vertical-split-div">Bottom</div>
  <div class="arrow"></div>
</div>

4. Create a horizontal split layout.

<div class='hj-wrap'>
  <div class="hj-transverse-split-div">Column 1
    <label class="hj-transverse-split-label"></label>
  </div>
  <div class="hj-transverse-split-div">Column 2
    <label class="hj-transverse-split-label"></label>
  </div>
  <div class="hj-transverse-split-div">Column 3
    <label class="hj-transverse-split-label"></label>
  </div>
  <div class="hj-transverse-split-div">Column 4
    <label class="hj-transverse-split-label"></label>
  </div>
  <div class="hj-transverse-split-div">Column 5
  </div>
  <div class="arrow"></div>
</div>

5. Create a complex split layout containing horizontal panes and vertical panes.

<div class='hj-wrap'>
  <div class="hj-transverse-split-div">Column
    <label class="hj-transverse-split-label"></label>
  </div>
  <div class="hj-transverse-split-div verticals">
    <div class="hj-vertical-split-div">Row
      <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div">Row 2
      <label class="hj-vertical-split-label"></label>
    </div>
    <div class="hj-vertical-split-div">Row 3</div>
  </div>
  <div class="arrow"></div>
</div>

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

  • Publication date: 22.03.2019
  • Source