前回の記事で、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のショッピングカート(買い物カゴ)がスクロールについてくるようになる。