jQuery
【jQuery】レスポンシブでjQueryベースのタイムラインジェネレータTimeline
March 14, 2017

Timelineはユーザーの入力に基づいたタイムラインを作成するレスポンシブでjQueryベースのタイムラインジェネレータ。
ページの先頭:
<link rel="stylesheet" type="text/css" href="path/to/timeline.css">
ページの下部:
<script src="path/to/timeline.js"></script>
初期化
$('#someIDorClass').timeline();
カスタマイズに利用出来るオプション。
Name | Default |
---|---|
startSide | left |
alternate | true |
showDate | true |
animate | true |
使用可能なオプションを使用した例は以下になります。
$('#myID').timeline({ startSide: 'left', alternate: true, showDate: true, animate: true });
日付はsetDateがtrue(デフォルトはtrue)である場合に、データ属性を使用して表示されます。
<div id="myTimeline"> <div data-date="February 2016"> My Content 1 </div> <div data-date="March 2016"> My Content 2 </div> <div data-date="April 2016"> My Content 3 </div> </div> ... <script> $('#myTimeline').timeline({ showDate: true // Set to true by default }); </script>
MIT