jQuery UI Splitter / Resizable用於無限數量的列

Question

使用jQueryUI Splitter或Resizable函數，我想創建一個布局，該布局允許添加無限數量的列，並且所有列都需要調整大小。

所以就像這樣的小提琴： https : //jsfiddle.net/f3gLh3mw/

但是在這個小提琴中，HTML包含嵌套集而不是內聯集。 就像上面的小提琴一樣，這限制了可能性，您只能為2、4、8、16、32等列設置相同的寬度。 正如您在小提琴中所看到的，介於兩者之間的所有內容都顯示為彎曲的。

在研究此問題時，我遇到了一個SO問題： jQuery UI和Splitter

如果您查看最上面的答案，那么它將顯示出類似以下的結構：

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

我想要的結構是哪種，但是Javascript僅針對2個可調整大小的項目進行了硬編碼。

所以這是一個問題：

如何修改最后的小提琴，使其可與任意數量的.resizable div一起使用。

還是沒有人知道可以做到這一點的插件。

謝謝大家的幫助！

Answer 1

到目前為止，我發現了這個插件： http : //www.bacubacu.com/colresizable/

確切地說了什么，並且非常接近我想要的功能。 只有它在表格布局中，而不是div布局。

工作提琴： http : //jsfiddle.net/2h4kLzgj/6/

它被激活：

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