年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」

年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」サンプル 横軸で年表なんかを作ることがあるかもしれません。
そんな時にはjQueryプラグインjqtimelineを使用すると簡単に導入できて良いかもしれません。

使用方法 jqtimelineからファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href="jquery.jqtimeline.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.jqtimeline.js"></script>
<script type="text/javascript">
$(function(){
var ev = [
{id:1, name:'2013年2月3日です', on : new Date(2013,1,3) },
{id:2, name:'2013年1月1日です・・・!', on : new Date(2013,0,1)}
];
$('#id名').jqtimeline({
events:ev,
numYears:2, //表示する期間
startYear:2013 //最初の年
});
});
</script>

上記にもあるようにnew Date(2013,1,3)だと2月が表示されます。
この点だけ注意が必要です。
要は0が1月です。
最後に表示したい場所に下記を記述します。
<div id="id名"></div>
クリックで指定の要素を表示といったこともできるので、利用シーンはわりとありそうです。

年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」サンプル

sponsors

「年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」」をシェアする

記事作成:
記事URL:

TOP > > > 年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」