Jquery UI 使用 Cookie 保存状态

Question

有什么方法可以保存jquery布局ui的状态吗？

当我查看 google 时，我得到了 jquery.layout.state.js，但它似乎不起作用:(

我想要的是，当西面板或北面板关闭时，它会将其状态保存到cookie中，这样，如果我们刷新页面，面板状态仍然会关闭

也许有人尝试过吗？

谢谢提前..

如果布局设置中有一些配置可以保存状态，然后这是我的布局设置

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

    }

};

Answer 1

幸运的是，cookie 持久性(乌龟)内置于库中，并且有一个演示页面详细介绍，它非常简单，并且通过单个属性标志启用 - 还有更多你可以要求吗:)

options.cookie.autoSave

jQuery Layout Saved State Demo

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') )
    );
});