ECサイト、多階層をもったサイト制作時において、商品タイトルが長い、階層が深い等の理由で、パンくずリストも長くなりがちです。
WEBサイト幅に収まらず、折り返すほどに長くなってしまったパンくずを表示幅に合わせて最適化するjQueryのプラグインを発見したのでご紹介します。
IE6、IE7およびすべての標準準拠のブラウザとの互換性があるようです。
まずjQuery本体とプラグインをwebサイトに読み込みます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript" language="JavaScript"></script> <script src="js/jquery.jBreadCrumb.1.1.js" type="text/javascript" language="JavaScript"></script>
バインドしたいIDを指定。
<script type="text/javascript"> jQuery(document).ready(function() { jQuery("#breadCrumb").jBreadCrumb(); }) </script>
オプションでイージングエフェクトも仕様できる様です。
<script type="text/javascript"> jQuery(document).ready(function() { jQuery("#breadCrumb").jBreadCrumb({easing:'swing'}); }) </script>
多くのオプションがあり、簡単に機能の多くを調整することができます。
実装も容易ですので、WEBサイト制作、ホームページ作成時に強力なツールとなりそうです。
CompareNetworks jQuery’d Bread Crumb – jBreadCrumb