ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify

よく見かける、ページ遷移のない
Webサイトを作る為のjQueryプラ
グイン。ですが、高機能な物では
なく、極めてシンプルで、ライブ
ラリも軽量です。サクッと作りた
い時のテンプレにもいいかも。

僕の語彙の無い説明よりサンプル見た方が早そうですね。
※漢字も間違ってたので修正しました

Pagify

ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。

Sample

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script>
<script src="pagify.js" type="text/javascript"></script>

jQuery本体とプラグインを読み込みます。

$(document).ready(function() {
        $('#hoge').pagify({
          pages: ['about', 'foo', 'bar', 'kachibito'],
          animation: 'fadeIn',
          'default': 'about',
          cache: true
        });
});

あとは設定すればいいだけ。楽ですね。セレクタはindex.htmlの呼び出したいボックス要素です。pageオプションでファイル名を指定。animationオプションはファイルを呼び出す際のエフェクト、defaultは最初に表示したいページの指定、cacheはそのままです。

他に、animationSpeedやanimationOutなどが用意されています。

コード自体も非圧縮で100行に満たない程度の軽量ライブラリです。JSが苦手な方にも使いやすくていいんじゃないでしょうか。

Pagify on github