Resizable 可调整尺寸
不依赖于其他组件
1、用法：
通过标记创建可调整尺寸（resizable）对象
<div class="easyui-resizable" style="100px;height:100px; border:1px solid #ccc;" data-options="maxWidth:800,maxHeight:600">
<div>
使用js创建可调整尺寸（resizable）对象
2、属性
disabled boolean 如果设置为true，则禁止调整尺寸 false
handles string 指可调整尺寸（resizable）的方向，‘n’是北，‘e’是南，等等。 n,e,s,w,ne,se,nw,all
minWidth number 调整尺寸时的最小宽度 10
minHeight 调整尺寸时的最小高度 10
maxWidth number 调整尺寸时最大宽度 10000
maxHeight number调整尺寸时的最大高度 10000
edge number 被调整尺寸的边框的边缘,边框边缘触发大小 5
3、事件
onStartResize e 开始调整尺寸时触发
onResize e 调整尺寸期间触发。返回false时，DOM元素将不进行实际的调整尺寸动作
onStopResize e 停止调整尺寸时触发
4、方法
options none 返回可调整尺寸（resizable）选项（options）
enable none 启用可调整尺寸（resizable）特性
disable none 禁用可调整尺寸（resizable）特征
通过$.fn.resizable.defaults重写默认的defaults
句柄设置多个方向拖动，中间使用逗号连接，例如：handles : "e,s"
edge属性与拖动组件的那个产生的效果相反，属于边缘区域的话我们可以调整大小
onResize 调整尺寸期间如果返回的是false，那么在拖动的过程中dom元素不会有任何变化，拖动完毕后产生变化
<html> <title>index</title> <head> <meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> </head> <body> <!-- <div class="easyui-resizable" style="100px;height:100px; border:1px solid #ccc;" data-options="maxWidth:800,maxHeight:600"> <div> --> <div id="box" style="100px;height:100px;border:1px solid #ccc"> </div> </body> </html> $(function(){ $.fn.resizable.defaults.minWidth = 80; $("#box").resizable({ //minWidth:50, minHeight:50, maxWidth:800, maxHeight:600, handles:"e,s", //edge:50, //onStartResize : function(e){ //$(this).css("background","red"); //}, onResize: function(){ //console.log(this.style.width + "--" + this.style.height); //return false; }, onStopResize:function(e){ $(this).css("background","orange"); } }); //console.log($("#box").resizable("options")); //$("#box").resizable('disable'); //$("#box").resizable('enable'); });