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] )

JQuery UI - resizable调整区域大小的更多相关文章

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

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

  2. JQuery UI - resizable

     ·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable/ 所有的事件回调函数都有两个参数:eve ...

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

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

  4. jquery入门 动态调整div大小,使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...

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

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

  6. jquery ui的css设计

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

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

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

  8. 两种为wangEditor添加拖拽调整高度的方式:CSS3和jQuery UI

    wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...

  9. 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

    □ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...

随机推荐

  1. RF常用库简介(robotframework)

    标准库 Robot Framework可以直接导入使用的库,包括: Builtin:包含经常需要的关键字.自动导入无需import,因此总是可用的 Dialogs:提供了暂停测试执行和从用户的输入方式 ...

  2. 京东2015年应届生招聘笔试题(A)卷答案选择题部分

    1.操作系统死锁的必要条件(多选题):()   A.相互排斥条件   B.系统资源有限   C.进程调度不合理   D.环路等待条件 答:A,C,D 參考资料:http://blog.sina.com ...

  3. ubuntu boost.python

    安装boost(未尝试只安装 libboost-python-dev) sudo apt-get install libboost-all-dev 新建hello_ext.cpp,输入以下代码 1 c ...

  4. 安装Redis图形监控工具---RedisLive

    RedisLive简介 RedisLive是一款用Python编写基于WEB的Redis图形监控工具,也是一款实时监控Redis数据的开源软件,以WEB的形式展现出redis中的key的情况,实例数据 ...

  5. 扒一扒P2P风控的底牌(转)

    互联网金融,这里面水就太深了,能当理财买的一般有两类,一个是货币基金,比如余额宝,这个大家已经十分清楚了,没什么风险, 但问题就是收益越来越低.实在是不过瘾了.而另外一种就是P2P理财了,收益很高,也 ...

  6. 【Caffe】利用log文件绘制loss和accuracy(转载)

    (原文地址:http://blog.csdn.net/liuweizj12/article/details/64920428) 在训练过程中画出accuracy 和loss曲线能够更直观的观察网络训练 ...

  7. linux 改动rootpassword以及忘记rootpassword

    改动rootpassword: $ passwd root 或者sudo passwd root $password:  (要求输入旧的密码) $new  password:(输入两遍新密码) 忘记r ...

  8. 一个中断服务子程序ISR

    请看下面的程序(一个中断服务子程序ISR),请指出这段代码的错误.)[中国台湾某著名CPU生产公司2005年面试题] 答案:(1)ISR不能返回一个值.如果你不懂这个,那么是不会被雇用的.(2)ISR ...

  9. MySQL 5.7 等高版本关于JDBC驱动的几个问题

    https://blog.csdn.net/dj673344908/article/details/85223313 mysql 5.7 用8.0版本的驱动可以,5.1版本也可以,5.5.5.6.5. ...

  10. 如何学习CCIE

    想想自己拖了这么久,也没考试,也没积极去做实验,心里也有怨念,其实一直是方法不对,今天心里产生共鸣,后悔当初太年轻. 转载地址:http://bbs.hh010.com/thread-467553-1 ...