Ajax,Javascript、サイト内の移動を効率的にナビゲーションするスクリプトサンプル設置方法
ユーザーメニュー
cookiecrumbs.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Page 1</title> <script src="CookieCrumbs.js"></script> <link rel="stylesheet" type="text/css" href="CookieCrumbs.css" /> </head> <body> <div><script>document.write(CookieCrumbs(5).GetCrumbs());</script></div> <ul> <li class="act"><a href="index.html">Page 1</a></li> <li><a href="test2.html">Page 2</a></li> <li><a href="test3.html">Page 3</a></li> <li><a href="test4.html">Page 4</a></li> <li><a href="test5.html">Page 5</a></li> </ul> <p><a href="JavaScript:;" onClick="CookieCrumbs().DeleteCookieTrail();location.reload();">Cookie Clear</a></p> </body> </html>
ページ履歴をCookieに保存し、パンくずナビで表示するスクリプト、cookiecrumbs.js。
カスタマイズして使用すれば、サイト内の足跡メニューとしても活用できると思います。
使用するCokieは１つで、履歴に表示する数は指定可能です。
まずは、ダウンロードタブから製作元へ行き、Javascriptをダウンロードします。
Download the sourceをクリック。
次にヘッダーにスクリプトを読み込む設定をします。
<script type="text/javascript" src="CookieCrumbs.js"></script>
これでヘッダー内の設定は完了です。
以下のコードを<body>内の任意の場所に記述します。
この記述した箇所に、履歴のパンくずナビが出現しますので、デザイン等を考慮して配置してください。
<script>document.write(CookieCrumbs(5).GetCrumbs());</script>
CookieCrumbs()内の数字の部分が表示する履歴の数です。
そして、実際に表示されるのは、そのページの<title>となりますので、
これも任意で調整してください。
基本的な設定はこれでOKです。
履歴を表示するコードは以下のようになっています。
<a href="test1.html?ccp=0">Page 1</a> >
この部分を、例えば<li>などで囲んで、<ul>のメニューにしたい場合は、
CookieCrumbs.js内の189行目、
sCrumbTrail = '> <a href=\'' + sLinkTitle[0] + '\'>' + sLinkTitle[1] + '</a> ' + sCrumbTrail;
を調節すると良いでしょう。
>を削除すれば鍵括弧は消えます。<a>の開始と終了に<li>を仕込み、履歴を<ul>で囲んでしまえばメニューもできると思います。
実際にサイト全体で使用する場合は、Cookieのパス設定をフォルダごとではなく、”/”としてあげなくてはなりません。
一例になりますが、CookieCrumbs.js内の５６行目と６６行目、
((path) ? ";path=" + path : "") +
の箇所を
";path=/" +
のように書き換えると、サイト全体の履歴を表示できるようになります。
独自ドメイン下なら特に問題ないかと思います。
これで、サイト内の履歴メニューを作ってやれば、結構ユーザビリティ上がるんではないでしょうか。
ページを見失うことなんて頻繁にありますし、こういった自動で記録してくれるメニューと、
クリップ機能のように自分の意思で記録していくタイプのメニューがあるといいですね。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
