a few Splitter enhancements.

as promised, the Splitter can now do vertical splitting as well as horizontal.

Also, I’ve implemented minimumSize for the panels.

An example:

top left, minimum height 50px
bottom left, minimum height 100px
right, minimum width:50px

The HTML for the above is this:

<div id="splitter_wrapper" style="height:200px;border:1px solid #000">
  <div id="topleft">top left, minimum height 50px</div>
  <div id="bottomleft">bottom left, minimum height 100px</div>
  <div id="right">right, minimum width:50px</div>
</div>

and the javascript is this:

var horizontal=new Splitter($("splitter_wrapper"));
var vertical=new Splitter(false,{orientation:1});
vertical.addWidget($("topleft"),{minimumSize:50});
vertical.addWidget($("bottomleft"),{minimumSize:100});
horizontal.addWidget(vertical);
horizontal.addWidget($("right"),{minimumSize:50});

The Splitter class requires Mootools. You can get the class file here.

Splitter for MooTools

A while back, I wrote a panel script I called “resizeabletable”. It took a table and made it resizeable, such that you could drag the borders of the table to resize the cells of the table.

I did this to emulate the Splitter capability which is common in a lot of visual languages. For example, there is QT’s splitter, which my new one is based on (the old one had a few architectural faults), and there are others available for Java, wxWindows, and other visual languages.

demo

For now, the splitting is only available horizontally. I’ll add vertical splitting in a while.

The demo’s source is pretty simple, so I won’t bother explaining how to use it.

The source is here. Needs MooTools to work.