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. Relocator
  2. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  3. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  4. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  5. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  6. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP