今日の人気記事

  1. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」

シンプルなタイムラインを作成「Simple Timeline」

スポンサーリンク

シンプルなタイムラインを作成するプラグイン「Simple Timeline」を紹介します。

jQueryプラグイン「Simple Timeline」

このプラグインを使えば、プロフィール、年表、社歴などなどのタイムラインが年月日とコメントを記述するだけで簡単に作成できます。シンプルなので、どんなサイトにも合わせやすいですね。

スポンサーリンク

デモでは、例として適当なプロフィールを作成してみました。

「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

スポンサーリンク

関連記事(一部広告含む)