resizable的作用，就是可以通过鼠标的拖拉改变对象的“型号”，也就是size。只不过这种size仅仅是二维的，以后或许能够支持3D的，这是有可能的。
resizable小常识：一个对象可以缩放，自然就能够具有向不同的方向进行缩放了。也就能向八个方向进行缩放。那么它是怎样缩放的呢？当然是通过我们的鼠标去触发动作事件了。所以鼠标通过拖动进行缩放的那个点就是handle。resizable对象最多可以设置八个方向的handle，也就是”n, e, s, w, ne, se, sw, nw”，对应就是北，东，南……,感觉改成上下左右更好理解一点……
那么如何构建一个具有resizable功能的对象呢？下面让我们一起见证resizable发生的时刻！
第一，加入相应的js库文件以及css样式文件：
1: <link rel="stylesheet" href="js/themes/flora/flora.all.css"
2: type="text/css" media="screen" title="Flora (Default)"/>
3: <script type="text/javascript" src="js/jquery.js"></script>
4: <script type="text/javascript" src="js/ui/ui.core.js"></script>
5: <!--resizable.js很显然就是resizable的核心文件-->
6: <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
7: <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
第二，在html加入div：
1: <div id='example' class="resizable">
2: <div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Resize me</div>
3: </div>
第三，添加JavaScript代码，实现resizable：
1: $(document).ready(function(){
2: $("#example").resizable();
3: });
很简单三个步骤就可以实现对具有resizable属性的对象了。当然resizable还有很多属性可以设置的，达到实现不同的效果。请看下面的代码：
1: $("#example").resizable({
2: handles:"all", //定义可变化大小的方向,可选值"n, e, s, w, ne, se, sw, nw","all"代表全部
3: //helper:"proxy",
4: aspectRatio: true, //是否同步向x,y变化大小，也就是按照原有的比例缩放 默认是false
5: autoHide: true, //是否自动隐藏变化控制器
6: transparent: false,
7: grid: [10, 10], //定义x,y轴两个方向的变化步进,单位px
8: animate: true, //定义延迟是否变化大小
9: animateDuration: "slow", //变化速度
10: animateEasing: "swing",
11: ghost: true, //是否显示变化影子,利用此属性可以较为精确定位 (估计这比较难理解，尝试改变属性值就清楚了)
12: start:function(e,ui){$(this).append("Start!");}, //定义开始变化大小时执行的函数
13: resize:function(e,ui){}, //定义在变化大小时执行的函数
14: stop:function(e,ui){$(this).append("Stop!");} //与start相反
15: //draggable() 是使一个对象具有拖动的功能
16: }).draggable();
resizable不仅可以操作一个div节点，还可以对一个img元素以及<textarea/>.对于img我们就通过拖拉改变img的大小了。<textarea/>就类似一个公告栏了。这里讲到的就是resizable的应用了。呵呵！
先看如何通过resizable来改变img的大小：1.定义一个<img/> 2.调用resizable
1: <div id="example2" class="resizable">
2: <img id="image" src="image/resizable.jpg"/>
3: </div>
4: －－我是分隔符哦！！以上是html代码，以下是JavaScript代码－－－－－－－－－－
5: $(document).ready(function(){
6: //变化图片的大小,也可以直接使用$("#image").resizable();
7: $("#example2").resizable({
8: handles: "all",
9: resize:function(e,ui){
10: $("#image").width(ui.size.width);
11: $("#image").height(ui.size.height);
12: }
13: }).draggable();
14: $("#image").width($("#example2").width());
15: $("#image").height($("#example2").height());
16: });
<textarea/>的demo就留给读者自己完成了。
OK，resizable就是这样的了，不知道大家是否自己尝试了没有？
To Be continue……
PS:有些属性没有具体讲解，只是贴出代码，因为有些是用语言难以表达的，大家可以尝试改变属性值来认识他们的作用。
It’s going to be end of mine day, however before finish I am reading this impressive post to increase my know-how.