Webpack用户的2018年更新

Question

我无法设法获取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>

Answer 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>

Answer 2

Webpack用户的2018年更新

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

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

否则调整窗格大小将无法进行

Answer 3

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

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

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

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

3 个答案:

Webpack用户的2018年更新