jQuery UI Splitter/Resizable für unbegrenzte Anzahl von Spalten

Question

Verwenden von jQueryUI Splitter oder resizable Funktionen Ich möchte ein Layout erstellen, das eine unbegrenzte Anzahl von Spalten hinzugefügt werden kann und alle Spalten in der Größe veränderbar sein müssen.

So ist es wie diese Geige: https://jsfiddle.net/f3gLh3mw/

Aber in dieser Geige das HTML enthält aus verschachtelten Sätzen statt Inline. Was die Möglichkeiten einschränkt wie bei der obigen Geige, kann man bei 2,4,8,16,32 usw. Spalten nur gleich breit machen. Alles dazwischen erscheint schief, wie man in der Fiddle sehen kann.

Wenn diese Erforschung ich auf dieser Frage SO kam: jQuery UI and Splitter

Wenn Sie an der Spitze Antwort suchen dann eine Struktur wie zeigt:

<div class="wrap"> 
    <div class="resizable resizable1"></div> 
    <div class="resizable resizable2"></div> 
</div> 

Voll Geige: http://jsfiddle.net/8qzTJ/86/

Welche ist die Struktur, die ich will, aber das Javascript ist für nur 2 resizable Elemente fest codiert.

So, hier ist die Frage:

Wie die letzte Geige zu ändern, so dass es mit jeder Menge .resizable divs funktioniert.

Oder weiß jemand von einem Plugin, das dies tun kann.

Danke allen für die Hilfe!

Answer 1

Bisher fand ich dieses Plugin: http://www.bacubacu.com/colresizable/

Welche genau das tut, was sagt und ist sehr nah an der Funktionalität, die ich will. Nur ist es in einem Tabellenlayout und nicht in einem Div-Layout.

Arbeits Geige: http://jsfiddle.net/2h4kLzgj/6/

Es durch diese aktiviert ist:

$("#sample2").colResizable({ 
    fixed:true, 
    liveDrag:true, 
    gripInnerHtml:"<div class='grip'></div>", 
    draggingClass:"dragging" });