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. windows下强大的wmic命令行工具

    windows最令网管诟病的地方就是命令行没有unix和linux强大.但这种情况正在不断改观,windows命令行也越来越强大了.其中,微软耗费大量精力打造的wmi就是一例.  获得进程ID与进程名 ...

  2. phpstrom 快捷键

    常用的PHPStorm快捷键:ctrl+j 插入活动代码提示ctrl+alt+t 当前位置插入环绕代码alt+insert 生成代码菜单ctrl+q 查看代码注释ctrl+d 复制当前行ctrl+y ...

  3. PAT (Advanced Level) 1025. PAT Ranking (25)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  4. Ketama Consisent Hash

    问题描述 有一些目标节点 v1, v2...vn 需要一个算法,能够将任意key映射到目标节点中的一个vx 评价方式 1. 对于一个比较大的key集合,分布在各个目标节点的key的数量要尽可能均匀 2 ...

  5. 在XAMPP上建立多个域名的站点

    XAMPP默认安装完毕后,站点文件默认放在/xampp/htdocs/ 文件下,并且可以通过http://localhost 进行访问.先前在测试各种程序的时候均是在/xampp/htdocs/ 文件 ...

  6. 织梦系统与discuz论坛整合方法

    如何完成dedecms模板系统与discuz论坛整合呢? 这里的整合指会员信息,会员登陆.退出的同步:论坛信息的引用:等等. 首先,我们先来安装织梦(dedecms)系统. 然后,我们在网站根目录下建 ...

  7. 从url中提取参数名和参数值(转)

    在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到.js的实现方法如下: function getValue(url, name) { var reg = new RegExp('(\\?| ...

  8. 在Windows环境下设置terminal下调试adb

    当我们想要查看某些程序运行的结果的时候.可能需要打开adb,输入相应的命令,在Windows环境下,需要配置环境变量. 当我们直接在Windows环境下输入adb shell,会提示adb是不内部命令 ...

  9. 使用DLL进行不同语言之间的调用（转）

    源:使用DLL进行不同语言之间的调用 __declspec(dllexport) 是告诉编译器用来导出函数的,在代码中不另作说明了. extern "C" 的意思就是用C的方式来导 ...

  10. 你会做Web上的用户登录功能吗？

    Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...