2011-08-14 46 views
1

有沒有什麼辦法可以保存jquery佈局的狀態?Jquery UI保存狀態使用Cookie

當我看到谷歌,我得到jquery.layout.state.js,但似乎不工作:(

我想要的是,當西北方或面板關閉,那麼它會保存它的狀態的cookie,所以,如果我們刷新頁面,面板狀態仍將關閉

也許沒有人嘗試嗎?在先進

THX ..

如果在佈局設置一些配置中可以保存狀態, 那麼這裏就是是我的佈局設置

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

幸運的是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')) 
    ); 
}); 
+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裏面,只有alert(「error」)。 哦,是的,當我試過上面的例子,它似乎不起作用,我不知道爲什麼會發生, 我使用的是Firefox 5, 你曾經嘗試過嗎?也許你可以給我一些其他的例子, 對不起,如果我問太多,謝謝.. XD – Xinez