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;width:300px;height:300px"></div>
<div id="box" style="border: 1px solid red;width: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'); //有效果呀;
}); 

easyUI resizable组件使用的更多相关文章

  1. Easyui部分组件讲解

    Easyui部分组件讲解 目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBo ...

  2. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  3. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  4. easyUI panel组件

    easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. easyUI progressbar组件

    easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. easyUI linkbutton组件

    easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. easyUI tootip组件使用

    easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. easyUI droppable组件使用

    easyUI droppable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. easyUI draggable组件使用

    easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. 请问如何在PS中将一张图标里的各个小图标分离成一个个图标?

    1.用切片工具比较简单快捷,把要切的图标一个个的切画出来,切好后存储保存格式为web,导出时候会出现一个images文件里面就是刚切好的图片 2.用裁剪的方式裁剪你要小图标,(你可以记住第一个裁剪的长 ...

  2. Codeforces Round #367 (Div. 2)D. Vasiliy's Multiset (字典树)

    D. Vasiliy's Multiset time limit per test 4 seconds memory limit per test 256 megabytes input standa ...

  3. Myeclipse添加struts2支持后取消操作

    Myeclipse添加struts包后, 想重新加载的方法: 1. myelicpse,右键项目,选close project 2. 找到项目所在目录, 打开.classpath删除带有struts2 ...

  4. pe and elf

    http://staff.ustc.edu.cn/~sycheng/sst/exp_crack/ELF.pdf https://refspecs.linuxbase.org/elf/TIS1.1.pd ...

  5. ural1028 Stars

    Stars Time limit: 0.25 secondMemory limit: 64 MB Astronomers often examine star maps where stars are ...

  6. Sencha Touch学习(一)

    一.Ext的内部类结构示意图 基类Ext.Base 该类是所有通过Ext.define定义出来的类的基类. 是所有Ext类的基石. 来自为知笔记(Wiz)

  7. MAC 10.10解决 PHP GD库的问题

    1. http://yangjunwei.com/a/1570.html 2. http://php-osx.liip.ch

  8. dependency injection(2)

    https://segmentfault.com/a/1190000002424023

  9. (译)Windsor入门教程---第五部分 添加日志功能

    介绍     现在我们已经有了基础的框架了,是时候添加内容了,那么我们首先应该考虑的就是在应用程序中添加日志功能.我们会使用Windsor来配置,在这一部分,你将学习Windsor之外的其他功能. L ...

  10. SpingMvc 注解的使用

    1.使用注解减少配置xml文件 2.注解可以降低耦合度 3.使用注解编写的普通类 import javax.servlet.http.HttpServletRequest; import org.sp ...