jQuery onload並調整大小與cookie集

尋找一些幫助添加到我已經。我工作的是一個onLoad和Resize交換到一個特定的類，它改變了不同分辨率的網格。我需要的是設置cookie，以便在頁面間切換時網格保持不變。jQuery onload並調整大小與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); 
    });

來源

2012-04-18 Buretta

基於JS的解決方案是不是很好（閱讀），但無論如何，我會嘗試先回答關於餅乾的問題：

你可以使用某種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！

來源

2012-04-18 19:31:43

jQuery onload並調整大小與cookie集

回答

相關問題