[JS]打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプト
Post on:2009年11月10日
YouTubeで実装されているプレイヤーのサイズ変更のように、打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプトをJanko At Warp Speedから紹介します。

Create YouTube-like adaptable view using CSS and jQuery
実装したデモページ
デモページでは下記のように、打ち出しエリアのサイズが任意で変更することができます。

打ち出しエリア:ノーマルサイズ

打ち出しエリア:ワイドサイズ
各パネルの実装はシンプルで、下記のようなHTMLとなっています。
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <div id="header"></div> <div id="main"> <div id="content"></div> <div id="sidebar"></div> <div id="comments"></div> </div> <div id="footer"></div> </textarea> |
また、サイズの可変にはjquery.jsが使用されています。
sponsors