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

Question

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

6

我无法成功设置jquery-layout插件的选项。默认情况下可以正确渲染，但选项不起作用。我尝试在文档准备好时设置resizable和slidable，但当我弹出resizable时它返回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>

- valen

嗨，你好 - 你是指布局插件吗？http://layout.jquery-dev.net/documentation.cfm; 我不确定Jquery是否有.layout API，请告诉我，我可能能帮到你，谢谢。 - Tats_innit

Cooleos，这是你要找的吗？工作演示 http://jsfiddle.net/wy69R/4/ 请告诉我这是否有帮助，我会将其设置为答案。 - Tats_innit

我只想要三列可以调整大小。我没有看到你的示例与我的代码有什么不同，都是应用了applyDefaultStyles: true..但它仍然不起作用:( - valen

你能否在 JSFiddle 上分享一下代码？问题可能很小，我可以帮你看看。 - Tats_innit

你正在使用jQuery 1.9或更早版本吗？我在1.8.3上也遇到了同样的问题，所以可能与此有关？ - Tiquelou

3个回答

1

2018年Webpack用户更新

如@codeless所提到的，您需要在布局之前加载'jquery-ui'（通过显式导入'jquery-ui'），但请确保您也加载了jquery-ui的'resizable'和'draggable'模块。

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

否则窗格调整大小将无法工作。

- Roman86

0

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

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

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

- Jim Thomas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- codeless · Accepted Answer

当包含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>