Question

有没有办法保存jquery布局的状态ui ??

当我看谷歌时，我得到了jquery.layout.state.js，但似乎无法正常工作：（

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

也许有人试过吗？

thx in advanced ..

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

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持久性（tortoise）内置于库中，并且有一个演示页面可以进入细节，它非常简单并且带有一个单一的属性标志 - 还有多少你可以要求：）

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

Jquery UI使用Cookie保存状态

1 个答案: