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. no-image
  2. infiniteSlider2.js
  3. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  4. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

  5. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  6. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP