2012-05-19 201 views
6

我無法設法讓jquery-layout插件的選項設置。默認呈現正確,但選項不。我試圖設置可調整大小和可滑動的文檔,但當我提醒可調整大小時,它返回false。任何人都可以發現這裏出了什麼問題嗎?Jquery layout resizable not working

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> 
+0

你好的人 - 你的意思佈局插件? http://layout.jquery-dev.net/documentation.cfm;我不確定Jquery是否有'.layout' API,請讓我知道,或許能夠幫助你,歡呼 –

+0

oops,是佈局插件 – valen

+0

Cooleos,這是你在找什麼? **工作演示** http://jsfiddle.net/wy69R/4/請讓我知道如果這有幫助,我將它設置爲答案, –

回答

0

你初始化佈局插件兩次...嘗試conslidating的myLayout定義和初始化選項:

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

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

嘗試...沒有區別:( – valen

13

它爲我工作時jqueryui也包括在內,就像在t他jQuery的佈局簡單的演示在http://layout.jquery-dev.net/demos/simple.html

請確保您首先包含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> 
+2

這是正確的答案。有一個相當頭疼的這個,直到我意識到我把這兩個按錯誤的順序排列在一起 – Domi

+1

感謝你解決了我的問題,我認爲這個插件的開發者提供一個簡單的簡單例子非常簡單,使用可調整大小的面板的最小多面板佈局,但沒有所有額外的膨脹/按鈕/內聯事件等。這將是最常見的必需示例。使用「膨脹/按鈕」版本沒有問題 - 但也許給它一個不同的名字。 – Manachi

+0

+1 +很高興爲這個正確的答案imporovement - 也提及jquery,因此libs加載的正確順序是jquery,jquery-ui,jquery-layout –