gridstack.js

JavaScript

ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを作成することができるjQueryプラグインです。ダッシュボードのレイアウトなどを、ドラッグ&ドロップで直感的に構築していけるととても便利ですね。

位置や形を自由に調整

デモ

デモには、Float grid demoやKnockout.js demoなどをはじめ、全部で9つのデモを見ることができます。

例えばFloat grid demoを見てみると、画面内に「Add Widget」というボタンが設置されていて、ここをクリックすると新しいウィジェットが画面に追加されます。追加されたウィジェットは、ドラッグ&ドロップで好きな位置に移動することができます。

また、ウィジェットにマウスオーバーすると右下に矢印が表示され、ここからウィジェットのサイズを拡大したり縮小したりすることも可能です。

位置や形を自由に調整できるのがとても便利ですね。直感的にサクサクと効率よくレイアウトを構築していけるのは、ユーザーにとっても利便性が高そうです。ちなみに、デモはレスポンシブにも対応しています。

オプションの数もかなり豊富で、acceptWidgets、alwaysShowResizeHandle、animaate、auto、cellHeight、ddPlugin、disableDrag、disableResize、draggable、handle、handleClass、height、float、itemClass、minWidth、disableOneColumnMode……など、他にもまだまだたくさんのオプションやイベントが用意されています。

カスタマイズ性に優れたウィジェットレイアウトを作成できるモバイルフレンドリーなjQueryプラグインを求めている人は、要チェックです。

gridstack.js

関連記事

  1. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  2. TabbedContent
  3. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

  4. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  5. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  6. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP