JQuery UI - resizable调整区域大小
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调整区域大小的更多相关文章
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- JQuery UI - resizable
·概述 resizable插件可以让选中的元素具有改变尺寸的功能. 官方示例地址:http://jqueryui.com/demos/resizable/ 所有的事件回调函数都有两个参数:eve ...
- 解决 jQuery.UI.Resizable aspectRatio在init后无法重新设置
一.背景 在jQuery1.9.x版本之前,存在aspectRatio在Resizable方法init之后,无法再次修改aspectRatio的boolean值. 二.解决方案 // 用于fix j ...
- jquery入门 动态调整div大小,使其宽度始终为浏览器宽度
有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...
- jquery ui的css设计
jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...
- jquery ui 怎么实现tab标签切换效果
1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- 两种为wangEditor添加拖拽调整高度的方式:CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
- 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度
□ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...
随机推荐
- Vue 渲染优先级
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级.
- Vue 中computed 与 methods 区别
1.示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- npm安装package.json
npm安装package.json时,直接转到当前项目目录下,用命令npm install 或npm install --save-dev安装即可,自动将package.json中的模块安装到node ...
- android 怎样单独下载一个项目
起因,"网络"不太好."比方铁通的就是不如联通的" 每次运行一边repo sync,十分蛋疼,假设不做full build无需所有下载,着急看某个项目的修改但是 ...
- java拷贝构造函数
浅拷贝就是指两个对象共同拥有同一个值,一个对象改变了该值,也会影响到另一个对象. 深拷贝就是两个对象的值相等,但是互相独立. 构造函数的参数是该类的一个实例. Operator = 拷贝构造函数 ...
- g2o 初始化
typedef g2o::BlockSolver< g2o::BlockSolverTraits<,> > Block; // pose 维度为 6, landmark 维度为 ...
- 09-利用session完成用户登陆
/***********************************************login.html*****************************************/ ...
- JS中的call_user_func封装
PHP常见的call_user_func方法,在JS中有时候会用到,比如你想根据某个动态变量去执行方法. 以前遇到过类似的问题没有解决,现在不太记得具体案例了.今天无意中看到类似文章,学到了.代码如下 ...
- 安装部署zookeeper集群
实验说明: 三台虚拟机做zookeeper集群,集群个数最好是奇数个,原理详见zookeeper 详解 安装zookeeper 请确保jdk 已安装好,否则无法启动 三台虚拟机IP分别为:192. ...
- C#里类的get和set方法编写和调用
using System; class Date { int day; int month; int year; public int Day{ get { return day; } set { d ...