リファレンス 2006年12月05日

簡単にAjaxでリサイズを実装する （jackslocum.com）

Jack Slocum's-Resizable

ブログやホームページで画像、ソースコードなど表示するときに閲覧者がリサイズして、自由に見やすいサイズに変更できれば便利。

簡単にリサイズ用のインターフェースを実装するのに、YUI-EXTが便利。Jack Slocumの拡張ライブラリとYahoo! User Interface Library （YUI）を組み合わせれば、簡単にそれを実現することができる。
（サンプル表示）

必要なライブラリとCSSを以下のように指定

// ライブラリファイルを指定
<script type="text/javascript"(YUIパス)/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="(YUI-EXTパス)/yui-ext.js"></script>

// YUI-EXTの必要なリソースを指定
<link rel="stylesheet" type="text/css" href="(YUI-EXTパス)/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="(YUI-EXTパス)/resources/css/resizable.css" />

後は、自身のサイトに合わせて basic.js を参考に設定を行う。

var ResizableExample = {
  init : function(){
    var basic = new YAHOO.ext.Resizable('basic', {
        width: 200,
        height: 100,
        minWidth:100,
        minHeight:50
    });
  }
};

// こちらの呼び出しを忘れないように
YAHOO.ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);

YAHOO.ext.Resizable('basic' で指定している basic をHTML中の要素に対し id="basic" と指定すれば、反映される。

設定での参考

  1. Pinned Handles
    pinned:trueでリサイズグリップを常に表示するようになります
  2. Dynamic Sizing
    dynamic:trueで指定すると、ドラッグ中にサイズ変更が随時反映されます
  3. Preserve Ratio
    preserveRatio:trueの指定で縦横比を変えずにリサイズするようになります
  4. Snapping
    widthIncrement:50 で50px単位でサイズをスナップします

そのほかにも設定はありますので、いろいろと研究してみてください。

YUI-EXT をご存知の方も多いと思いますが、今回はYUI-EXT RC3中に含まれるサンプルをピックアップしてみました。ライブラリ設置に関しては、YUI-EXTライブラリ設置方法を用意しましたので、設置方法が分からない場合は参照してください。

サイトの最新情報をRSSで受信できます
ページTOPへ