永利酒店赌场:转载:JQuery Resizable详解

1:尺寸调整组件组件可以使选定的DOM元素变成可调整尺寸的对象,即可以通过拖动调整手柄来改变其尺寸大小。$.resizeable;简单实例:复制代码 代码如下:

·概述 resizable插件可以让选中的元素具有改变尺寸的功能。

转载网址:

resizable组件

官方示例地址:

一天一个jQuery UI 组件,今天折腾 resizable 。resizable 是让对象拥有可调整大小的属性,类似于windows文件夹一样可以通过拖动边或者角来调整文件夹的大小。

永利酒店赌场 1效果图:

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象

要使用resizable ,需要应用一下文件:

其实,在调用resizable()方法之后,将会在目标对象的右边框、下边框和右下角分别添加div元素,并对div元素依次添加ui-resizable-e,
ui-resizable-s, ui-resizable-se类,从而形成拖动手柄

ui.helper – 表示当前被改变尺寸的元素的JQuery对象

XML/HTML代码

2:延迟调整复制代码 代码如下:

ui.originalPosition – 表示未改变尺寸之前元素的位置{top,left}

<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>  

resizable组件

ui.originalSize – 表示未改变尺寸之前元素的大小{width,height}

<script type=”text/javascript” src=”development-bundle/ui/ui.core.js”></script>  

延迟调整

ui.position – 表示当前被改变尺寸的元素的坐标值对象{top,left}

<script type=”text/javascript” src=”development-bundle/ui/ui.resizable.js”></script>  

×

ui.size – 表示当前被改变尺寸的元素的大小值对象{width,height}

属性:

拖动最外边框查看效果,参数如下
时间延迟:500
距离延迟:20

·参数(参数名 : 参数类型 : 默认值)

alsoResize:
参数是选择器,参数所指的对象也会跟随调整大小对象一起进行大小改变。参数所指对象可以是调整大小对象内部元素 也可以是外部元素。

3:动态调整效果需要借助尺寸调整组件的一下属性来实现:*为helper属性设置一个CSS样式类,该样式类将在调整过程中显示元素大小的轮廓,操作结束后才调整原始元素的大小*设置ghost属性为true,在调整过程中显示一个半透明的辅助元素*将animate属性设置为true,为元素的调整过程添加动画效果*为animateDuration属性指定一个值,设置动画过程持续的时间复制代码 代码如下:

alsoResize : Selector, jQuery, ElementDefault : false  

JavaScript代码

resizable组件

当调整元素大小时,同步改变另一个(或一组)元素的大小。  

$(“#resizable”).resizable({ alsoResize: ‘.other’ });  

魔兽争霸

初始:$(‘.selector’).resizable({ alsoResize: ‘.other’ });  

animate:
调整大小动作发生在调整以后。以渐进加速方式实现动作。也就是说 你在调整的时候对象的大小是不会变化的,当你松开鼠标的时候才开始发生大小变化,变化的过程并不是匀速的。参数是布尔值。

来源:知识宝库网 | 浏览次数:431052次 | 创建时间:2010-10-23

魔兽争霸是一款非常着名的即时战略游戏。制作公司是美国的暴雪公司。最新版本为“魔兽争霸3:冰封王座”,目前的版本号为1.24.1.6374。

目前是单机游戏中非常受欢迎的游戏,除此之外,魔兽争霸还包括了游戏的同名电影。

效果图:4:尺寸调整组件的方法尺寸调整组件有4个方法,他们都是拖动组件和投放组件所共有的,即disable方法、enable方法、destroy方法和option方法复制代码 代码如下: //禁止调整尺寸功能
$.resizable; //重新激活对象的可调整尺寸功能
$.resizable;//移除可调整尺寸功能$.resizable;//在初始化后设置maxHeight属性的值为480
$.resizable(‘option’, ‘maxHeight’,
480);//在初始化后获取maxHeight属性的值 $.resizable(‘option’,
“maxHeight”);5:调整事件回调函数start:事件类型resizestart,
开始拖动改变大小时触发resize: 事件类型resize,
拖动过程中,鼠标每移动一像素就触发一次stop: 事件类型resizestop,
停止拖动时触发复制代码 代码如下:
$.droppable({ eventName: function {
//具体处理代码,this表示可调整尺寸的对象
}});ui则是一个包含附加信息的jQuery对象,该jQuery对象具有一下属性:helper:
一个jQuery对象,表示可拖动助手元素originalPosition:
一个包含top属性和left属性的对象,表示开始调整前元素相对于原始对象的位置originalSize:
一个包含width和height属性的对象,表示开始调整前元素的尺寸大小position:
一个包含top属性和left属性的对象,表示当前元素相对于原始对象的位置size:
一个包含width属性和height属性的对象,表示当前元素的尺寸大小简单示例:复制代码 代码如下:

resizable组件

茄菲猫

×

永利酒店赌场 2

获取:var alsoResize = $(‘.selector’).resizable(‘option’, ‘alsoResize’);
 

animateDuration:
与上面一个参数配合用,设置多少秒类完成大小变化动作。单位是毫秒。 参数也可以为内置的字符串 ‘slow’, ‘normal’

设置:$(‘.selector’).resizable(‘option’, ‘alsoResize’, ‘.other’);

animateEasing:
这个属性我很纳闷,应为我在官方api上面只看到一个参数 就是swing,而默认值就是swing。

animate : Boolean : false  

JavaScript代码

在调整元素大小结束之后是否显示动画  

$(“#resizable”).resizable({ animate: true, animateDuration: 500,animateEasing: ‘swing’});  

初始:$(‘.selector’).resizable({ animate: true });  

aspectRatio:
设置为true按比例调整大小,可以设置为比例制 如1/2 或者0.5.

获取:var animate = $(‘.selector’).resizable(‘option’, ‘animate’);  

JavaScript代码

设置:$(‘.selector’).resizable(‘option’, ‘animate’, true);

$(“#resizable”).resizable({ aspectRatio: .5});  

animateDuration : Integer, String : ‘slow’  

autoHide:
自动隐藏右下角调整标识…在加载ui的时候,右下角会有一个类似于QQ右下角那种3斜杠。这个属性值在设置鼠标没有放在边上的时候 不显示这个。

动画效果的持续时间。(单位:毫秒)可选值:’slow’, ‘normal’, ‘fast’  

JavaScript代码

初始:$(‘.selector’).resizable({ animateDuration: 500 });  

$(“#resizable”).resizable({ autoHide: true });  

获取:var animateDuration = $(‘.selector’).resizable(‘option’,
‘animateDuration’);  

cancel:
属性是选择器,所选择的对象不能调整。比如说用 class选择器选择了一批标签,但是我希望这批标签里面的 id是#a的不能调整。

设置:$(‘.selector’).resizable(‘option’, ‘animateDuration’, 500);

JavaScript代码

animateEasing : String : ‘swing’   选择何种动画效果。  

$(“.resizable”).resizable({ cancel: ‘#a’ });  

初始:$(‘.selector’).resizable({ animateEasing: ‘swing’ });  

containment:
限定可调整区域。参数’parent’, ‘document’,也可以是选择器或者标签名。比如说我把调整区域限制在父标签,那么这个元素最大只能调整成父标签的大小。

获取:var animateEasing = $(‘.selector’).resizable(‘option’,
‘animateEasing’);  

JavaScript代码

设置:$(‘.selector’).resizable(‘option’, ‘animateEasing’, ‘swing’);

$(“.resizable”).resizable({ containment: ‘parent’ });  

aspectRatio : Boolean, Float : false  

delay:
延迟多少毫秒执行调整事件。这样可以有效的避免因为不经意的操作而误调整了窗口。也就是说 你鼠标放在边或者角上的时候需要按下去停留一定的毫秒才能执行调整事件。

如果设置为true,则元素的可调整尺寸受原来大小的限制。例如:9 / 16, or 0.5
 

JavaScript代码

初始:$(‘.selector’).resizable({ aspectRatio: .75 });  

$(“.resizable”).resizable({ delay: 2000 });  //测试用的,按下去2秒后才能调整,否则无效

获取:var aspectRatio = $(‘.selector’).resizable(‘option’,
‘aspectRatio’);  

       distance:延迟多少像素执行调整事件,作用和上面的参数一样,都是为了防止误操作。 鼠标按下去移动参数像素以后才能触发调整事件。

设置:$(‘.selector’).resizable(‘option’, ‘aspectRatio’, .75);

JavaScript代码

autoHide : Boolean : false  

$(“.resizable”).resizable({ distance: 200 });  

如果设置为true,则默认隐藏掉可调整大小的手柄,除非鼠标移至元素上。  

ghost: 设置为true以后,调整时,原始对象并不发生变化,而是复制一份原始对象,并且把它半透明,来显示你调成的大小,鼠标松开后,半透明的复制对象消失,原始对象直接显示调整后的大小。

初始:$(‘.selector’).resizable({ autoHide: true });  

JavaScript代码

获取:var autoHide = $(‘.selector’).resizable(‘option’, ‘autoHide’);  

$(‘.selector’).resizable({ ghost: true });  

设置:$(‘.selector’).resizable(‘option’, ‘autoHide’, true);

grid: 设置调整大小时候x y 轴每次移动多少像素。

cancel : Selector : ‘:input,option’  

JavaScript代码

阻止resizable插件加载在与你匹配的元素上。  

$(‘.selector’).draggable({ grid: [50, 20] });  

初始:$(‘.selector’).resizable({ cancel: ‘:input,option’ });  

handles: 可实行调整的边和角。默认只有 [右边,下边,右下角]可以调整。 可以根据参数{ n, e, s, w, ne, se, sw, nw }自由搭配。

获取:var cancel = $(‘.selector’).resizable(‘option’, ‘cancel’);  

JavaScript代码

设置:$(‘.selector’).resizable(‘option’, ‘cancel’, ‘:input,option’);

$(‘.selector’).resizable({ handles: ‘n, e, s, w’ });  

containment : String, Element, Selector : false  

helper: 拖拽组件也有这个属性,但是在这个里面 效果不同,这个里面helper的参数是一个字符串(class名字),当调整发生时,会有类似ghost的效果发生,只不过ghost效果所复制的是已 经定义好的,而这里可以自己根据css定义复制出来的 原始对象。同样,在调整结束后,这个复制对象会消失。

控制元素只能在某一个元素的大小之内改变。允许值:’parent’, ‘document’,
DOM元素, 或一个选择器.  

JavaScript代码

初始:$(‘.selector’).resizable({ containment: ‘parent’ });  

$(‘.selector’).resizable({ helper: ‘ui-state-highlight’ });  

获取:var containment = $(‘.selector’).resizable(‘option’,
‘containment’);  

maxHeight: maxWidth: minHeight: minWidth: 这2个属性,等同于css里面的 对应属性。实际上,如果不考虑ie6的话,在css定义 这些属性比在jQ里面定义这些属性效率更好。

设置:$(‘.selector’).resizable(‘option’, ‘containment’, ‘parent’);

JavaScript代码

delay : Integer : 0  

$(‘.selector’).resizable({ maxWidth: 250 });  

以毫秒为单位,当发生鼠标点击手柄改变大小,延迟多少毫秒后才激活事件。  

初始:$(‘.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] )

网站地图xml地图