jQuery UI使用Cookie保存状态 [英] Jquery UI Save State Using Cookie

问题描述

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

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

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

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

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

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

也许有人尝试过吗?

thx高级.

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

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

    }

};

推荐答案

为您带来幸运 cookie持久性(草龟)已内置在库中，并且有一个演示页面进入了详细信息，它是非常简单，并启用了singe属性标志-您还可以要求更多:)

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布局保存状态演示

文档

编辑-来自文档

// 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保存状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！