[JS]打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプト
Post on:2009年11月10日
YouTubeで実装されているプレイヤーのサイズ変更のように、打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプトをJanko At Warp Speedから紹介します。
![実装のイメージ](/wp-content/uploads-2009-2d/2009111001.png)
Create YouTube-like adaptable view using CSS and jQuery
実装したデモページ
デモページでは下記のように、打ち出しエリアのサイズが任意で変更することができます。
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009111002-01.png)
打ち出しエリア:ノーマルサイズ
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009111002-02.png)
打ち出しエリア:ワイドサイズ
各パネルの実装はシンプルで、下記のような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