2011-08-14 16 views
1

jqueryレイアウトの状態を保存する方法はありますか?Jquery UIクッキーを使用して状態を保存

私はGoogleのを見たとき、私はjquery.layout.state.jsを得たが、それは

私がしたいことは、西または北のパネルが閉じているとき、それはそれはだ保存されるということです:(機能していないようですクッキーの状態、我々はページを更新する場合は、パネルの状態はまだ

を閉じます多分誰もが今までそれをしようとするように?

THX先進..

であることをレイアウト設定でいくつかの設定がある場合は状態を保存できる、 は、ここにある私のレイアウトはあなた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 

    } 

}; 

答えて

4

を設定していますプロパティフラグを焦がす - あなたは:)

options.cookie.autoSave 

jQuery Layout Saved State Demo

Documentation

のためにどのようにはるかに求めることができます

EDIT - ドキュメントから

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

私はそれをどのように行うのですか? それは私の場合@で動作していません。@ – Xinez

+0

申し訳ありませんが、もう2つの小さなファイルを参照する必要があります。[http://layout.jquery-dev.net/tips.cfm#State_Management](http: //layout.jquery-dev.net/tips.cfm#State_Management) – martin

+0

jsonはどうすればいいですか? json2.jsの中にアラート(「エラー」)しかありません。私は上記の私の例をしようとしたときそうそう、動作しません を思わそれが起こるのはなぜ私にはわからない、Firefoxの5、 を使用して i'amはあなたが自分でそれを試してみましたですか?おそらくあなたは私にいくつかの他の例を与えることができます あまりにも多くのおかげでおかげで申し訳ありません.. XD – Xinez

関連する問題