jQuery Splitter | jQuery Plugins

要素をドラッグ＆ドロップで自由にリサイズできる「jQuery Splitter」。
通常、ブロック要素というと固定が当たり前ですが、jQuery SPlitterを使えば、Windowsアプリケーションのようにペインをリサイズ可能です。
使い方も色々とありそうです。



マウスで簡単リサイズ

 

JSのコードは次のように split メソッドを呼んで実装しているようで簡単です。

<script> 
jQuery(function($) {
   $('#widget').width(700).height(400).split({orientation:'vertical', limit:100});
   $('#foo').split({orientation:'horizontal', limit:10});
   $('#a').split({orientation:'vertical', limit:10});
   $('#spliter2').css({width: 200, height: 300}).split({orientation: 'horizontal', limit: 20});
});
</script>

jQuery Splitter Demo デモ

関連エントリ

• デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」
• jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル
• jQueryを使った映り込みエフェクトがかかったイメージギャラリー