Touch-Splitter-jQuery
A high performance html splitter compatible with touch events
Install via npm
npm install touch-splitter-jquery
You can then use the compiled javascript and css in your client resources.
./node_modules/touch-splitter-jquery/src/jquery.touchsplitter.js
./node_modules/touch-splitter-jquery/src/touchsplitter.css
Demos
Basic Demo Page
This is our basic page that is pictured above. You can see the source in the index.html file.
Quick Test CoffeeScript
Basic ide that uses two different splitters, one vertical splitter, then a horizontal splitter that divides the source from the compiled javascript.
Example Setup
It is highly recommended that your splitter container has a relative, absolute, or fixed position
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="src/jquery.touchsplitter.js"></script> <h1>Basic Demo</h1> <div class="split-me-container"> <div class="split-me"> <div> Left Side </div> <div> Right Side </div> </div> </div> <script> touchSplitter1 = $('.split-me').touchSplit({leftMax:300, leftMin:100, dock:"left"}) touchSplitter1.getFirst().touchSplit({orientation:"vertical"}) </script>
Teardown
To teardown a touch splitter you can use any of the following methods
var splitted = $('.split-me') // Destroy splitter without removing either first or second element splitted.touchSplitter.destroy(); // Destroy splitter and remove top or left element splitted.touchSplitter.destroy('first'); // Destroy splitter and remove bottom or right element splitted.touchSplitter.destroy('second'); // Destroy splitter and remove all elements splitted.touchSplitter.destroy('both'); (typeof splitted.touchSplitter === 'undefined') // true