0

私がすでに持っているものに追加するための少しの助けを探しています。私が取り組んでいるのは、さまざまな解像度のグリッドを変更する特定のクラスへの 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);
    });
4

1 に答える 1

0

JS ベースのソリューションはあまり良くありません (読み進めてください) が、とにかく、最初に Cookie に関する質問に答えようとします。

ある種のjQuery cookie プラグインまたは単純な 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 を使用したソリューションは気に入らないと言わざるを得ません。レスポンシブ ウェブ デザインについては非常に話題になっていますが、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: //bostonlobe.com/またはhttp://smashingmagazine.comにアクセスしているときにブラウザ ウィンドウのサイズを変更してみてください:) これは純粋な CSS です。

于 2012-04-18T19:31:43.767 に答える