easyUI resizable组件使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="easyui/jquery.min.js"></script> <script src="easyui/jquery.easyui.min.js"></script> <script src="easyui/locale/easyui-lang-zh_CN.js"></script> <script src="js/test005.js"></script> <link rel="stylesheet" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" href="easyui/themes/icon.css"> </head> <body> <div id="box2" class="easyui-resizable" style="border:1px solid black;300px;height:300px"></div> <div id="box" style="border: 1px solid red;300px;height:300px"></div> </body> </html>
$(function(argument) { var obj = { //disabled:true,//不能拖动了； handles: 'all', //能够拖动的方向；n-上北，all-全部 minHeight: 200, //最小能够拖到的高度 minWidth: 200, maxHeight: 400, //最大能够拖到的高度 maxWidth: 400, edge: 10, //拖动的边的宽度 onStartResize: function(e) { //mousedown console.log('onStartResize'); console.log(e); }, onResize: function(e) { //mousemove // console.log('onResize'); // console.log(e); console.log($(this).resizable('options')); //获得options对象； }, onStopResize: function(e) { //mouseup console.log('onStopResize'); console.log(e); } }; $('#box').resizable(obj);
$('#box').resizable('disable'); //有效果呀；
$('#box2').resizable('disable'); //有效果呀；
});