jQuery Timespace

JavaScript

四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

jQuery Timespaceは上下左右と四方にドラッグ移動できる水平タイムラインを実装できるjQueryプラグインです。時間軸で水平にイベントを眺めていけるほか、同じ時間にたくさんイベントがある場合などには上下にドラッグしながらイベントを見れます。

jQuery Timespace

デモ

デモでは「24-Hour Timeline」と「Event Timeline」の2つのサンプルが用意されています。どちらも時間を軸に左右にドラッグしながらタイムラインを眺められるようになっています。

Event Timelineでは左右の他にも上下にドラッグしてイベントをチェックすることも可能です。特定の時間内にたくさんイベントを表示させる場合は、どうしても横長の領域に収めることは難しいので、このように上下にも領域を作ってあげることでより柔軟性の高いタイムラインを構築できますね。

タイムラインのデザインはとてもシンプルで見やすく、いろんなサイトに合わせやすそうです。また、ドラッグによる移動だけではなく、左右の矢印ボタンからでも水平に移動させることも可能です。

オプションには、data、startTime、endTime、makerAmount、makerIncrement、markerWidth、maxWidth、maxHeight、navigateAmount、dragXMultiplier、dragYMultiplier、selectedEvent……など、他にもたくさんの項目が用意されています。

カスタマイズ性も高く、操作性・実用性も抜群な水平タイムラインを取り入れたい人は、ぜひ「jQuery Timespace」を活用されてみてはいかがでしょうか?

jQuery Timespace

関連記事

  1. S-Pagination

    JavaScript

    スライダー付きのページネーションを実装できる「S-Pagination」

    S-Paginationはスライダー付きのページネーションを実装できる…

  2. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  3. SweetDropdown

    JavaScript

    スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

    SweetDropdownは、多彩なドロップダウンを実装することができ…

  4. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  5. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  6. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP