可调整大小的 Jquery 布局不起作用



我无法设置jquery布局插件的选项。默认值正确呈现,但选项不会。我尝试在准备好的文档上设置可调整大小和可滑动,但是当我提醒可调整大小时,它返回 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>

也包含jqueryui时,它对我有用,就像在 http://layout.jquery-dev.net/demos/simple.html 的jquery-layout Simple demo中一样。

确保首先包含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>

Webpack 用户的 2018 年更新

正如@codeless提到的,你需要在布局之前加载"jquery-ui"(通过先显式导入"jquery-ui"(,但请确保你还加载了jquery-ui的"可调整大小"和"可拖动"模块。

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

否则窗格大小调整将不起作用

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

$(document).ready(function() {
var myLayout = $('body').layout({
   west: {
   resizable: true,
   resizeWhileDragging:   true,
   slidable:              true
   }
});
alert(myLayout.options.west.resizable); //returns false
});

最新更新