jquery 的resizable详细设置引用：http://blog.csdn.net/lgg201/archive/2009/11/25/4874478.aspx/body]]
jquery 的resizable详细设置
引用：http://blog.csdn.net/lgg201/archive/2009/11/25/4874478.aspx
</body>
]]></code>
</demo>
</demos>
</option>
<option name="animate" default="false">
<types>
<type name="Boolean" />
</types>
<description><! [CDATA[调整大小过程中, 原始的元素是不变的, 等放开鼠标之后, 以一个动态效果扩展或收缩到调整的新的大小.]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ animate: true });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var animate = $('.selector').resizable('option', 'animate');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'animate', true);]]></code>
</demo>
</demos>
</option>
<option name="animateDuration" default="slow">
<types>
<type name="整数">
<description><![CDATA[从松开鼠标到resize完成的毫秒数]]></description>
</type>
<type name="字符串">
<option>
<value><![CDATA[slow]]></value>
<comment><! [CDATA[慢速]]></comment>
</option>
<option>
<value><![CDATA[normal]]></value>
<comment><! [CDATA[中速]]></comment>
</option>
<option>
<value><![CDATA[fast]]></value>
<comment><! [CDATA[快速]]></comment>
</option>
</type>
</types>
<description><![CDATA[
设置为animate之后, 该选项用来确定滑动的快慢, 字符串是预定义速度, 整数则是我们自定义滑动持续时间的地方.
]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ animateDuration: 500 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var animateDuration = $('.selector').resizable('option', 'animateDuration');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'animateDuration', 500);]]></code>
</demo>
</demos>
</option>
<option name="animateEasing" default="swing">
<types>
<type name="字符串">
</type>
</types>
<description><![CDATA[ 用来设置滑动是的动作. 但是由于官方文档中没有注明可选项, 所以, 似乎没有可用性.]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ animateEasing: 'swing' });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var animateEasing = $('.selector').resizable('option', 'animateEasing');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'animateEasing', 'swing');]]></code>
</demo>
</demos>
</option>
<option name="aspectRatio" default="false">
<types>
<type name="浮点数">
<description><![CDATA[定义resize之后的宽高比数值]]></description>
</type>
<type name="布尔型">
<option>
<value><![CDATA[true]]></value>
<comment><! [CDATA[使用初始化时候的宽高比]]></comment>
</option>
<option>
<value><![CDATA[false]]></value>
<comment><! [CDATA[不维持固定的官高比, 可以自由移动]]></comment>
</option>
</type>
</types>
<description><! [CDATA[用来设置resize之后的元素宽和高的比例.]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ aspectRatio: .75 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var aspectRatio = $('.selector').resizable('option', 'aspectRatio');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'aspectRatio', .75);]]></code>
</demo>
</demos>
</option>
<option name="autoHide" default="false">
<types>
<type name="布尔型">
</type>
</types>
<description><![CDATA[
设置是否将标识是resizable的样式自动隐藏. 也就是右下角的小斑纹.
]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ autoHide: true });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var autoHide = $('.selector').resizable('option', 'autoHide');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'autoHide', true);]]></code>
</demo>
</demos>
</option>
<option name="cancel" default=":input option">
<types>
<type name="选择器">
</type>
</types>
<description><! [CDATA[设置不能被渲染成resizable控件的选择器, 相当于一个过滤器的功能, 比如, 在初始化的时候, 使用了$('div').resizable()的方式一次初始化多个, 那么可以用cancel来做过滤.]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ cancel: ':input,option' });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var cancel = $('.selector').resizable('option', 'cancel');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'cancel', ':input,option');]]></code>
</demo>
</demos>
</option>
<option name="containment" default="false">
<types>
<type name="选择器">
</type>
<type name="元素">
</type>
<type name="字符串">
<option>
<value><![CDATA[parent]]></value>
<comment><! [CDATA[父元素范围内]]></comment>
</option>
<option>
<value><![CDATA[document]]></value>
<comment><! [CDATA[文档范围内]]></comment>
</option>
</type>
</types>
<description><! [CDATA[限定resize动作只能在选择器限定的元素, 字符串描述的范围, 或直接指定的元素的范围内进行.
译者注: 设置了animate为ture之后, 这个选项会失效, 怀疑是一个小bug, 已经给jquery.ui团队发邮件确认. 该属性详细用法请以最新官方文档为准.
译者注: 设置了ghost为true之后, 整个resize会变得杂乱无章, resize几次之后, 还有可能出现js错误, 这个应该是一个小bug, 已经提交. 该属性详细用法以最新官方文档为准.
]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ containment: 'parent' });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var containment = $('.selector').resizable('option', 'containment');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'containment', 'parent');]]></code>
</demo>
</demos>
</option>
<option name="delay" default="0">
<types>
<type name="整数">
</type>
</types>
<description><! [CDATA[设置一个延时时间, 用来防止无意识的点击造成的resize, 也就是说鼠标按下必须等待delay设置的毫秒数之后, 移动才是有效的resize]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ delay: 20 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var delay = $('.selector').resizable('option', 'delay');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'delay', 20);]]></code>
</demo>
</demos>
</option>
<option name="distance" default="1">
<types>
<type name="整数">
</type>
</types>
<description><! [CDATA[设置一个延迟的距离, 用来防止无意识的点击造成的resize, 也就是说鼠标按下移动了distance指定的像素值之后, resize才是有效的.]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ distance: 20 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var distance = $('.selector').resizable('option', 'distance');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'distance', 20);]]></code>
</demo>
</demos>
</option>
<option name="ghost" default="false">
<types>
<type name="布尔值">
</type>
</types>
<description><! [CDATA[用于设置在resize过程中, 是否呈现一个helper(关于helper可以查看draggable中解释)]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ ghost: true });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var ghost = $('.selector').resizable('option', 'ghost');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'ghost', true);]]></code>
</demo>
</demos>
</option>
<option name="grid" default="false">
<types>
<type name="数组">
</type>
</types>
<description><! [CDATA[接受一个[x, y]格式的数组, 用于设定resize的时候, 移动的单位. 比如设置了grid: [8, 5]那么, resize的时候, 就是以左右8像素, 上下5像素的单位进行的.
译者注: 当设置了grid选项之后, 如果同时设置了ghost选项, 他们之间的联合工作是有问题的, 具体表象为: resize过程中的helper元素是按照grid限定的方式运动的, 然而, 在松开鼠标之后, 我们定制的resize控件还是可以任意改变大小的.
也是疑似bug, 已经提交, 具体使用方式参考官方网站最新文档.
译者注: 设置了grid选项和ghost选项之后, 改变控件大小到足够小的时候, 会有javascript错误警告. 同时界面元素乱套了就.
也已经提交了, 以官方最新文档为主吧.
]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ grid: [50, 50] });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var grid = $('.selector').resizable('option', 'grid');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'grid', [50, 50]);]]></code>
</demo>
</demos>
</option>
<option name="handles" default="e, s, se">
<types>
<type name="字符串">
<option>
<value><![CDATA[n]]></value>
<comment><! [CDATA[北方]]></comment>
</option>
<option>
<value><![CDATA[e]]></value>
<comment><! [CDATA[东方]]></comment>
</option>
<option>
<value><![CDATA[s]]></value>
<comment><! [CDATA[南方]]></comment>
</option>
<option>
<value><![CDATA[w]]></value>
<comment><! [CDATA[西方]]></comment>
</option>
<option>
<value><![CDATA[ne]]></value>
<comment><! [CDATA[东北方向]]></comment>
</option>
<option>
<value><![CDATA[se]]></value>
<comment><! [CDATA[东南方向]]></comment>
</option>
<option>
<value><![CDATA[nw]]></value>
<comment><! [CDATA[西北方向]]></comment>
</option>
<option>
<value><![CDATA[sw]]></value>
<comment><! [CDATA[西南方向]]></comment>
</option>
</type>
<type name="对象">
<description><![CDATA[
设置一个对象, 对象可以有如下属性中的一个或多个{n, e, s, w, ne, se, nw, sw} 意义和字符串类型列举的意义一样. 通过每个属性指定一个选择器(resizable的内部元素), 或着要用外部元素就直接给一个DOM元素作为属性值...
译者注: 外部元素设置为resize时候的handle(控制器)我没有测试成功, 即便设置上了, 也是无效的.
译者注: 关于对象的这种使用方式, 在指定的元素上还需要指定样式. 详细见第四个demo
]]></description>
</type>
</types>
<description><! [CDATA[设置改变大小的时候, 可以从哪些地方进行改变(控制resize的部件), 字符串的情况下, 每个指定的字符串代表一个方向, 设定多个用逗号分割.]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ handles: 'n, e, s, w' });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var handles = $('.selector').resizable('option', 'handles');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'handles', 'n, e, s, w');]]></code>
</demo>
<demo>
<comment><! [CDATA[译者注: 在改变元素大小的时候, 以字符串方式仅仅是设置了在哪些方向可以改变, 但是, 具体的样式控制是不能做到的, 为了达到可以控制resize控制器的样式, 因此, 提供了对象指定的方式: handles: {s: $('h3'), e: $('#x')}, 内部元素可以直接使用选择器, 但是译者测试了外部元素, 设置相关属性之后, 样式可以生成, 却不能有有效的resize动作.
在使用对象方式指定自定义的handles的时候, 另外一点需要注意的是要给你指定的部件加上对应的样式, 以下为各个方向需要加的样式列表:
n: ui-resizable-n ui-resizable-handle
e: ui-resizable-e ui-resizable-handle
s: ui-resizable-s ui-resizable-handle
w: ui-resizable-w ui-resizable-handle
ne: ui-resizable-ne ui-resizable-handle
se: ui-resizable-se ui-resizable-handle
nw: ui-resizable-nw ui-resizable-handle
sw: ui-resizable-sw ui-resizable-handle
经过测试, n, e, s, w四个方向上的是没有问题的, 但是, 我和这玩意儿斗争了一个小时, 还是没有搞定ne等四个斜45度方向的自定义handles处理方式.
具体的使用, 见代码
]]></comment>
<code><![CDATA[
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#bottom{height: 20px; border: 1px solid red; margin-bottom: 4px; margin-left: -1px; cursor: hand; background: #BBEEBB; font-size: 12px;}
#right{width: 20px; border: 1px solid red; margin-top: -1px; text-align: center; cursor: hand; background: #BBEEBB; font-size: 12px;}
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
handles: {s: $('#bottom'), e: $('#right')}
});
});
</script>
</head>
<body>
<div id="resizable" >右<br />边<br />的<br />拖<br />动</div>
</div>
</body>
]]></code>
</demo>
</demos>
</option>
<option name="helper" default="false">
<types>
<type name="字符串">
</type>
</types>
<description><! [CDATA[设置resize过程中, 辅助的helper控件显示的样式, 这里指定的是样式名称. 可以同时指定多个样式, 多个样式名称之间用空格隔开.]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ helper: 'ui-state-highlight' });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var helper = $('.selector').resizable('option', 'helper');
]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'helper', 'ui-state-highlight');]]></code>
</demo>
<demo>
<comment><! [CDATA[译者注: 废话不多说, 把这个例子跑起来, 你就什么都明白了.关于这个选项.]]></comment>
<code><![CDATA[
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
.helper{background: red;}
.helper2{border: 5px solid blue;}
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: 'helper helper2'
});
});
</script>
<body>
<div id="resizable" default="null">
<types>
<type name="整数">
</type>
</types>
<description><! [CDATA[设置最大高度, 默认不限制]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ maxHeight: 300 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var maxHeight = $('.selector').resizable('option', 'maxHeight');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'maxHeight', 300);]]></code>
</demo>
</demos>
</option>
<option name="maxWidth" default="null">
<types>
<type name="整数">
</type>
</types>
<description><! [CDATA[设置最大宽度, 默认不限制]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ maxWidth: 250 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var maxWidth = $('.selector').resizable('option', 'maxWidth');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'maxWidth', 250);]]></code>
</demo>
</demos>
</option>
<option name="minHeight" default="10">
<types>
<type name="整数">
</type>
</types>
<description><! [CDATA[设置最小高度, 默认10像素]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ minHeight: 150 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var minHeight = $('.selector').resizable('option', 'minHeight');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'minHeight', 150);]]></code>
</demo>
</demos>
</option>
<option name="minWidth" default="10">
<types>
<type name="整数">
</type>
</types>
<description><! [CDATA[设置最小高度, 默认10像素]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ minWidth: 75 });]]></code>
</demo>
<demo>
<comment><! [CDATA[获取属性值]]></comment>
<code><![CDATA[var minWidth = $('.selector').resizable('option', 'minWidth');]]></code>
</demo>
<demo>
<comment><! [CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'minWidth', 75);]]></code>
</demo>
</demos>
</option>
</options>
<events>
<event name="start">
<trigger><![CDATA[开始拖动]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><! [CDATA[类型: resizestart]]></description>
<demos>
<demo>
<comment><! [CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').resizable({
start: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><! [CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('resizestart', function(event, ui) {
...
});
]]></code>
</demo>
<demo>
<comment><! [CDATA[译者注: 关于resizable的三个事件, 统一做个示例在这里, 运行示例, 一目了然]]></comment>
<code><![CDATA[
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
start: function(event, ui) {
$('#msg').html($('#msg').html() + '<br />start事件');
},
resize: function(event, ui) {
$('#msg').html($('#msg').html() + '<br />resize事件' + ui.size.width);
},
stop: function(event, ui) {
$('#msg').html($('#msg').html() + '<br />stop事件');
}
});
});
</script>
</head>
<body>
<div id="msg" style="color: red;"></div>
<div id="resizable" type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument>
<argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument>
</arguments>
<description><! [CDATA[获取或设置可改变大小控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").resizable('option', optionName[, value]);]]></code>
</demo>
</demos>
</method>
</methods>
<theme><![CDATA[
jquery.ui.resizable 插件使用了jquery.ui的css框架样式使它看起来更舒服, 包含一些颜色和背景等, 推荐使用jquery的在线样式定制来修改主题.
如果需要深层次的自定义样式, 可以修改ui.resizable.css这个样式表来达到预期效果.
在自己下载的版本中找到 ui.resizable.css, 这个文档中的样式都可以修改以达到想要效果.
下面代码是一个最终生成的最简单的resizable控件的 DOM代码, 这些代码可以帮助理解整个resizable控件的结构以便更方便的修改css.
<div unselectable="on" unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
</div>
]]></theme>
<summarize><![CDATA[
alsoResize: 设置跟随改变大小的元素
animate, animateDuration, animateEasing: 设置动态效果
aspectRatio: 设置宽高比例
autoHide: 设置控制改变大小的控制器是否自动隐藏.
cancel: 过滤的不可设置为改变大小的控件
containment, maxHeight, maxWidth, minHeight, minWidth: 设定可改变大小的范围
delay, distance: 设置延迟以防止意外操作.
ghost, helper: 设置resize过程中的helper控件
grid: 设置resize改变的单位
]]></summarize>
</translate>
</project>
