javascript - 基于 jQuery 的 Splitter 插件

Question

我需要创建如下布局；

现在如您所见，我想要围绕单元格中心调整大小的单元格，即单元格左侧和单元格右侧

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

但我还需要创建 4 个 portlet(正如您在 cell-center 中看到的那样)。我出于同样的原因使用了 jQuery UI，但出于某些原因，这 2 个运行得不是很好(3cSplitter 和 jQuery UI Portlets)...布局完全被破坏了...不确定它是否与绝对定位有关...

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

Answer 1

jQuery Layout插件提供此功能。与 jQuery UI 结合使用时，您可以使用极少的标记获得可调整大小的 Pane 。要实现您正在寻找的东西，您只需要一些标记，例如:

<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
});

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