jQuery UI Layout: sizePane() is resetting my options

4.8k views Asked by At

Good morning,

It appears that the jQuery UI Layout is resetting my options after a call to sizePane(). When I load the following into FireFox, then click the "Resize" button, the north pane suddenly becomes resizable, and the hotkeys are suddenly enabled again. Am I doing it wrong? Or is this a bug?

<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>
2

There are 2 answers

1
Patrick Bores On BEST ANSWER

OK, I believe I've found the solution. Calling jQuery('body').layout() a second time appears to replace my previous "layout" object with a brand new one, resetting all the options.

The solution is to maintain a reference to the original declaration and operate on that object, like so:

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

Also, the "resizable: false" options have to be removed because otherwise the call to sizePane() will not have any effect.

0
bogdy29 On

You can add this option to pane:

animatePaneSizing: true