Jquery UI Save State Using Cookie

is there any way to save state of jquery layout ui??

when i look at google, i got jquery.layout.state.js, but it seems not working :(

what i want is that when the west or north panel is closed, then it will saved it's state to cookie, so that if we refresh the page, the panel state will still closed

maybe anyone ever try it?

thx in advanced..

if there are some configuration in layout setting that can save state, then here is are my layout setting

var layoutSettings_Outer = {

    name: "outerLayout" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout

    // options.defaults apply to ALL PANES - but overridden by pane-specific settings

,   defaults: {

        size:                   "auto"

    ,   minSize:                50

    ,   paneClass:              "pane"      // default = 'ui-layout-pane'

    ,   resizerClass:           "resizer"   // default = 'ui-layout-resizer'

    ,   togglerClass:           "toggler"   // default = 'ui-layout-开发者_JAVA技巧toggler'

    ,   buttonClass:            "button"    // default = 'ui-layout-button'

    ,   contentSelector:        ".content"  // inner div to auto-size so only it scrolls, not the entire pane!

    ,   contentIgnoreSelector:  "span"      // 'paneSelector' for content to 'ignore' when measuring room for content

    ,   togglerLength_open:     35          // WIDTH of toggler on north/south edges - HEIGHT on east/west edges

    ,   togglerLength_closed:   35          // "100%" OR -1 = full height

    ,   hideTogglerOnSlide:     true        // hide the toggler when pane is 'slid open'

    ,   togglerTip_open:        "Tutup Panel"

    ,   togglerTip_closed:      "Buka Panel"

    ,   resizerTip:             "Resize This Pane"

    //  effect defaults - overridden on some panes

    ,   fxName:                 "slide"     // none, slide, drop, scale

    ,   fxSpeed_open:           750

    ,   fxSpeed_close:          1500

    ,   fxSettings_open:        { easing: "easeInQuint" }

    ,   fxSettings_close:       { easing: "easeOutQuint" }

}

,   north: {

        spacing_open:           1           // cosmetic spacing

    ,   togglerLength_open:     0           // HIDE the toggler button

    ,   togglerLength_closed:   -1          // "100%" OR -1 = full width of pane

    ,   resizable:              false

    ,   slideTrigger_open:      "click"     // default

    ,   slidable:               true

    //  override default effect, speed, and settings

    ,   fxName:                 "drop"

    ,   fxSpeed:                "normal"

    ,   fxSettings:             { easing: "" } // nullify default easing

    }

,   west: {

        size:                   250

    ,   spacing_closed:         21          // wider space when closed

    ,   togglerLength_closed:   21          // make toggler 'square' - 21x21

    ,   togglerAlign_closed:    "top"       // align to top of resizer

    ,   togglerLength_open:     0           // NONE - using custom togglers INSIDE west-pane

    ,   togglerTip_open:        "Tutup Panel Navigasi"

    ,   togglerTip_closed:      "Buka Panel Navigasi"

    ,   slideTrigger_open:      "click"     // default

    ,   initClosed:             false

    ,   resizable:              false

    //  override default effect, speed, and settings

    ,   fxName:                 "drop"

    ,   fxSpeed:                "normal"

    ,   fxSettings:             { easing: "" } // nullify default easing

    }

,   center: {

        paneSelector:           "#mainContent"          // sample: use an ID to select pane instead of a class

    ,   onresize:               "innerLayout.resizeAll" // resize INNER LAYOUT when center pane resizes

    ,   minWidth:               200

    ,   minHeight:              200

    }

};

Lucky for you cookie persistence(tortoise) is built into the library and there is a demo page that goes into the details, it's very simple and is enabled with a singe property flag - how much more could you ask for :)

options.cookie.autoSave

jQuery Layout Saved State Demo

Documentation

EDIT - from the documentation

// bind save() to window.onunload
$(window).unload(function(){ layoutState.save('myLayout') }); 

// DEFAULT LAYOUT SETTINGS
var myDefaultSettings = {
    initClosed: true,
    west__size: 150,
    east__size: 150
}

var myLayout; // create global var for the layout-instance object

$(document).ready( function() {
    // load & used 'saved-state' to override defaults
    myLayout = $("body").layout(
        $.extend( myDefaultSettings, layoutState.load('myLayout') )
    );
});