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

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

Latest Posts

Related Posts