【jQuery】年表(タイムライン)が作れるjQuery Timelinrの使い方

timelinr1
年表が作れるjQueryプラグインのTimelinrを紹介します。

年表を縦横どちらでも、スライドさせながらその年の出来事を表示させることが出来るプラグインです。
履歴書や社歴を表現するのにはピッタリのプラグインです。

[スポンサーリンク]

このページでやること

Timelinrプラグインの導入方法と、使い方を紹介します。

Timelinrをダウンロードする

Timelinrを取得します。
ダウンロードは本家からどうぞ。
timelinr3

Timelinrの導入方法

ハイライトになっているjsとcssが必要になります。
jquery.min.jsは、Google Developersを使っています。
Google Developersの詳細は、こちらをどうぞ

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>timelinrのサンプル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="js/jquery.timelinr-0.9.54.js"></script>
<link href="css/style-timelinr.css" rel="stylesheet">

年表を表示するサンプルソース

JavaScript部分のサンプルソースです。

 <script>
     $(function(){
         $().timelinr({
             arrowKeys: 'true',
             autoPlayDirection: 'forward'
         })
     });
 </script>

HTML部分のサンプルソースです。

<!-- HTML部分 -->
<div id="timeline">
  <ul id="dates">
      <li><a href="#2012">2012</a></li>
      <li><a href="#2013">2013</a></li>
      <li><a href="#2014">2014</a></li>
  </ul>
  <ul id="issues">
      <li id="2012">
          <img src="images/space.png" width="30" height="256" /> 
          <h1>2012年</h1>
          <p>東京スカイツリーが開業</p>
          <p>ロンドンオリンピック開催、史上最多のメダル獲得</p>
          <p>ノーベル生理学・医学賞に京都大学教授山中伸弥が受賞</p>
      </li>
      <li id="2013">
          <img src="images/space.png" width="30" height="256" /> 
          <h1>2013年</h1>
          <p>TPP交渉参加を表明</p>
          <p>長嶋茂雄氏と松井秀喜氏に国民栄誉賞</p>
      </li>
      <li id="2014">
          <img src="images/space.png" width="30" height="256" /> 
          <h1>2014年</h1>
          <p>本田圭佑セリエAデビュー</p>
          <p>マー君ヤンキースへ</p>
      </li>
  </ul>
  <div id="grad_left"></div>
  <div id="grad_right"></div>
  <a id="next">+</a>
  <a id="prev">-</a>
</div>

デモ

実際に動かすことが出来ます

こちらは、Timelinrに梱包されている純正のデモ画面です。

解説

わたしのオリジナルのデモ画面では、画像を表示していません。
画像を非表示にすると、レイアウトが崩れるため、以下のように透過画像を入れてごまかしています。
注意して下さい。
もし非表示で使い方という方は、CSSレイアウトを整備するか、以下のように透過画像を入れて調整してみて下さい。
(できることなら透過画像を使わないやり方が望ましいところですが。。)

<img src="images/space.png" width="30" height="256" /> 

さいごに

jQuery Timelinrは、年表を作るのにすごく便利なプラグインですが、考え方次第では、年表以外のことも表現できるかもしれません。
それでは!