[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
Post on:2013年3月14日
sponsors
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。
これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。
Navi.jsの特徴
Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。
- タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート
- コンテンツにあったページタイトルを表示
- 戻る・次へボタンのサポート
- コンテンツのネストをサポート
- スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意
- AJAXサポート
- Google Analyticsサポート
- 対応ブラウザはIE9/10、モダンブラウザ
Navi.jsのデモ
デモはIE9+をはじめ、モダンブラウザでご覧ください。
デモは4つのカテゴリがあり、いくつか未のものもあります。
まずは、基本となる複数のページを表示するデモから。
左右で異なるハッシュを設定したデモ
同じハッシュを設定したデモ
コンテンツをネストで配置したデモ
上のナビ＋左サイドバーのナビでも遷移します。
ページの表示アニメーション：スライドアップ
レフトやアップ・レフトのスライドにも対応しています。
スライドだけでなく、フェードでの表示
Navi.jsの使い方
Step 1: 外部ファイル
「jquery.js」と当スクリプトを外部ファイルとして記述します。
<script src="jquery.js"></script> <script src="navi-1.8.js"></script>
Step 2: HTML
HTMLの基本構造は、ナビゲーションとコンテンツです。
まずはナビゲーション、リスト要素で実装します。
<nav id='naviMenu'>
<ul>
<li class="active"> <a href='#!/page1'>Page1</a> </li>
<li> <a href='#!/page2'>Page2</a> </li>
<li> <a href='#!/page3'>Page3</a> </li>
</ul>
</nav>
[/htmnl]
<p class="mT2em">各コンテンツもページごとにリスト要素で実装します。</p>
[html]
<section id='naviContent'>
<ul>
<li id='page1'> Content for page 1 here </li>
<li id='page2'> Content for page 2 here </li>
<li id='page3'> Content for page 3 here </li>
</ul>
</section>
Step 3: JavaScript
ナビゲーションをjQueryのセレクタで指定し、リンクに使用するハッシュとコンテンツのラッパーを指定しスクリプトを実行します。
$("#naviMenu").navi({
hash: "#!/",
content: $("#naviContent")
});
スクリプトのオプション
jQuery.navi({
hash: "#!/", //使用するハッシュ
content: $("#content"), //コンテンツの指定
defaultPage: true, //デフォルトのページ
useAnimation: true, //アニメーションの有無
animationSpeed: 100, //アニメーションのスピード
animationType: "slideUp", //アニメーションのエフェクト
usePageTitle: true, //ページタイトル変更の有無
defaultPageTitle: "Navi.js", //デフォルトのページタイトル
useBreadCrumbs: true, // パンくずの有無
breadCrumbsContent: $("#breadcrumbs"), // パンくずの指定
useAjax: true, // AJAXの有無
ajaxExtension: ".html", // AJAXページの拡張子
})
sponsors
