jQuery

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

March 14, 2017

Timelineはユーザーの入力に基づいたタイムラインを作成するレスポンシブでjQueryベースのタイムラインジェネレータ。

Installation & Setup

ページの先頭：

<link rel="stylesheet" type="text/css" href="path/to/timeline.css">

ページの下部：

<script src="path/to/timeline.js"></script>

初期化

$('#someIDorClass').timeline();

Usage

カスタマイズに利用出来るオプション。

Name	Default
startSide	left
alternate	true
showDate	true
animate	true

Example

使用可能なオプションを使用した例は以下になります。

$('#myID').timeline({
    startSide: 'left',
    alternate: true,
    showDate: true,
    animate: true
});

Adding Dates

日付は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

Demo/Download