您的位置：首页 > 电脑网络 > 笔记本 > JQuery UI - resizable

JQuery UI - resizable

luyued 发布于 2011-04-20 15:43   浏览 N 次  
  1. ·概述
  2. resizable插件可以让选中的元素具有改变尺寸的功能。
  3. 官方示例地址：http://jqueryui.com/demos/resizable/
  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}
  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');
  20. animate : Boolean : false
  21. 在调整元素大小结束之后是否显示动画
  22. 初始：$('.selector').resizable({ animate: true });
  23. 获取：var animate = $('.selector').resizable('option', 'animate');
  24. 设置：$('.selector').resizable('option', 'animate', true);
  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);
  32. animateEasing : String : 'swing'
  33. 选择何种动画效果。
  34. 初始：$('.selector').resizable({ animateEasing: 'swing' });
  35. 获取：var animateEasing = $('.selector').resizable('option', 'animateEasing');
  36. 设置：$('.selector').resizable('option', 'animateEasing', 'swing');
  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);
  44. autoHide : Boolean : false
  45. 如果设置为true，则默认隐藏掉可调整大小的手柄，除非鼠标移至元素上。
  46. 初始：$('.selector').resizable({ autoHide: true });
  47. 获取：var autoHide = $('.selector').resizable('option', 'autoHide');
  48. 设置：$('.selector').resizable('option', 'autoHide', true);
  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');
  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');
  62. delay : Integer : 0
  63. 以毫秒为单位，当发生鼠标点击手柄改变大小，延迟多少毫秒后才激活事件。
  64. 初始：$('.selector').resizable({ delay: 20 });
  65. 获取：var delay = $('.selector').resizable('option', 'delay');
  66. 设置：$('.selector').resizable('option', 'delay', 20);
  68. distance : Integer : 1
  69. 以像素为单位，当发生鼠标点击手柄改变大小，延迟多少像素后才激活事件。
  70. 初始：$('.selector').resizable({ distance: 20 });
  71. 获取：var distance = $('.selector').resizable('option', 'distance');
  72. 设置：$('.selector').resizable('option', 'distance', 20);
  74. ghost : Boolean : false
  75. 如果设置为true，则在调整元素大小时，有一个半透明的辅助对象显示。
  76. 初始：$('.selector').resizable({ ghost: true });
  77. 获取：var grid = $('.selector').resizable('option', 'ghost');
  78. 设置：$('.selector').resizable('option', 'ghost', true);
  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]);
  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');
  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');
  98. maxHeight : Integer : null
  99. 设置允许元素调整的最大高度。
  100. 初始：$('.selector').resizable({ maxHeight: 300 });
  101. 获取：var maxHeight = $('.selector').resizable('option', 'maxHeight');
  102. 设置：$('.selector').resizable('option', 'maxHeight', 300);
  104. maxWidth : Integer : null
  105. 设置允许元素调整的最大宽度。
  106. 初始：$('.selector').resizable({ maxWidth: 250 });
  107. 获取：var maxWidth = $('.selector').resizable('option', 'maxWidth');
  108. 设置：$('.selector').resizable('option', 'maxWidth', 250);
  110. minHeight : Integer : 10
  111. 设置允许元素调整的最小高度。
  112. 初始：$('.selector').resizable({ minHeight: 150 });
  113. 获取：var minHeight = $('.selector').resizable('option', 'minHeight');
  114. 设置：$('.selector').resizable('option', 'minHeight', 150);
  116. minWidth : Integer : 10
  117. 设置允许元素调整的最小宽度。
  118. 初始：$('.selector').resizable({ minWidth: 75 });
  119. 获取：var minWidth = $('.selector').resizable('option', 'minWidth');
  120. 设置：$('.selector').resizable('option', 'minWidth', 75);
  123. ·事件
  124. start
  125. 当元素调整动作开始时触发。
  126. 初始：$('.selector').resizable({ start: function(event, ui) { ... } });
  127. 绑定：$('.selector').bind('resizestart', function(event, ui) { ... });
  129. resize
  130. 当元素调整动作过程中触发。
  131. 初始：$('.selector').resizable({ resize: function(event, ui) { ... } });
  132. 绑定：$('.selector').bind('resize', function(event, ui) { ... });
  134. stop
  135. 当元素调整动作结束时触发。
  136. 初始：$('.selector').resizable({ stop: function(event, ui) { ... } });
  137. 绑定：$('.selector').bind('resizestop', function(event, ui) { ... });
  140. ·方法
  141. destory
  142. 从元素中移除拖拽功能。
  143. 用法：.droppable( 'destroy' )
  145. disable
  146. 禁用元素的拖拽功能。
  147. 用法：.droppable( 'disable' )
  149. enable
  150. 启用元素的拖拽功能。
  151. 用法：.droppable(
上一篇：ListView实现Gallery自定义列表 - Android开发专区【初|中|高】级 - CMD100 中国手机开发 下一篇：PYTHON中对列表list交集
相关资讯
图文资讯
最新资讯
广告赞助商
最多关注
  • 今日
  • 本周
  • 年度
最多评论
品牌排行榜