easyui的resizable用来设置元素为可变大小
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" /> <script type="text/javascript"> $(function(){ $.fn.resizable.defaults.disabled=true; $("#box1").resizable({ disabled : false,//是否禁止 maxWidth : 250, maxHeight :250, minWidth:20, minHeight :20, handles : "all",//调整的方向 edge : 61,//边框边缘触发大小 onStartResize : function(e){ console.log("在开始改变大小是触发"); }, onResize : function(e){ console.log("在调整大小期间触发"); }, onStopResize : function(e){ console.log("在停止改变大小时触发"); console.log($("#box1").resizable("options")); //$("#box1").resizable("enable");// //$("#box1").resizable("disable");设置禁止缩放 } }); }); </script> </head> <body> <div id="box" class="easyui-resizable" data-options="maxWidth:200,maxHeight:200" style="100px;height:100px;border:1px solid #ccc;"></div> <div id="box1" style="100px;height:100px;border:1px solid #ccc;"></div> </body> </html>