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. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  2. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  3. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  4. no-image

    JavaScript

    さまざまなデバイスに対応したパララックスを実装できる「PARALLAX」

    PARALLAXは、さまざまなデバイスに対応したシンプルなパララックス…

  5. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  6. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP