jquery.ui.resizable中文文档
2009-11-25 23:22
309 查看
我的博客和http://www.heyjava.com同步更新. 感谢各位朋友的支持.
<?xml version="1.0" encoding="UTF-8" ?>
<!--
注意事项:
1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议
2. 格式中的所有项都是选填, 如果没有, 不写就是了.
3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<![CDATA[这中间写内容]]>
4. 翻译过程中, 一块对应的是一个<translate />标签.
5. 希望大家工作愉快.
-->
<project>
<translate item="droppable" version="7.1">
<translators>
<translator nickname="selfimpr" name="雷果国" mail="lgg860911@yahoo.com.cn" homepage="http://blog.csdn.net/lgg201" qq="285821471" />
<translator nickname="学习中" name="" mail="77413446@qq.com" homepage="" qq="77413446" />
</translators>
<relatives>
<depend isitem="false">
<name><![CDATA[jquery]]></name>
<description><![CDATA[jquery的核心库]]></description>
<url><![CDATA[http://docs.jquery.com]]></url>
</depend>
<depend isitem="false">
<name><![CDATA[jquery.ui.core]]></name>
<description><![CDATA[jquery.ui的核心库]]></description>
<url><![CDATA[http://jqueryui.com/demos]]></url>
</depend>
</relatives>
<overview>
<original><![CDATA[jQuery的用户界面的大小可调整外挂让选定的元素可调整大小的（这意味着他们有可拖动调整句柄）。您可以指定一个或多个处理以及最大和最小宽度和高度。
所有的回调（启动，停止，调整大小）接受两个参数：原来的浏览器的事件，并准备好的用户界面对象。用户界面对象具有以下领域：
ui.helper- 一个jQuery的对象包含辅助元素
ui.originalPosition-{top,left} 开始前调整大小
ui.originalSize-{width,height}开始前调整大小
ui.position-{top, left} 当前位置
ui.size-{width,height} 当前大小
]]></original>
</overview>
<options>
<option name="alsoResize" default="false">
<types>
<type name="选择器">
<description><![CDATA[选择器是使用了jQuery选择一个DOM文档的DOM元素。该文件是在大多数情况下，在所有的浏览器DOM文档存在，但也可以是一个XML文档获得通过AJAX。
该选择器是一个自定义的CSS和补充组成。 XPath的选择器可作为一个插件。
所有在jQuery选择器可被记录在选择器API页面。
有很多的插件以其他方式利用jQuery的选择器。验证插件接受一个选择指定的依赖，是否需要输入或不：
emailrules: {
required: "#email:filled"
}
这将使一个名字复选框“emailrules”规定只有当用户输入一个电子邮件域名的电子邮件地址，选择通过它的ID，通过自定义选择过滤“：填写”插件提供的验证。
如果选择是作为一个参数的类型指定的，它接受一切，jQuery的构造函数接受，例如。字符串，元素，元素的列表。
]]>
</description>
</type>
<type name="元素">
<description><![CDATA[在文档对象模型（DOM）元素有属性，文本和子类。它提供的方法遍历父类和子类，并可以访问它的属性。由于在DOM API的规范和实现漏洞很多，这些方法不好使用。 jQuery提供了一种围绕这些要素的包装，以帮助与DOM交互。但往往不能满足你直接使用DOM元素，或明白这些方法是（也）接受DOM元素作为参数。
当你使用jQuery的每一个，方法，对你的回调中被设置为一个DOM元素。这也是对事件处理情况。
对DOM元素的一些性质是相当一致的浏览器中。假设这是一个简单的例子模糊验证：
$(":text").blur(function() {
if(!this.value) {
alert("Please enter some text!");
}
});
你可以用$(this).val() 去代替 this.value 来访问的通过jQuery的文本输入值，但在这种情况下，你不会得到任何东西。
]]></description>
</type>
</types>
<description><![CDATA[用来指定需要同步更新大小的元素,这里不仅可以指定内部的元素, 也可以指定外部的元素, 改变外部元素见第四个demo]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ alsoResize: '.other' });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var alsoResize = $('.selector').resizable('option', 'alsoResize');
]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'alsoResize', '.other');]]></code>
</demo>
<demo>
<comment><![CDATA[同步调整外部元素]]></comment>
<code><![CDATA[
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
alsoResize: '#x'
});
});
</script>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<div id="x" style="border: 1px solid red; width: 80px; height: 80px;"></div>
</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
]></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" class="ui-widget-content">
<div id="bottom" class="ui-resizable-s ui-resizable-handle">从我这里拖动</div>
<div id="right" class="ui-resizable-e ui-resizable-handle" >右<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" class="ui-widget-content">
中华人民共和国
</div>
</body>
]]></code>
</demo>
</demos>
</option>
<option name="maxHeight" 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" class="ui-widget-content">
</div>
</body>
]]></code>
</demo>
</demos>
</event>
<event name="resize">
<trigger><![CDATA[拖动过程中, 鼠标每移动1像素触发一次.]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: resize]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').resizable({
resize: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('resize', function(event, ui) {
...
});
]]></code>
</demo>
</demos>
</event>
<event name="stop">
<trigger><![CDATA[停止拖动]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: resizestop]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').resizable({
stop: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('resizestop', function(event, ui) {
...
});
]]></code>
</demo>
</demos>
</event>
</events>
<methods>
<method name="destroy">
<description><![CDATA[完全移除一个resizable控件, 使其回退到该元素被初始化成resizable控件之前的状态.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").resizable('destroy');]]></code>
</demo>
</demos>
</method>
<method name="disable">
<description><![CDATA[将可改变大小控件样式改变成为失效, 与enable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").resizable('disable');]]></code>
</demo>
</demos>
</method>
<method name="enable">
<description><![CDATA[将可改变大小控件样式改变为允许, 与disable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").resizable('enable');]]></code>
</demo>
</demos>
</method>
<method name="option">
<arguments>
<argument name="optionName " 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 class="ui-resizable">
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
<div 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>
<?xml version="1.0" encoding="UTF-8" ?>
<!--
注意事项:
1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议
2. 格式中的所有项都是选填, 如果没有, 不写就是了.
3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<![CDATA[这中间写内容]]>
4. 翻译过程中, 一块对应的是一个<translate />标签.
5. 希望大家工作愉快.
-->
<project>
<translate item="droppable" version="7.1">
<translators>
<translator nickname="selfimpr" name="雷果国" mail="lgg860911@yahoo.com.cn" homepage="http://blog.csdn.net/lgg201" qq="285821471" />
<translator nickname="学习中" name="" mail="77413446@qq.com" homepage="" qq="77413446" />
</translators>
<relatives>
<depend isitem="false">
<name><![CDATA[jquery]]></name>
<description><![CDATA[jquery的核心库]]></description>
<url><![CDATA[http://docs.jquery.com]]></url>
</depend>
<depend isitem="false">
<name><![CDATA[jquery.ui.core]]></name>
<description><![CDATA[jquery.ui的核心库]]></description>
<url><![CDATA[http://jqueryui.com/demos]]></url>
</depend>
</relatives>
<overview>
<original><![CDATA[jQuery的用户界面的大小可调整外挂让选定的元素可调整大小的（这意味着他们有可拖动调整句柄）。您可以指定一个或多个处理以及最大和最小宽度和高度。
所有的回调（启动，停止，调整大小）接受两个参数：原来的浏览器的事件，并准备好的用户界面对象。用户界面对象具有以下领域：
ui.helper- 一个jQuery的对象包含辅助元素
ui.originalPosition-{top,left} 开始前调整大小
ui.originalSize-{width,height}开始前调整大小
ui.position-{top, left} 当前位置
ui.size-{width,height} 当前大小
]]></original>
</overview>
<options>
<option name="alsoResize" default="false">
<types>
<type name="选择器">
<description><![CDATA[选择器是使用了jQuery选择一个DOM文档的DOM元素。该文件是在大多数情况下，在所有的浏览器DOM文档存在，但也可以是一个XML文档获得通过AJAX。
该选择器是一个自定义的CSS和补充组成。 XPath的选择器可作为一个插件。
所有在jQuery选择器可被记录在选择器API页面。
有很多的插件以其他方式利用jQuery的选择器。验证插件接受一个选择指定的依赖，是否需要输入或不：
emailrules: {
required: "#email:filled"
}
这将使一个名字复选框“emailrules”规定只有当用户输入一个电子邮件域名的电子邮件地址，选择通过它的ID，通过自定义选择过滤“：填写”插件提供的验证。
如果选择是作为一个参数的类型指定的，它接受一切，jQuery的构造函数接受，例如。字符串，元素，元素的列表。
]]>
</description>
</type>
<type name="元素">
<description><![CDATA[在文档对象模型（DOM）元素有属性，文本和子类。它提供的方法遍历父类和子类，并可以访问它的属性。由于在DOM API的规范和实现漏洞很多，这些方法不好使用。 jQuery提供了一种围绕这些要素的包装，以帮助与DOM交互。但往往不能满足你直接使用DOM元素，或明白这些方法是（也）接受DOM元素作为参数。
当你使用jQuery的每一个，方法，对你的回调中被设置为一个DOM元素。这也是对事件处理情况。
对DOM元素的一些性质是相当一致的浏览器中。假设这是一个简单的例子模糊验证：
$(":text").blur(function() {
if(!this.value) {
alert("Please enter some text!");
}
});
你可以用$(this).val() 去代替 this.value 来访问的通过jQuery的文本输入值，但在这种情况下，你不会得到任何东西。
]]></description>
</type>
</types>
<description><![CDATA[用来指定需要同步更新大小的元素,这里不仅可以指定内部的元素, 也可以指定外部的元素, 改变外部元素见第四个demo]]></description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').resizable({ alsoResize: '.other' });]]></code>
</demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var alsoResize = $('.selector').resizable('option', 'alsoResize');
]]></code>
</demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').resizable('option', 'alsoResize', '.other');]]></code>
</demo>
<demo>
<comment><![CDATA[同步调整外部元素]]></comment>
<code><![CDATA[
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
alsoResize: '#x'
});
});
</script>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<div id="x" style="border: 1px solid red; width: 80px; height: 80px;"></div>
</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
]></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" class="ui-widget-content">
<div id="bottom" class="ui-resizable-s ui-resizable-handle">从我这里拖动</div>
<div id="right" class="ui-resizable-e ui-resizable-handle" >右<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" class="ui-widget-content">
中华人民共和国
</div>
</body>
]]></code>
</demo>
</demos>
</option>
<option name="maxHeight" 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" class="ui-widget-content">
</div>
</body>
]]></code>
</demo>
</demos>
</event>
<event name="resize">
<trigger><![CDATA[拖动过程中, 鼠标每移动1像素触发一次.]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: resize]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').resizable({
resize: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('resize', function(event, ui) {
...
});
]]></code>
</demo>
</demos>
</event>
<event name="stop">
<trigger><![CDATA[停止拖动]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: resizestop]]></description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[
$('.selector').resizable({
stop: function(event, ui) { ... }
});
]]></code>
</demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[
$('.selector').bind('resizestop', function(event, ui) {
...
});
]]></code>
</demo>
</demos>
</event>
</events>
<methods>
<method name="destroy">
<description><![CDATA[完全移除一个resizable控件, 使其回退到该元素被初始化成resizable控件之前的状态.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").resizable('destroy');]]></code>
</demo>
</demos>
</method>
<method name="disable">
<description><![CDATA[将可改变大小控件样式改变成为失效, 与enable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").resizable('disable');]]></code>
</demo>
</demos>
</method>
<method name="enable">
<description><![CDATA[将可改变大小控件样式改变为允许, 与disable对应.]]></description>
<demos>
<demo>
<code><![CDATA[$(".selector").resizable('enable');]]></code>
</demo>
</demos>
</method>
<method name="option">
<arguments>
<argument name="optionName " 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 class="ui-resizable">
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
<div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
<div 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档.
- jquery.ui.progressbar中文文档
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档jquery 自由拖拽类~study~
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档
- jquery.ui.progressbar 中文文档
- jquery.ui.draggable中文文档
- jquery.ui.progressbar 中文文档
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档jquery 自由拖拽类~study~
- jquery.ui.draggable中文文档jquery 自由拖拽类
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档(原文翻译)
- jquery.ui中文文档翻译----draggable
- jquery.ui.draggable中文文档(原文翻译)