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. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  2. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  3. Text Rotator
  4. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  5. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  6. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP