【问题标题】：Jquery layout resizable not working可调整大小的Jquery布局不起作用
【发布时间】：2012-05-19 03:54:48
【问题描述】：

我无法设置 jquery-layout 插件的选项。默认渲染正确，但选项不正确。我尝试在准备好的文档上设置可调整大小和可滑动，但是当我警告可调整大小时它返回 false。谁能发现这里出了什么问题？

js:

$(document).ready(function() {  
var myLayout = $('body').layout({
   west: {
   resizable: true,
   resizeWhileDragging:   true,
   slidable:              true
   }

});
alert(myLayout.options.west.resizable); //returns false
});

html:

<body>

<div class="ui-layout-center">Center
    <div id="board">        
    </div>  
    <button onclick="set_board();">New Game!</button>
    <button onclick="execute_turn();">Turn!</button>
</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>

【问题讨论】：

嗨伙计——你是说布局插件吗？ layout.jquery-dev.net/documentation.cfm ;我不确定Jquery是否有.layout API，请告诉我，也许可以帮助你，干杯
Cooleos，这就是你要找的吗？ 工作演示jsfiddle.net/wy69R/4如果有帮助请告诉我，我会将其设置为答案，
我只想要三列可以调整大小。我没有看到您的示例与我的代码有什么不同，而不是 applyDefaultStyles: true .. 我尝试过但仍然无法正常工作:(
能否请你jsfiddle这个问题可能有点小，我可以看看。
您使用的是 jquery 1.9 或更早版本吗？我对 1.8.3 也有同样的问题，所以可能与此有关？

标签： jquery html resizable jquery-layout

【解决方案1】：

当 jqueryui 也包含在内时，它对我有用，就像在 http://layout.jquery-dev.net/demos/simple.html 的 jquery-layout 简单演示中一样。

确保您首先包含jquery-ui，然后包含jquery.layout，否则它将不起作用。

例子：

<script src="lib/jquery/jquery-ui-1.10.4.js"></script>
<script src="lib/jquery/jquery.layout-1.3.0-rc30.79.js"></script>

【讨论】：

这是正确答案。对此感到非常头疼，直到我意识到我以错误的顺序将两者包括在内。
谢谢！解决了我的问题。我认为对于这个插件的开发人员来说，提供一个实际上很简单的精简的“简单”示例会很好 - 即具有可调整大小的面板的最小多窗格布局，但没有所有额外的膨胀/按钮/内联事件等。这将是最常用的示例。拥有“膨胀/按钮”版本没有问题 - 但可以给它一个不同的名称。
+1 + 很高兴得到这个正确答案的改进 - 还要提到 jquery ，因此库加载的正确顺序是 jquery,jquery-ui,jquery-layout

【解决方案2】：

2018 年 Webpack 用户更新

正如@codeless 提到的，您需要在布局之前加载“jquery-ui”（首先显式导入“jquery-ui”），但请确保您还加载了 jquery 的“可调整大小”和“可拖动”模块-ui

import 'jquery-ui/ui/widgets/resizable';
import 'jquery-ui/ui/widgets/draggable';

否则窗格大小将不起作用

【讨论】：

【解决方案3】：

您正在初始化布局插件两次...尝试合并 myLayout 定义和初始化选项：

$(document).ready(function() {
var myLayout = $('body').layout({
   west: {
   resizable: true,
   resizeWhileDragging:   true,
   slidable:              true
   }

});
alert(myLayout.options.west.resizable); //returns false
});

【讨论】：