/* Container base */ #mySplitter width: 100%; border: 1px solid #ccc;
$('#mySplitter').splitter( onResizeStart: function(event, ui) console.log('Resizing started. Current size:', ui.size); , onResize: function(event, ui) // ui.size = current size of first pane $('#sizeDisplay').text(ui.size + 'px'); , onResizeEnd: function(event, ui) alert('Resize finished at ' + ui.size + 'px'); // Save preference to localStorage localStorage.setItem('splitterPos', ui.size); jquery splitter plugin
To create more than two panes, nest splitters: /* Container base */ #mySplitter width: 100%; border:
John was thrilled to see his creation take on a life of its own. He encouraged the community to participate, and soon the plugin was evolving faster than he could have ever imagined. border: 1px solid #ccc