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

Custom Carouselカードスタイルのカルーセル・スライダー実装「Custom Carousel」前のページ

粒子のように分裂していくパーティクルエフェクト「Particle Effects for Buttons」次のページno-image

関連記事

  1. Multi-Screen.js
  2. NO IMAGE
  3. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  4. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  5. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  6. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP