我无法设置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
});