This time I will share jQuery Plugin and tutorial about Resizable Splitting Panes In jQuery – jsplitter, hope it will help you in programming stack.
A JavaScript (jQuery) based splitter plugin that divides a container into two parts and allows the user to resize the left/right panes with mouse drag.
Useful in responsive web development that enables the developers to test how their web apps work on different screen sizes.
Alternatively, you can also use the jsplitter plugin to create a split layout that allows you to split a layout into multiple resizable areas.
How to use it:
1. Load jQuery library and the jsplitter plugin in the HTML page.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/jsplitter.js"></script> |
2. Add left/right content together with the splitter to your page.
07 |
<div id="vsplitter"></div> |
3. Initialize the plugin to create a basic split layout.
1 |
$('#vsplitter').jSplitter({ |
4. Or wrap the resizable panes in a flexible container.
01 |
<div style="display:flex;"> |
08 |
<div id="vsplitter"></div> |
1 |
$('#vsplitter').jSplitter({ |
5. Determine the min/max width of the left pane.
1 |
$('#vsplitter').jSplitter({ |
6. Determine whether to persist the current position of the splitter using Cookies. Default: false.
1 |
$('#vsplitter').jSplitter({ |
