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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  2. jQuery Accordion
  3. no-image

    JavaScript

    続きを読むボタンを実装できる「ReadMorePlugin」

    ReadMorePluginは「続きを読む」、「もっと読む」、「Rea…

  4. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  5. stickyNavbar.js
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP