This time I will share jQuery Plugin and tutorial about Easy Layout Splitter/Resizer For Developer – pane-slider, hope it will help you in programming stack.
File Size: | 2.73 KB |
---|---|
Views Total: | 1704 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
An easy-to-use and mobile-friendly split slider plugin to create a split layout that enables the developers to resize two split panes via mouse drag or touch swipe.
How to use it:
1. Insert a slider handle into your split layout as follows:
01 |
< div id = "panelContainer" > |
02 |
< div class = "panel one" > |
03 |
< div class = "content" > |
04 |
Panel 1 Content |
05 |
</ div > |
06 |
</ div > |
07 |
< div class = "panel two" > |
08 |
< div class = "content" > |
09 |
Panel 2 Content |
10 |
</ div > |
11 |
< span class = "slider" ></ span > |
12 |
</ div > |
13 |
</ div > |
2. Put the JavaScript file jquery.slider.js
after jQuery.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/local/jquery.slider.js" ></ script > |
3. Style the split slider in the CSS.
01 |
.slider { |
02 |
z-index : 999999 ; |
03 |
display : block ; |
04 |
position : absolute ; |
05 |
width : 5px ; |
06 |
background-color : #1ABC9C ; |
07 |
left : 0 ; |
08 |
top : 0 ; |
09 |
bottom : 0 ; |
10 |
overflow : visible ; |
11 |
user-select: none ; |
12 |
} |
13 |
14 |
.slider::before { |
15 |
content : "" ; |
16 |
position : absolute ; |
17 |
left : 0.25 rem; |
18 |
top : 50% ; |
19 |
height : 1.5 rem; |
20 |
width : 0.5 rem; |
21 |
background-color : #1ABC9C ; |
22 |
cursor : col-resize; |
23 |
} |
Changelog:
2020-10-22
- Add touch listeners