Vertical & Horizontal Split View With jQuery - jsRapSpliter
File Size: | 8.42 KB |
---|---|
Views Total: | 880 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jsRapSpliter is a lightweight jQuery splitter plugin that allows webpage or specific container splitting in vertical and horizontal orientations.
It takes a DIV element with two child DIVs and converts them into a vertical or horizontal split view, where users can resize each DIV pane with mouse drag.
See Also:
How to use it:
1. Add DIV panes to the split view.
<div id="demo" > <div>Panel 1</div> <div>Panel 2</div> </div>
2. Download and load the jsRapSpliter.js
library after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jsRapSpliter.js"></script>
3. Initialize the plugin on the top container to generate a horizontal split view.
$(function(){ $('#demo').jsRapSpliter(); });
4. Generate a vertical split view instead.
$(function(){ $('#demo').jsRapSpliter({ horizontal: true, }); });
5. Set the height of the spilt view. Default: 200px.
$(function(){ $('#demo').jsRapSpliter({ height: '300px', }); });
6. Set the start position of the drag handle (splitter). Default: 0.5 (50%).
$(function(){ $('#demo').jsRapSpliter({ position: 0.6, }); });
7. Set the width of the drag handle (splitter). Default: 8.0.
$(function(){ $('#demo').jsRapSpliter({ spliterWidth: 0.6 }); });
8. Override the default styles of the drag handle (splitter).
/* vertical splitter */ .spliterV { position: absolute; height: 100%; cursor: col-resize; border: solid 1px #bab; } /* horizontal splitter */ .spliterH { position: absolute; width: 100%; cursor: row-resize; border: solid 1px #bab; }
This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.