使用 cookie 集的 jQuery 加载和调整大小答案

【问题标题】：jQuery onload and resize with cookie set使用 cookie 集的 jQuery 加载和调整大小
【发布时间】：2012-04-18 18:46:59
【问题描述】：

寻找一些帮助来添加我已经拥有的东西。我所做的是一个 onLoad 和 Resize 交换到一个特定的类，它改变了不同分辨率的网格。我需要的是设置一个 cookie，以便网格在从一个页面到另一个页面时保持不变。

    // swaps the grid span names when the resolution goes below 1200px
    // or when page is loaded below 1200px

     $(window).bind("load resize", function(){

        var width = $(window).width(),
        bodycontent_grid = width < 1200 ? 'span8' :
                    width > 1200 ? 'span6' : '';
         rightcol_grid = width < 1200 ? 'span3' :
                    width > 1200 ? 'span5' : '';

        $('.bodycontent').removeClass('span6 span8').addClass(bodycontent_grid),
        $('.rightcol').removeClass('span3 span5').addClass(rightcol_grid);
    });

【问题讨论】：

标签： jquery class cookies resize pageload

【解决方案1】：

基于 JS 的解决方案不是很好（请继续阅读），但无论如何我会先尝试回答有关 cookie 的问题：

你可以使用某种jQuery cookie plugin 或者只是简单的JS，这有点难。 jQuery 语法是：

$.cookie('name', 'value'); // storing cookie
$.cookie('name'); // reading cookie

使用它，您可以将源代码更改为以下内容：

function resizeContainer(var force=false) // additional parameter is used to force resetting cookie
{
    var width;
    if($.cookie('knownWidth') && !force) // if there's a cookie and we're not forcing reset, use width from cookie
    {
        width = $.cookie('knownWidth');
    }
    else
    {
        width = $(window).width();
        $.cookie('knownWidth', width);
    }
    var bodycontent_grid = width < 1200 ? 'span8' :
                width > 1200 ? 'span6' : '';
     rightcol_grid = width < 1200 ? 'span3' :
                width > 1200 ? 'span5' : '';

    $('.bodycontent').removeClass('span6 span8').addClass(bodycontent_grid),
    $('.rightcol').removeClass('span3 span5').addClass(rightcol_grid);
}

$(window).bind("load", function(){
    resizeContainer(); // onload use cookie
});
$(window).bind("resize", function(){
    resizeContainer(true); // when resizing force changing the cookie
});

当然，可以在服务器端访问 cookie，然后可以在服务器端使用适当的类生成容器。

我必须说我不喜欢使用 cookie 的解决方案。关于 responsive web design 的讨论太多了，那你为什么不使用 CSS @media-queries？

你可以在你的 .css 文件中做这样的事情：

@media only screen and (min-width : 1200px) {
    /* Styles when over 1200px */
}

@media only screen and (max-width: 1199px) {
    /* Styles when under 1200px */
}

顺便说一句，当你在 http://bostonglobe.com/ 或 http://smashingmagazine.com 时尝试调整浏览器窗口的大小 :) 它是纯 CSS！

【讨论】：