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

val*_*len 6 html jquery resizable jquery-layout

我无法设法获取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
});
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

小智 13

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>
Run Code Online (Sandbox Code Playgroud)

  • 这是正确的答案.对此非常头疼,直到我意识到我把两个包含在错误的顺序中. (2认同)

Jim*_*mas 0

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

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

});
alert(myLayout.options.west.resizable); //returns false
});
Run Code Online (Sandbox Code Playgroud)