【JQuery】FlexBoxを使って簡単にリサイズ可能なレイアウトを作れる「jquery-resizable」プラグイン

2019年7月20日Javascript, 開発

おはようございます。

昨日はまた急に暑くなりましたね。
暑いとぼーっとして生産性が落ちるので大変です。

職場に卓上扇風機を買おうか迷っていて、先日のプライムデーで買っておけばよかったと後悔。

本題ですが、
今日は便利な JQueryプラグインの紹介。

スポンサーリンク

jquery-resizable

Rick Strahl さんが公開している JQuery プラグイン。(MITライセンス)

jquery-ui の resizable とは別物です。

簡単にリサイズ可能なボックスやレイアウト、列リサイズできるテーブルなどを実現することができます。

ダウンロードはこちら

ということで試しに弄ってみました。

プログラム

css

css/style.css

HTML

sample.html

Javascript

js/script.js

起動してみる

起動後の画面
起動後の画面
リサイズ
リサイズ

つまみをドラッグしてリサイズ。

まとめ

今回は左右の幅を調整できるようにしましたが、上下も可能です。

昔はこういったレイアウトを作るのに iframe を使ったりしたことがありますが、便利になりましたねぇ。

次回はテーブル列幅の調整もやってみようかと思います。

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ

2019年7月20日Javascript, 開発JQuery, JQueryプラグイン

Posted by doradora