skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」

｜ ｜ ｜ ｜ ｜ ｜ ｜

ページのレイアウト幅をがっちりと決めると、ユーザーに不便させる可能性があります。
jQueryプラグインのIngeny Splitterを使用するとドラッグでページレイアウトを自由にユーザーが調整できるようになります。

使用方法
Ingeny Splitterからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.ingeny.splitter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id名").splitter({
"defwidth": {"left":100,"right":200},
"minwidth": {"left":10,"right":10},
"maxwidth": {"left":500,"right":500},
"collapse":{"left":"left","right":"right"}
});
});
$(window).load(function(){
$(window).resize();
});
</script>
<style>
.splitter {
position:relative;
width:5px;
cursor:W-resize;
background-color:#ccc;
vertical-align:middle;
}
#id名 {
margin:0;
padding:0;
height:300px;
width:100%;
}
</style>

上記を記述したら以下のようにすれば完成です。
<div id="id名">
<div id="left">Left</div>
<div class="splitter"></div> //レイアウト調整用のdivです。
<div id="center">Center</div>
<div class="splitter"></div> //レイアウト調整用のdivです。
<div id="right">Right</div>
</div>

div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」サンプル

記事作成：2009年06月26日

前の記事：jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
次の記事：第3回「マネタイズHACKS」に参加してみた。