JQueryResizable详解（转）
⼀天⼀个jQuery UI 组件，今天折腾 resizable 。resizable 是让对象拥有可调整⼤⼩的属性，类似于windows⽂件夹⼀样可以通过拖动边或者⾓来调整⽂件夹的⼤⼩。
要使⽤resizable ，需要应⽤⼀下⽂件：
XML/HTML代码
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
jquery是什么功能组件<script type="text/javascript" src="development-bundle/js"></script>
<script type="text/javascript" src="development-bundle/sizable.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 });
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论