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

no-imageシンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」前のページ

アナログ時計感覚で使えるタイムピッカー「Clock Timepicker Plugin for jQuery」次のページClock Timepicker Plugin for jQuery

関連記事

  1. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  2. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  3. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  4. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

  5. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  6. jQuery touchSwipe Carousel

最近の記事

  1. MRW-G1
  2. 桜と太陽
  3. ベルボン Mシリーズ
  4. ネック冷却ファン NRF10
  5. Kindle 8GBモデル

アーカイブ

PAGE TOP