JQuery UI - resizable

·概述 resizable插件可以让选中的元素具有改变尺寸的功能。 官方示例地址：http://jqueryui.com/demos/resizable/ 所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象 ui.helper - 表示当前被改变尺寸的元素的JQuery对象 ui.originalPosition - 表示未改变尺寸之前元素的位置{top,left} ui.originalSize - 表示未改变尺寸之前元素的大小{width,height} ui.position - 表示当前被改变尺寸的元素的坐标值对象{top,left} ui.size - 表示当前被改变尺寸的元素的大小值对象{width,height} ·参数（参数名 : 参数类型 : 默认值） alsoResize : Selector, jQuery, ElementDefault : false 当调整元素大小时，同步改变另一个（或一组）元素的大小。 初始：$('.selector').resizable({ alsoResize: '.other' }); 获取：var alsoResize = $('.selector').resizable('option', 'alsoResize'); 设置：$('.selector').resizable('option', 'alsoResize', '.other'); animate : Boolean : false 在调整元素大小结束之后是否显示动画 初始：$('.selector').resizable({ animate: true }); 获取：var animate = $('.selector').resizable('option', 'animate'); 设置：$('.selector').resizable('option', 'animate', true); animateDuration : Integer, String : 'slow' 动画效果的持续时间。（单位：毫秒）可选值：'slow', 'normal', 'fast' 初始：$('.selector').resizable({ animateDuration: 500 }); 获取：var animateDuration = $('.selector').resizable('option', 'animateDuration'); 设置：$('.selector').resizable('option', 'animateDuration', 500); animateEasing : String : 'swing' 选择何种动画效果。 初始：$('.selector').resizable({ animateEasing: 'swing' }); 获取：var animateEasing = $('.selector').resizable('option', 'animateEasing'); 设置：$('.selector').resizable('option', 'animateEasing', 'swing'); aspectRatio : Boolean, Float : false 如果设置为true，则元素的可调整尺寸受原来大小的限制。例如：9 / 16, or 0.5 初始：$('.selector').resizable({ aspectRatio: .75 }); 获取：var aspectRatio = $('.selector').resizable('option', 'aspectRatio'); 设置：$('.selector').resizable('option', 'aspectRatio', .75); autoHide : Boolean : false 如果设置为true，则默认隐藏掉可调整大小的手柄，除非鼠标移至元素上。 初始：$('.selector').resizable({ autoHide: true }); 获取：var autoHide = $('.selector').resizable('option', 'autoHide'); 设置：$('.selector').resizable('option', 'autoHide', true); cancel : Selector : ':input,option' 阻止resizable插件加载在与你匹配的元素上。 初始：$('.selector').resizable({ cancel: ':input,option' }); 获取：var cancel = $('.selector').resizable('option', 'cancel'); 设置：$('.selector').resizable('option', 'cancel', ':input,option'); containment : String, Element, Selector : false 控制元素只能在某一个元素的大小之内改变。允许值：'parent', 'document', DOM元素, 或一个选择器. 初始：$('.selector').resizable({ containment: 'parent' }); 获取：var containment = $('.selector').resizable('option', 'containment'); 设置：$('.selector').resizable('option', 'containment', 'parent'); delay : Integer : 0 以毫秒为单位，当发生鼠标点击手柄改变大小，延迟多少毫秒后才激活事件。 初始：$('.selector').resizable({ delay: 20 }); 获取：var delay = $('.selector').resizable('option', 'delay'); 设置：$('.selector').resizable('option', 'delay', 20); distance : Integer : 1 以像素为单位，当发生鼠标点击手柄改变大小，延迟多少像素后才激活事件。 初始：$('.selector').resizable({ distance: 20 }); 获取：var distance = $('.selector').resizable('option', 'distance'); 设置：$('.selector').resizable('option', 'distance', 20); ghost : Boolean : false 如果设置为true，则在调整元素大小时，有一个半透明的辅助对象显示。 初始：$('.selector').resizable({ ghost: true }); 获取：var grid = $('.selector').resizable('option', 'ghost'); 设置：$('.selector').resizable('option', 'ghost', true); grid : Array : false 设置元素调整的大小随网格变化，允许的数据为：{x,y} 初始：$('.selector').resizable({ grid: [50, 50] }); 获取：var grid = $('.selector').resizable('option', 'grid'); 设置：$('.selector').resizable('option', 'grid', [50, 50]); handles : String, Object : 'e, s, se' 设置resizable插件允许生成在元素的哪个边上，可选值：n, e, s, w, ne, se, sw, nw, all 初始：$('.selector').resizable({ handles: 'n, e, s, w' }); 获取：var handles = $('.selector').resizable('option', 'handles'); 设置：$('.selector').resizable('option', 'handles', 'n, e, s, w'); helper : String : false 一个CSS类，当调整元素大小时，将被添加到辅助元素中，一但调整结束则恢复正常。 初始：$('.selector').resizable({ helper: 'ui-state-highlight' }); 获取：var helper = $('.selector').resizable('option', 'helper'); 设置：$('.selector').resizable('option', 'helper', 'ui-state-highlight'); maxHeight : Integer : null 设置允许元素调整的最大高度。 初始：$('.selector').resizable({ maxHeight: 300 }); 获取：var maxHeight = $('.selector').resizable('option', 'maxHeight'); 设置：$('.selector').resizable('option', 'maxHeight', 300); maxWidth : Integer : null 设置允许元素调整的最大宽度。 初始：$('.selector').resizable({ maxWidth: 250 }); 获取：var maxWidth = $('.selector').resizable('option', 'maxWidth'); 设置：$('.selector').resizable('option', 'maxWidth', 250); minHeight : Integer : 10 设置允许元素调整的最小高度。 初始：$('.selector').resizable({ minHeight: 150 }); 获取：var minHeight = $('.selector').resizable('option', 'minHeight'); 设置：$('.selector').resizable('option', 'minHeight', 150); minWidth : Integer : 10 设置允许元素调整的最小宽度。 初始：$('.selector').resizable({ minWidth: 75 }); 获取：var minWidth = $('.selector').resizable('option', 'minWidth'); 设置：$('.selector').resizable('option', 'minWidth', 75); ·事件 start 当元素调整动作开始时触发。 初始：$('.selector').resizable({ start: function(event, ui) { ... } }); 绑定：$('.selector').bind('resizestart', function(event, ui) { ... }); resize 当元素调整动作过程中触发。 初始：$('.selector').resizable({ resize: function(event, ui) { ... } }); 绑定：$('.selector').bind('resize', function(event, ui) { ... }); stop 当元素调整动作结束时触发。 初始：$('.selector').resizable({ stop: function(event, ui) { ... } }); 绑定：$('.selector').bind('resizestop', function(event, ui) { ... }); ·方法 destory 从元素中移除拖拽功能。 用法：.droppable( 'destroy' ) disable 禁用元素的拖拽功能。 用法：.droppable( 'disable' ) enable 启用元素的拖拽功能。 用法：.droppable( 'enable' ) option 获取或设置元素的参数。 用法：.droppable( 'option' , optionName , [value] )