JQuery UI - resizable

639人阅读 评论(0) 收藏 举报
分类:


·概述 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] )


------------------------------------------------------------------------------------------------------------

  1. 概述  
  2. resizable插件可以让选中的元素具有改变尺寸的功能。  
  3. 官方示例地址:http://jqueryui.com/demos/resizable/  
  4.   
  5. 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象  
  6. ui.helper - 表示当前被改变尺寸的元素的JQuery对象  
  7. ui.originalPosition - 表示未改变尺寸之前元素的位置{top,left}  
  8. ui.originalSize - 表示未改变尺寸之前元素的大小{width,height}  
  9. ui.position - 表示当前被改变尺寸的元素的坐标值对象{top,left}  
  10. ui.size - 表示当前被改变尺寸的元素的大小值对象{width,height}  
  11.   
  12.   
  13. ·参数(参数名 : 参数类型 : 默认值)  
  14. alsoResize : Selector, jQuery, ElementDefault : false  
  15.   当调整元素大小时,同步改变另一个(或一组)元素的大小。  
  16.   初始:$('.selector').resizable({ alsoResize: '.other' });  
  17.   获取:var alsoResize = $('.selector').resizable('option''alsoResize');  
  18.   设置:$('.selector').resizable('option''alsoResize''.other');  
  19.   
  20. animate : Boolean : false  
  21.   在调整元素大小结束之后是否显示动画  
  22.   初始:$('.selector').resizable({ animate: true });  
  23.   获取:var animate = $('.selector').resizable('option''animate');  
  24.   设置:$('.selector').resizable('option''animate'true);  
  25.   
  26. animateDuration : Integer, String : 'slow'   
  27.   动画效果的持续时间。(单位:毫秒)可选值:'slow''normal''fast'  
  28.   初始:$('.selector').resizable({ animateDuration: 500 });  
  29.   获取:var animateDuration = $('.selector').resizable('option''animateDuration');  
  30.   设置:$('.selector').resizable('option''animateDuration', 500);  
  31.   
  32. animateEasing : String : 'swing'  
  33.   选择何种动画效果。  
  34.   初始:$('.selector').resizable({ animateEasing: 'swing' });  
  35.   获取:var animateEasing = $('.selector').resizable('option''animateEasing');  
  36.   设置:$('.selector').resizable('option''animateEasing''swing');  
  37.   
  38. aspectRatio : Boolean, Float : false  
  39.   如果设置为true,则元素的可调整尺寸受原来大小的限制。例如:9 / 16, or 0.5  
  40.   初始:$('.selector').resizable({ aspectRatio: .75 });  
  41.   获取:var aspectRatio = $('.selector').resizable('option''aspectRatio');  
  42.   设置:$('.selector').resizable('option''aspectRatio', .75);  
  43.   
  44. autoHide : Boolean : false  
  45.   如果设置为true,则默认隐藏掉可调整大小的手柄,除非鼠标移至元素上。  
  46.   初始:$('.selector').resizable({ autoHide: true });  
  47.   获取:var autoHide = $('.selector').resizable('option''autoHide');  
  48.   设置:$('.selector').resizable('option''autoHide'true);  
  49.   
  50. cancel : Selector : ':input,option'  
  51.   阻止resizable插件加载在与你匹配的元素上。  
  52.   初始:$('.selector').resizable({ cancel: ':input,option' });  
  53.   获取:var cancel = $('.selector').resizable('option''cancel');  
  54.   设置:$('.selector').resizable('option''cancel'':input,option');  
  55.   
  56. containment : String, Element, Selector : false  
  57.   控制元素只能在某一个元素的大小之内改变。允许值:'parent''document', DOM元素, 或一个选择器.  
  58.   初始:$('.selector').resizable({ containment: 'parent' });  
  59.   获取:var containment = $('.selector').resizable('option''containment');  
  60.   设置:$('.selector').resizable('option''containment''parent');  
  61.   
  62. delay : Integer : 0  
  63.   以毫秒为单位,当发生鼠标点击手柄改变大小,延迟多少毫秒后才激活事件。  
  64.   初始:$('.selector').resizable({ delay: 20 });  
  65.   获取:var delay = $('.selector').resizable('option''delay');  
  66.   设置:$('.selector').resizable('option''delay', 20);  
  67.   
  68. distance : Integer : 1  
  69.   以像素为单位,当发生鼠标点击手柄改变大小,延迟多少像素后才激活事件。  
  70.   初始:$('.selector').resizable({ distance: 20 });  
  71.   获取:var distance = $('.selector').resizable('option''distance');  
  72.   设置:$('.selector').resizable('option''distance', 20);  
  73.   
  74. ghost : Boolean : false  
  75.   如果设置为true,则在调整元素大小时,有一个半透明的辅助对象显示。  
  76.   初始:$('.selector').resizable({ ghost: true });  
  77.   获取:var grid = $('.selector').resizable('option''ghost');  
  78.   设置:$('.selector').resizable('option''ghost'true);  
  79.   
  80. grid : Array : false  
  81.   设置元素调整的大小随网格变化,允许的数据为:{x,y}  
  82.   初始:$('.selector').resizable({ grid: [50, 50] });  
  83.   获取:var grid = $('.selector').resizable('option''grid');  
  84.   设置:$('.selector').resizable('option''grid', [50, 50]);  
  85.   
  86. handles : String, Object : 'e, s, se'  
  87.   设置resizable插件允许生成在元素的哪个边上,可选值:n, e, s, w, ne, se, sw, nw, all  
  88.   初始:$('.selector').resizable({ handles: 'n, e, s, w' });  
  89.   获取:var handles = $('.selector').resizable('option''handles');  
  90.   设置:$('.selector').resizable('option''handles''n, e, s, w');  
  91.   
  92. helper : String : false  
  93.   一个CSS类,当调整元素大小时,将被添加到辅助元素中,一但调整结束则恢复正常。  
  94.   初始:$('.selector').resizable({ helper: 'ui-state-highlight' });  
  95.   获取:var helper = $('.selector').resizable('option''helper');  
  96.   设置:$('.selector').resizable('option''helper''ui-state-highlight');  
  97.   
  98. maxHeight : Integer : null  
  99.   设置允许元素调整的最大高度。  
  100.   初始:$('.selector').resizable({ maxHeight: 300 });  
  101.   获取:var maxHeight = $('.selector').resizable('option''maxHeight');  
  102.   设置:$('.selector').resizable('option''maxHeight', 300);  
  103.   
  104. maxWidth : Integer : null  
  105.   设置允许元素调整的最大宽度。  
  106.   初始:$('.selector').resizable({ maxWidth: 250 });  
  107.   获取:var maxWidth = $('.selector').resizable('option''maxWidth');  
  108.   设置:$('.selector').resizable('option''maxWidth', 250);  
  109.   
  110. minHeight : Integer : 10  
  111.   设置允许元素调整的最小高度。  
  112.   初始:$('.selector').resizable({ minHeight: 150 });  
  113.   获取:var minHeight = $('.selector').resizable('option''minHeight');  
  114.   设置:$('.selector').resizable('option''minHeight', 150);  
  115.   
  116. minWidth : Integer : 10  
  117.   设置允许元素调整的最小宽度。  
  118.   初始:$('.selector').resizable({ minWidth: 75 });  
  119.   获取:var minWidth = $('.selector').resizable('option''minWidth');  
  120.   设置:$('.selector').resizable('option''minWidth', 75);  
  121.   
  122.   
  123. ·事件  
  124. start  
  125.   当元素调整动作开始时触发。  
  126.   初始:$('.selector').resizable({ start: function(event, ui) { ... } });  
  127.   绑定:$('.selector').bind('resizestart'function(event, ui) { ... });  
  128.   
  129. resize  
  130.   当元素调整动作过程中触发。  
  131.   初始:$('.selector').resizable({ resize: function(event, ui) { ... } });  
  132.   绑定:$('.selector').bind('resize'function(event, ui) { ... });  
  133.   
  134. stop  
  135.   当元素调整动作结束时触发。  
  136.   初始:$('.selector').resizable({ stop: function(event, ui) { ... } });  
  137.   绑定:$('.selector').bind('resizestop'function(event, ui) { ... });  
  138.   
  139.   
  140. ·方法  
  141. destory  
  142.   从元素中移除拖拽功能。  
  143.   用法:.droppable( 'destroy' )  
  144.   
  145. disable  
  146.   禁用元素的拖拽功能。  
  147.   用法:.droppable( 'disable' )  
  148.   
  149. enable  
  150.   启用元素的拖拽功能。  
  151.   用法:.droppable( 'enable' )  
  152.   
  153. option  
  154.   获取或设置元素的参数。  
  155.   用法:.droppable( 'option' , optionName , [value] )  

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1789336次
    • 积分:27421
    • 等级:
    • 排名:第207名
    • 原创:925篇
    • 转载:486篇
    • 译文:0篇
    • 评论:197条
    文章分类
    博客专栏
    在线文档
    QT官网