从 jQuery 可调整大小的 cookie 中保存 div 高度

Question

我正在使用来自 interface.eyecon.ro/docs/resizable 的 jQuery resizable 作为我正在处理的页面上的菜单。我需要设置一个 cookie (plugins.jquery.com/project/Cookie) 来存储菜单 div 的高度，这样 div 就不会在每次重新加载页面时调整为原始 css 高度。

我一直在尝试修改 http://www.shopdev.co.uk/blog/text-resizing-with-jquery/#comment-1044 中的代码（我知道该代码中有一些错误，但我已经让那个示例可以工作）有一段时间了，但我无法让它工作.

我的代码在没有 cookie 的情况下看起来像这样：

$(document).ready(function() {
    $('#resizeMe').Resizable( {
        maxHeight: 600,
        minHeight: 24,
        handlers: {
            s: '#resizeS'
        },
        onResize: function(size) {
            $('#content_two', this).css('height', size.height - 6 + 'px');
            $('#content').css('padding-top', size.height + 44 + 'px');
        }
    });
});

这是我第一次使用stackoverflow，我希望我在这里看到的所有好的答案也都适用于这个问题:)

谢谢

Answer 1

你可以试试这样的：

$(document).ready(function() {

    var cookieName = 'divHeight';

    //On document ready, if we find height from our cookie, 
    //we set the div to this height.
    var height = $.cookie(cookieName);   
    if(height != null)
        $('#resizeMe').css('height', height + 'px');


    $('#resizeMe').Resizable( {
        maxHeight: 600,
        minHeight: 24,
        handlers: {
                s: '#resizeS'
        },
        onResize: function(size) {
                $('#content_two', this).css('height', size.height - 6 + 'px');
                $('#content').css('padding-top', size.height + 44 + 'px');
                //I am assuming that onResize is triggered when user has finished resizing the DIV. If yes, you can store this div height in the cookie. 
                $.cookie(cookieName, size.height);
        }
    });
});