Question

早上好，

在调用sizePane（）之后，jQuery UI布局似乎正在重置我的选项。当我将以下内容加载到FireFox中时，然后单击“调整大小”按钮，北窗格突然变得可调整大小，并且突然再次启用热键。我做错了吗？或者这是一个错误吗？

<html>
<head><title>Layout Test</title></head>

<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>

<script language="JavaScript">

jQuery(document).ready(documentReady);

    function documentReady(){

        jQuery('body').layout({

            defaults: {

                applyDefaultStyles: true

            },

            north: {

                enableCursorHotkey: false,
                closable: false,
                resizable: false

            },

            center: {


            }

        });

    }

</script>

<body>

    <div class="ui-layout-north">

        North Pane

    </div>

    <div class="ui-layout-center">

        Center Pane
        <input type="button" value="Resize" onclick="jQuery('body').layout().sizePane('north',100);" />

    </div>

</body>

Answer 1

好的，我相信我找到了解决方案。第二次调用jQuery（'body'）。layout（）似乎用一个全新的替换我以前的“布局”对象，重置所有选项。

解决方案是维护对原始声明的引用并对该对象进行操作，如下所示：

<html>
<head><title>Layout Test</title></head>

<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>

<script language="JavaScript">

jQuery(document).ready(documentReady);

    var myLayout;

    function documentReady(){

        myLayout = jQuery('body').layout({

            defaults: {

                applyDefaultStyles: true

            },

            north: {

                enableCursorHotkey: false,
                closable: false,

            },

            center: {

                enableCursorHotkey: false,
                closable: false,

            }

        });

    }

</script>

<body>

    <div class="ui-layout-north">

        North Pane

    </div>

    <div class="ui-layout-center">

        Center Pane
        <input type="button" value="Resize" onclick="myLayout.sizePane('north',100);" />

    </div>

</body>
</html>

此外，必须删除“resizable：false”选项，否则对sizePane（）的调用将不起作用。

Answer 2

您可以将此选项添加到窗格：

animatePaneSizing：true

jQuery UI布局：sizePane（）正在重置我的选项

2 个答案: