ドラッグ&ドロップで、要素のサイズを変更できるようにしたい場合は、jQuery UI の Resizable が便利だ。
-
jQuery UI の Resizable プラグインによるサイズ変更可能ボックス
jQuery UI の Resizable プラグインを使った、サイズを変更できるボックス。ドラッグ&ドロップで、ボックスの幅と高さを変更できる。ボックスの右端、下端、右下端にカーソルを合わせると、カーソルがリサイズ用カーソル形状に変わる。ドラッグして動かすと、ボックスの幅と高さを変更できる。
-
サイズ変更可能ボックスの最小サイズと最大サイズを指定
jQuery UI の Resizable プラグインによる、ドラッグ&ドロップでサイズを変更できるボックスの、最小サイズと最大サイズを指定する方法。最小サイズ指定は、minHeight と、minWidth オプション、最大サイズ指定は、maxHeight と、maxWidth オプションを使う。
-
サイズ変更可能ボックスの幅と高さの比率を指定
jQuery UI の Resizable プラグインを使った、ドラッグ&ドロップでサイズを変更できるボックスの、幅と高さの比率を指定には、aspectRatio オプションを使う。幅と高さの比率を指定しておくと、ボックスの大きさを変更しても、常に幅と高さの比率(縦横比率)は変わらない。
-
グリッドに沿って大きさを変更できるボックス
jQuery UI の Resizable プラグインを使った、ドラッグ&ドロップでサイズを変更できるボックスにおいて、グリッドに沿って大きさを変更させるには、grid オプションを使う。grid オプションに指定した間隔でサイズが変わる。
-
半透明のボックスで大きさを変更してから実際のボックスを変更
jQuery UI の Resizable プラグインを使った、ドラッグ&ドロップでサイズを変更できるボックスにおいて、大きさを変更するとき、あらかじめ、半透明のボックスで大きさを指定してから、実際のボックスの大きさを変更させるには、ghost オプションを使う。
-
アニメーション動作をしながらサイズ変化するボックス
jQuery UI の Resizable プラグインを使った、ドラッグ&ドロップでサイズを変更できるボックスにおいて、大きさを変更するとき、アニメーション動作をしながら、サイズを変化させるには、animate オプションを使う。
-
テキスト入力欄のサイズを、ドラッグ&ドロップで変更
jQuery UI の Resizable プラグインを使い、複数行のテキスト入力欄(textarea)のサイズを、ドラッグ&ドロップで変更できるようにする方法。テキストエリアの右下端にをドラッグして、左上、右下、左右へ動かすと、テキストエリアの幅と高さを同時に変更できる。
-
jQuery UI と jqPlot で作るサイズを変更できる折れ線グラフ
jQueryのjqPlotプラグインで作る複数系列の凡例付き折れ線グラフにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。
-
jQuery UI と jqPlot で作るサイズを変更できる縦棒グラフ
jQueryのjqPlotプラグインで作る複数系列の凡例付き縦棒グラフにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。
-
jQuery UI と jqPlot で作るサイズを変更できる円グラフ
jQueryのjqPlotプラグインで作る円グラフにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。
-
jQuery UI と jqPlot で作るサイズを変更できるブロックチャート
jQueryのjqPlotプラグインで作るブロックチャートにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。
-
jQuery UI と jqPlot で作るサイズを変更できるバブルチャート
jQueryのjqPlotプラグインで作るバブルチャートにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。
-
jQuery UI と jqPlot で作るサイズを変更できるピラミッドグラフ
jQueryのjqPlotプラグインで作るピラミッドグラフにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。