JQuery Resizable详解

一天一个jQuery UI 组件，今天折腾 resizable 。resizable 是让对象拥有可调整大小的属性，类似于windows文件夹一样可以通过拖动边或者角来调整文件夹的大小。

要使用resizable ，需要应用一下文件：

XML/HTML代码

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  

<script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>  

<script type="text/javascript" src="development-bundle/ui/ui.resizable.js"></script>  

属性：

alsoResize：
参数是选择器，参数所指的对象也会跟随调整大小对象一起进行大小改变。参数所指对象可以是调整大小对象内部元素 也可以是外部元素。

JavaScript代码

$("#resizable").resizable({ alsoResize: '.other' });  

animate：
调整大小动作发生在调整以后。以渐进加速方式实现动作。也就是说 你在调整的时候对象的大小是不会变化的，当你松开鼠标的时候才开始发生大小变化，变化的过程并不是匀速的。参数是布尔值。

animateDuration：
与上面一个参数配合用，设置多少秒类完成大小变化动作。单位是毫秒。 参数也可以为内置的字符串 'slow', 'normal'

animateEasing：
这个属性我很纳闷，应为我在官方api上面只看到一个参数 就是swing，而默认值就是swing。

JavaScript代码

$("#resizable").resizable({ animate: true, animateDuration: 500,animateEasing: 'swing'});  

aspectRatio：
设置为true按比例调整大小，可以设置为比例制 如1/2 或者0.5.

JavaScript代码

$("#resizable").resizable({ aspectRatio: .5});  

autoHide：
自动隐藏右下角调整标识...在加载ui的时候，右下角会有一个类似于QQ右下角那种3斜杠。这个属性值在设置鼠标没有放在边上的时候 不显示这个。

JavaScript代码

$("#resizable").resizable({ autoHide: true });  

cancel：
属性是选择器，所选择的对象不能调整。比如说用 class选择器选择了一批标签，但是我希望这批标签里面的 id是#a的不能调整。

JavaScript代码

$(".resizable").resizable({ cancel: '#a' });  

containment：
限定可调整区域。参数'parent', 'document'，也可以是选择器或者标签名。比如说我把调整区域限制在父标签，那么这个元素最大只能调整成父标签的大小。

JavaScript代码

$(".resizable").resizable({ containment: 'parent' });  

delay：
延迟多少毫秒执行调整事件。这样可以有效的避免因为不经意的操作而误调整了窗口。也就是说 你鼠标放在边或者角上的时候需要按下去停留一定的毫秒才能执行调整事件。

JavaScript代码

$(".resizable").resizable({ delay: 2000 });  //测试用的，按下去2秒后才能调整，否则无效

       distance：延迟多少像素执行调整事件，作用和上面的参数一样，都是为了防止误操作。 鼠标按下去移动参数像素以后才能触发调整事件。

JavaScript代码

$(".resizable").resizable({ distance: 200 });  

ghost： 设置为true以后，调整时，原始对象并不发生变化，而是复制一份原始对象，并且把它半透明，来显示你调成的大小，鼠标松开后，半透明的复制对象消失，原始对象直接显示调整后的大小。

JavaScript代码

$('.selector').resizable({ ghost: true });  

grid： 设置调整大小时候x y 轴每次移动多少像素。

JavaScript代码

$('.selector').draggable({ grid: [50, 20] });  

handles： 可实行调整的边和角。默认只有 [右边,下边,右下角]可以调整。 可以根据参数{ n, e, s, w, ne, se, sw, nw }自由搭配。

JavaScript代码

$('.selector').resizable({ handles: 'n, e, s, w' });  

helper： 拖拽组件也有这个属性，但是在这个里面 效果不同，这个里面helper的参数是一个字符串（class名字），当调整发生时，会有类似ghost的效果发生，只不过ghost效果所复制的是已 经定义好的，而这里可以自己根据css定义复制出来的 原始对象。同样，在调整结束后，这个复制对象会消失。

JavaScript代码

$('.selector').resizable({ helper: 'ui-state-highlight' });  

maxHeight： maxWidth: minHeight: minWidth: 这2个属性，等同于css里面的 对应属性。实际上，如果不考虑ie6的话，在css定义 这些属性比在jQ里面定义这些属性效率更好。

JavaScript代码

$('.selector').resizable({ maxWidth: 250 });