2017horizontaljQueryPluginTimelineVersion1.x現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そちらを見てください。GitHubの方のマニュアルは英語版なので、日本語版のマニュアルはこちらのサイトに公開しておこうかと。以下がそのマニュアルになります。jQuery.TimelineこのjQueryプラグインを使うことで、二種類の横型タイムラインを簡単に作成できます。対応ブラウザ状況は下記の通りです。以降での正常動作を確認済みです。最新リソースをダウンロードしてください。ディレクトリ内のリソースを使用します。読み込むことで準備完了です。</ul></div>──のようにマークアップします。以外のタグも利用可能です。タグ等でマークアップしても構いません。次に、タイムラインのイベントをクリックした際に、イベント詳細が表示される領域に下記のようにマークアップします。class="timeline-event-view"></div>このイベント詳細領域が不要であれば、省略可能です。プラグインを適用します。$("#myTimeline").timeline();});</script>これで基本的なマークアップは完了です。オプションプラグインが初期化される際に、タイムラインオブジェクトごとに個別のオプション設定を適用することができます。下記のように設定します。'center'});初期化オプションに設定可能なパラメータは下記の通りです。タイムライン上のイベント表示を切り替えます。指定可能で、”bar”の場合はイベント開始・終了を持つ期間表示型となり、”point”の場合はイベント開始のみを点描する表示形式となります。タイムテーブルの最上位スケールを指定します。タイムテーブルの表示開始日時を指定します。実際にレンダリングされる開始日時はscaleオプションの指定によって変化します1。タイムラインブロックの見出しとして表示される日時表示に接頭辞を付与する場合にその文字列を指定できます。タイムラインブロックの見出しを表示するかどうかを指定します。イベント詳細のメタ(”full“)や、タイムラインブロックの見出し(”year“,”month“,”day“)、タイムテーブルのスケール(”years“,”months“,”days“)に表示される日時表示の書式を定義できます。利用可能な書式はPHPのdate関数に準拠しています。トップスケール(scale)が「日」の場合のみ有効な、分の区切り間隔を指定します。5分以上の指定を推奨します。年表示が4桁に満たない場合に0埋めをするかどうかです。タイムテーブルの表示範囲を指定します。トップスケール換算で指定レンジ分、タイムテーブルがレンダリングされます。タイムライン・イベントエリアに出力される行数を指定します。タイムライン・イベントエリアの縦方向の一行の高さを指定します。タイムライン・イベントエリアの全体の高さを指定します。ピクセル値の固定値を指定することも可能です。中位スケールの1目盛を何分割するかです。最下位スケールの1目盛の横幅をピクセル値で指定します。5ピクセル以上が必要です。タイムラインブロックが出力された時の最初の表示位置を指定できます。イベントエリアの左右に表示されるナビゲーション・アイコンのクラス名を指定できます。外部フォント利用時等に使います。タイムライン内に現在日時が含まれている場合に表示される現在時刻ポインターを表示するかどうかです。プラグイン全体で出力される日時書式を国際化するための、翻訳テキストを定義することができます。詳しくは国際化にて説明します。メソッド初期化されたタイムラインオブジェクトに対して、メソッドを使うことで様々な操作を行うことができます。各メソッドはチェーンすることで、同時に複数のメソッドを利用することも可能です。]);});メソッドを利用する時は、基本的にタイムラインオブジェクトに対して、第1引数にメソッド名、第2引数にメソッド用のパラメータを指定します。メソッドによっては、第2引数または第3引数にコールバック関数を指定できるものもあります。利用可能なメソッドは以下の通りです。プラグインの初期化後、タイムラインブロックのレンダリング直前に呼び出されます。コールバック関数を引数で渡すことができ、プラグイン初期化後に独自の処理を追加することができます。プラグインによって作成されたタイムラインオブジェクトをDOM上から破棄します。非表示のタイムラインオブジェクトを表示します。表示されているタイムラインオブジェクトを非表示にします。タイムラインブロックを再レンダリングします。この際、初期化後にメソッドで操作されたイベントはすべて破棄され、初期マークアップ時のイベントのみが再配置されます。タイムラインを過去(左)方向へスクロールさせます。左ナビアイコンをクリックした際の動作と同じです。タイムラインを未来(右)方向へスクロールさせます。右ナビアイコンをクリックした際の動作と同じです。タイムラインの中央位置を任意の位置に移動します。rangeAlignオプションで有効な値を指定できます。タイムラインオブジェクトの現在のオプション値を取得して、JavaScriptオブジェクトとして返します。タイムライン上にイベントを追加します。第3引数にコールバック関数を指定することで、イベント追加後に独自の処理を実行することも可能です。タイムライン上の指定イベントを削除します。削除イベントの指定にはイベントIDを使い、複数のイベントを同時に削除できます。第3引数にコールバック関数を指定することで、イベント削除後に独自の処理を実行することも可能です。タイムライン上の特定のイベントの内容を更新します。同時に複数のイベントを更新することも可能です。第3引数にコールバック関数を指定することで、イベント更新後に独自の処理を実行することも可能です。タイムライン上のイベントがクリックされた時にコールバックされます。他のメソッドと異なり、後述するイベント・パラメータのcallbackで指定された処理が呼び出されます。イベント・パラメータタイムライン上に配置されるイベントは表示用のパラメータを持っています。このイベント・パラメータの指定方法には、HTMLに直接マークアップする方法と、メソッドを利用して指定する方法の2種類あります。HTMLHTMLに直接マークアップする場合、イベントリストをラップするクラス名”timeline-events“を持つ親タグの下に、子タグの属性として”data-timeline-node”を指定し、ここにパラメータを記入します。13:00',content:'イベント本文が入ります。“data-timeline-node”属性を持たないイベントリストはタイムラインオブジェクト初期化時に無視され、タイムライン上に配置されません。メソッドタイムラインオブジェクト初期化後にメソッドでイベントを指定する場合、イベントリストをJavaScriptの配列として渡します。配列の要素は、イベント・パラメータのJavaScriptオブジェクトになります。successfully!');});イベント・パラメータ一覧イベント・パラメータとして利用可能な設定値は下記の通りです。1以上の整数値をとり、イベントリスト中において一意な値である必要があります。パラメータとしては省略可能で、省略した場合はプラグイン初期化時に自動で発番されます。