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>

サンプル

Javascriptサンプルページ一覧

skuare.net