2011年12月16日金曜日

ブロガー(blogger)にjquery.cookie.jsを追加

ブロガー(blogger)にjquery.cookie.jsを追加してみました。果物の名前をクリックすると、クッキーに書きこまれます。同じ名前を再びクリックすると削除されます。






ソースはこちら。
$(function(){
    var sCookie = 'fruitcookie';
    var sPath = '/';
    var sDomain = 'programmer-jobs.blogspot.com';
    var date = new Date();
    date.setTime(date.getTime() + ( 86400 * 7 ));
    var arr = [];

    $(".button").click(function() {
        var pos = $(this).attr("title");
        if ( jQuery.inArray(pos, arr) >= 0 ) 
        {
            var removepos;
            $.each( arr, function(i, val) {
               if( val == pos ) {
                  removepos = i;
               }
            });
            arr.splice(removepos,1);
        } else {
            arr.push(pos);
        }
        $.cookie(sCookie, arr, { path: sPath, domain: sDomain, expires: date });
    });
    $("#nofruit").click(function() {
        arr = [""];
        $.cookie(sCookie, arr, { path: sPath, domain: sDomain, expires: -1 });
    });
});

jquery.cookie.js 自体の設置は次のとおり。 管理画面の「テンプレート」メニューから、「HTMLの編集」画面で、設定を変更します。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
----- ここに埋め込む -----
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>

</head> タグ(閉じる)の直前に jQuery を埋め込みます。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  <script language='javascript' src='http://(あなたのサーバー)/jquery.cookie.js' type='text/javascript'></script>
</head>

0 件のコメント:

コメントを投稿