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. JavaScript

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

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

  2. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  3. flexible-bootstrap-carousel
  4. universal-tilt.js

    JavaScript

    パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

    universal-tilt.jsはパララックスやスケールなど多彩なチ…

  5. Choice.js
  6. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP