<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<!--<script type="text/javascript" src="jquery.ui.core.js"></script>-->
<script type="text/javascript" src="jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="css/ui-smoothness/jquery.ui.all.css">
<script type="text/javascript">
$(function(){
$("div#ex1").resizable();
$("input").toggle(function(){
$("div#ex1").resizable("disable");
},function(){
$("div#ex1").resizable("enable");
});
$("div#ex1").bind("resizestart",function(){
console.log("resizestart");
});
$("div#ex1").bind("resizestop",function(){
console.log("resizestop");
});
$("div#ex1").bind("resize",function(){
console.log("resize");
});
});
</script>
<style type="text/css">
#ex1{
width:200px;
height:200px;
background-color:#CCCCCC;
}
/*拡大／縮小が可能な要素*/
.ui-resizable{
}
/*拡大／縮小が可能な領域を示す枠*/
.ui-wrapper{
}
/*拡大／縮小は無効*/
.ui-resizable-disabled{
}
/*マウスカーソルが領域の範囲に重なると枠を表示*/
.ui-resizable-autohide{
}
/*拡大／縮小が可能な枠*/
.ui-resizable-handle{
}
/*枠（上辺）*/
.ui-resizable-n{
}
/*枠（右辺）*/
.ui-resizable-n{
}
/*枠（下辺）*/
.ui-resizable-n{
}
/*枠（左辺）*/
.ui-resizable-n{
}
/*枠の角（右上）*/
.ui-resizable-n{
}
/*枠の角（左上）*/
.ui-resizable-n{
}
/*枠の角（右下）*/
.ui-resizable-n{
}
/*枠の角（左下）*/
.ui-resizable-n{
}
/*サイズ変更中に領域の大きさを示す要素（gohsutオプションが記述された時）*/
.ui-resizable-ghost{
}
/*ドラッグ可能な位置を示す要素*/
.ui-resizable-knob-handle{
}
</style>
</head>
<body>
<div id="ex1"></div>
<input type="button" value="resizableの有効／無効を切り替える">
</body>
</html>