シンプルなタイムラインを作成「Simple Timeline」
当ページのリンクには広告が含まれています。
スポンサーリンク
シンプルなタイムラインを作成するプラグイン「Simple Timeline」を紹介します。
jQueryプラグイン「Simple Timeline」
このプラグインを使えば、プロフィール、年表、社歴などなどのタイムラインが年月日とコメントを記述するだけで簡単に作成できます。シンプルなので、どんなサイトにも合わせやすいですね。
スポンサーリンク
デモでは、例として適当なプロフィールを作成してみました。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>B1nj Timeline - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" media="screen" href="css/general.css">
<link rel="stylesheet" media="screen" href="css/b1njTimeline.css">
</head>
<body>
<div id="page">
<h1>B1nj Timelineのデモでーす。</h1>
<ol id="timeline">
<li><time datetime="1950-01-01">1950 地球に生まれる</time>
<p>おぎゃー</p>
</li>
<li><time datetime="1955-01-01">1955 2足歩行をはじめる</time>
<p>あんよがじょうず</p>
</li>
<li><time datetime="1957-01-01">1957 ○○小学校に入学</time>
<p>とりゃー</p>
</li>
<li><time datetime="1964-01-01">1964 ○○中学校に入学</time>
<p>自分さがし？</p>
</li>
<li><time datetime="1967-01-01">1967 ○○高校入学</time>
<p>何も見つからない。</p>
</li>
<li><time datetime="1970-01-01">1970 ○○大学入学</time>
<p>zzz</p>
</li>
</ol>
</div>
</body>
</html>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.b1njTimeline.js"></script>
<script>
$(function() {
$('#timeline').b1njTimeline({
'height' : 600
});
});
</script>
</body>
</html>
jsファイルのダウンロードやその他オプションはこちらからどうぞ。
» b1njTimeline
スポンサーリンク