基于jQuery的Splitter插件

Question

我需要创建如下的布局；

现在您可以看到，我想要在Cell-center周围调整大小的单元格，即cell-left和cell-right

我在http://methvin.com/splitter/3csplitter.html使用jQuery插件 来实现相同的目的。

但是我还需要创建4个portlet（如您在cell-center所见）。我出于同样的原因使用了jQuery UI，并且由于某些原因，这2进行得不太好（3cSplitter和jQuery UI Portlet）...布局被完全破坏了...不确定是否与绝对定位有关...

但是我的问题是，我可以使用jQuery UI实现类似的拆分器。我在http://jqueryui.com/resizable/下看到的那个 似乎对我想要的http://methvin.com/splitter/3csplitter.html不太好， 如果两者都基于jQuery UI，我想整合问题不会太多...

Answer 1

jQuery 布局插件提供了此功能。与 jQuery UI 结合使用，您可以使用非常少的标记获得可调整大小的窗格。为了实现您正在寻找的内容，您只需要一些标记，例如：

<div id="container">
  <div class="ui-layout-west">Left</div>
  <div class="ui-layout-center">Center</div>
  <div class="ui-layout-east">Right</div>
</div>

使用默认配置，您只需使用默认样式实例化插件即可：

$("#container").layout({
  applyDemoStyles: true
});

您将获得一个带有可调整大小的窗格的窗格视图。该插件是相当可配置的，允许您根据自己的喜好设置窗格处理程序的样式以及配置插件的功能方面，例如窗格的最小或最大尺寸。此外，对于更复杂的视图，您可以将布局窗格与其他窗格嵌套并多次实例化插件。