JQuery UI - resizable_冯小东的博客-程序员秘密

技术标签： resizable  jqueryUI  JQuery  

  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] )  
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_25343343/article/details/79567867

智能推荐

获取淘宝/天猫购买到商品的订单详情——buyer_order_detail_分享干货的猫的博客-程序员秘密

key=&secret=&order_id=&onlystatus=0"请求地址: https://api-gw.onebound.cn/taobao/buyer_order_detail。请求参数：order_id=&onlystatus=0。-- 请求示例 url 默认请求参数已经URL编码处理。token:SaaS授权。

解决gbk转utf8乱码_删除没备份的痛的博客-程序员秘密

解决GBK字符转UTF-8乱码问题gbk转utf-8，奇数中文乱码。一、乱码的原因gbk的中文编码是一个汉字用【2】个字节表示，例如汉字“内部”的gbk编码16进制的显示为c4 da b2 bfutf-8的中文编码是一个汉字用【3】个字节表示，例如汉字“内部”的utf-8编码16进制的显示为e5 86 85 e9 83 a8很显然，gbk是无法直接转换成utf-8，少字节变为多字节二、转换的办法1.首先将gbk字符串getBytes()得到两个原始字节，转换成二进制字符流，共16位

matlab保存workspace的数据和下载数据到workspace。_matlab数据保存与下载_xiaotao_1的博客-程序员秘密

主要是利用save和load命令（可在command窗口输入doc save，doc load 或者help save，help load查看）一，保存workspace的数据。 　　1，save('test.mat') 或者 save test.mat ：保存workspace所有变量到test.mat内。 　　2，save('test.mat','y') 或者 save test

bash-4.0#cd bfagent-7.1.1.5-0-0012/_jiav_net的博客-程序员秘密

命令：bash-4.0# lshpux11-bfagent-7.1.1.5-0-0012.tar.gzbash-4.0# gunzip hpux11-bfagent-7.1.1.5-0-0012.tar.gzbash-4.0# lshpux11-bfagent-7.1.1.5-0-0012.tarbash-4.0# tar -xvf hpux11-bfagent-7.1.1...

TRIZ系列-创新原理-16-部分或超额行动原理_当所期望的效果难以100%实现时,则可以用同样的方法完成稍少于或稍多于期望的_广州接入的博客-程序员秘密

部分或超额行动原理,也叫未达到或过度的作用原理，表述如下：1）如果得到规定效果的100%比较难，那么可以完成的少些或多些；这个原理告诉我们，如果一件事情所期望的效果难以百分之百实现时，那么做得稍微超过或者稍微小于期望效果，可以使问题大大简化。我们可以先从最容易掌握的情况或者最容易获得的东西入手，尝试在“多余”或“少于”之间过渡；尝试在“更多”和“更少”之间渐进调整，例如：A）填地板砖缝隙     

广告过滤规则_过滤广告规则_什么吃热狗的博客-程序员秘密

https://gitee.com/halflife/listhttps://github.com/h2y/Shadowrocket-ADBlock-Ruleshttps://github.com/privacy-protection-tools/anti-ADhttps://github.com/cjx82630/cjxlistEasylist官方规则https://easylist.to/easylist/easylist.txthttps://sub.adtchrome.com

随便推点

微课在小学计算机教学中的应用,微课技术在小学信息技术课堂中的应用_刘瑷的博客-程序员秘密

(一)课题的核心概念及其界定(二)国内外同一研究领域现状与研究的价值(三)研究的目标、内容(或子课题设计)与重点(四)研究的思路、过程与方法(五)主要观点与可能的创新之处(请分5部分逐项填写，详述研究内容，限2500字内，可附页)一、课题的核心概念及其界定：1、课题的核心概念：“微课”的核心组成内容是课堂教学视频(课例片段)，同时还包含与该教学主题相关的教学设计、素材课件、教学反思、练习测试及学生...

Learning How To Learn notes-Coursera_dijianren5175的博客-程序员秘密

Learning How ToLearn notes-Coursera-Designed ByDr.Hannibal Lecter回忆比思维导图有用before you deeply understand material.More practice.Don’t just readanswer as if you understand them.Try to do i...

MyOS 之 鼠标移动_鼠标移动需要缓冲区_才大难为用的博客-程序员秘密

图层叠加就是用于鼠标，窗口等拖动设计。

Gtest在vs 2010上的配置_visual studio2010 配置gtest_剑西楼的博客-程序员秘密

找了好多文章，发现这篇是讲得最简便、正确的！以下为复制&粘贴的：[cpp] view plain copy VS2010 gtest简易配置    使用一个简单的控制台来演示。    1.下载google test    http://code.google.com/p/googletest/downloads/detail?name=gtest-1.6.0.z

凸包与旋转卡壳_猪猪奋斗记的博客-程序员秘密

凸包与旋转卡壳

Chrome谷歌浏览器插件_百度翻译插件去除字数限制_百度翻译限制字数_qq_37659178的博客-程序员秘密

找到插件安装目录例如C:\Users\Administrator\Local Settings\Google\Chrome\User Data\Profile 1\Extensions\ccfjcepmiaackkccabgeeegeklgifffd将目录拷贝出来，找到lookup.js，搜索b.length将条件改为你想要的数字或者注释掉也可。然后Chrome开发者模式，加载已解压的扩展程序，重启Chrome即可。现在即可复制选择大段文字也会有[译...

推荐文章

热门文章

相关标签