resizable split views - Download Create Resizable Split Views Using jQuery - split.js

Download Create Resizable Split Views Using jQuery – split.js

By Posted on

This time I will share jQuery Plugin and tutorial about Create Resizable Split Views Using jQuery – split.js, hope it will help you in programming stack.

resizable split views - Download Create Resizable Split Views Using jQuery - split.js
File Size: 8.23 KB
Views Total: 3688
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

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.

How to use it:

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

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

2. The necessary CSS styles.

view source
01 .arrow {
02   position: absolute;
03   right: 0;
04   bottom: 0;
05   width: 10px;
06   height: 10px;
07   cursor: ns-resize;
08   background-color: red;
09 }
10  
11 .hj-transverse-split-div {
12   position: relative;
13   float: left;
14   height: 100%;
15   padding: 0px;
16   background: gray;
17   overflow: hidden;
18 }
19  
20 .hj-wrap .hj-transverse-split-label {
21   position: absolute;
22   right: 0;
23   top: 0;
24   float: left;
25   width: 2px;
26   height: 100%;
27   display: block;
28   cursor: ew-resize;
29   background-color: #fff;
30   z-index: 9;
31 }
32  
33 .hj-vertical-split-div {
34   position: relative;
35   border: 0px solid red;
36   width: 99.9%;
37   margin: 0 auto;
38   background-color: gray;
39 }
40  
41 .hj-vertical-split-label {
42   position: absolute;
43   bottom: 0;
44   left: 0;
45   width: 100%;
46   height: 2px;
47   display: block;
48   cursor: ns-resize;
49   background-color: #fff;
50   z-index: 9;
51 }

3. Create a vertical split layout.

view source
01 <div class='hj-wrap verticals'>
02   <div class="hj-vertical-split-div">Top
03     <label class="hj-vertical-split-label"></label>
04   </div>
05   <div class="hj-vertical-split-div">Middle
06     <label class="hj-vertical-split-label"></label>
07   </div>
08   <div class="hj-vertical-split-div">Bottom</div>
09   <div class="arrow"></div>
10 </div>

4. Create a horizontal split layout.

view source
01 <div class='hj-wrap'>
02   <div class="hj-transverse-split-div">Column 1
03     <label class="hj-transverse-split-label"></label>
04   </div>
05   <div class="hj-transverse-split-div">Column 2
06     <label class="hj-transverse-split-label"></label>
07   </div>
08   <div class="hj-transverse-split-div">Column 3
09     <label class="hj-transverse-split-label"></label>
10   </div>
11   <div class="hj-transverse-split-div">Column 4
12     <label class="hj-transverse-split-label"></label>
13   </div>
14   <div class="hj-transverse-split-div">Column 5
15   </div>
16   <div class="arrow"></div>
17 </div>

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

view source
01 <div class='hj-wrap'>
02   <div class="hj-transverse-split-div">Column
03     <label class="hj-transverse-split-label"></label>
04   </div>
05   <div class="hj-transverse-split-div verticals">
06     <div class="hj-vertical-split-div">Row
07       <label class="hj-vertical-split-label"></label>
08     </div>
09     <div class="hj-vertical-split-div">Row 2
10       <label class="hj-vertical-split-label"></label>
11     </div>

source : jquery.net

Related posts:

12     <div class="hj-vertical-split-div">Row 3</div>