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


JQuery UI - resizable的更多相关文章

  1. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  2. JQuery UI - resizable调整区域大小

    JQuery UI - resizable   ·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable ...

  3. 解决 jQuery.UI.Resizable aspectRatio在init后无法重新设置

    一.背景  在jQuery1.9.x版本之前,存在aspectRatio在Resizable方法init之后,无法再次修改aspectRatio的boolean值. 二.解决方案 // 用于fix j ...

  4. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  5. jquery ui的css设计

    jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...

  6. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  7. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  8. Jquery UI

    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...

  9. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

随机推荐

  1. 用户创建,删除and并发注册and系统登陆的API研究(学习汇总网上资料)

    一.系统登陆链接实现 比如有一个外围支持系统,用户需要在外围系统登录之后点个link就可以登录到Oracle ERP系统中,那么我们需要先把外围系统的用户创建在Oracle ERP中,并且分配职责给他 ...

  2. 一张图带你看懂SpriteKit中Update Loop究竟做了神马!

    1首先Scene中只有开始一点时间用来回调其中的update方法 ;] 2然后是Scene中所有动作的模拟 3接下来是上一步完成之后,给你一个机会执行一些代码 4然后是Scene模拟其中的物理世界 5 ...

  3. 自制DbHelper实现自动化数据库交互

    之前一直对apache的DbUtils很好奇,也很佩服其中的设计上的智慧.于是就自己模拟实现了一个更加简便的小框架.我们只需要在配置文件中写上数据库层面的连接信息,就可以随心所欲的实现自己的需求了. ...

  4. Android之Animation动画各属性的参数意思(二)

    现在就来讲讲Animation里这四个标签的属性. 一.这四个标签alpha.scale.translate.rotate共有的属性为: android:duration        动画持续时间, ...

  5. [csdn markdown]使用摘记一源代码高亮及图片上传和链接

    本文主要内容是体验csdn markdown的代码块高亮显示和图片链接及上传. 图片上传 上边这是标题行,只需要使用一个#就可以表示,几个表示是几级标题 图片上传 本地图片上传控件 本地图片上传方式 ...

  6. Java继承时的初始化顺序

    Java程序在启动和运行时,需要首先完成初始化的工作.在涉及到继承.static成员变量等因素时,初始化的顺序就复杂起来.下面以一个例子说明继承时的Java初始化顺序. 例子: class Insec ...

  7. Linux命令—压缩及其他

     (1)为了更好的传送和保存文件,需要对某些文件和目录进行压缩和解压缩操作,Linux 提供了强大的压缩.解压缩命令,常用的tar命令. (2)在Linux中,如果要使用储存设备(硬盘.光驱.移动 ...

  8. Android简易实战教程--第九话《短信备份~二》

    这一篇,承接地八话.使用高效的方式备份短信--xml序列化器. 存储短信,要以对象的方式存储.首先创建javabean: package com.itydl.createxml.domain; pub ...

  9. J2EE进阶(十三)Spring MVC常用的那些注解

    Spring MVC常用的那些注解 前言 Spring从2.5版本开始在编程中引入注解,用户可以使用@RequestMapping, @RequestParam,@ModelAttribute等等这样 ...

  10. ios zxing扫码问题

    在ios 中 扫瞄二维码,条形码基本有 2中第三方的库,一个是zbar 一个是zxing,zxing 在android中表现的比较出色,但是在ios 中不是很好用,扫瞄效率低,我们一般都用zbar,但 ...