jcart

前回の記事で、PHP+jQueryでつくられたDB不要のシンプルなプログラム『jcart』の商品削除にアラートを追加する方法を掲載したが、多くのショッピングカートにあってjcartに無い機能として、カート（買い物カゴ）がスクロールすると隠れてしまうことへの対応がある。

jcartはjqueryを使ったプログラムだから、この機能を追加するのは簡単。最小限の機能であればヘッダにJavascriptの一文を追加するだけでも可能だが、コントロールのし易さとオプションの使い易さを考え、jQuery Scroll Followを使うことにする。

『jQuery Scroll Follow』
http://kitchen.net-perspective.com/open-source/scroll-follow/

上記サイトに全てのデータが揃っているから簡単に導入できる。

ヘッダ内の

<script type="text/javascript" src="jcart/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jcart/js/jcart.js"></script>

の部分にui.core.js、jquery.scroll-follow.jsを追加

JAVASCRIPT

<script type="text/javascript" src="jcart/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jcart/js/ui.core.js"></script>
<script type="text/javascript" src="jcart/js/jquery.scroll-follow.js"></script>
<script type="text/javascript" src="jcart/js/jcart.js"></script>

さらに

JAVASCRIPT

<script type="text/javascript">
    $(document).ready(function (){
        $('#kago').scrollFollow({speed:300, offset:30});
    });
</script>

を追加。

speed:300, offset:30はオプションだから、デフォルトのままで構わないという人は

$('#kago').scrollFollow();

で良い。

speedはスクロール速度（ミリ秒）
offsetはスクロール後のブラウザの上部からのピクセル数
#kagoはスクロールさせたいアイテムのID
デフォルトのjcartではsidebarがこれに該当する。

スタイルシートの一例は以下

CSS

#kago{
    float: right;
    position: relative;
    width: 220px;
    margin: 0px;
    padding: 0px;
}

HTMLサンプルコードは以下

HTML

<div id="kago">
    <div id="jcart">
        $jcart->display_cart();
    </div>
</div>

以上で、jcartのショッピングカート（買い物カゴ）がスクロールについてくるようになる。

jcartのカート（買い物カゴ）をスクロールしてもついてくるようにする

JAVASCRIPT

JAVASCRIPT

CSS

HTML