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. dedecms自定义表单

  2. 计算机学院大学生程序设计竞赛（2015’12） 1005 Bitwise Equations

    #include<cmath> #include<cstdio> #include<cstring> #include<algorithm> using ...

  3. 推荐！国外程序员整理的Java资源大全

    http://www.importnew.com/14429.html 本文由 ImportNew - 唐尤华 翻译自 github akullpp.欢迎加入翻译小组.转载请见文末要求. 构建 这里搜 ...

  4. 中国气象台api

    1. XML接口 http://flash.weather.com.cn/wmaps/xml/china.xml 这个是全国天气的根节点,列出所有的省,其中的pyName字段是各个省XML的文件名,比 ...

  5. Classification of text documents: using a MLComp dataset

    注:原文代码链接http://scikit-learn.org/stable/auto_examples/text/mlcomp_sparse_document_classification.html ...

  6. JAVA基础--单例模式

    public class Singleton02 { // 私有的静态的类变量 private static Singleton02 instance = null; // 私有的构造方法 priva ...

  7. AngularJs ng-class 使用

    今天在做项目的时候要对表格内的部分的最大最小值高亮 解决方案 1. 引用 ng-class 2. 引用原型求最大最小值 实例 AngularJs HTML 代码 <table class=&qu ...

  8. UDP网络程序模型设计

    UDP网络程序设计 1. UDP网络编程模型程序初始化 1.1服务器使用的函数 创建socket----->socket 绑定地址-------->bind 接受数据--------> ...

  9. struts2拦截器-自定义拦截器，放行某些方法（web.xml配置）

    一.web.xml配置 <filter> <filter-name>encodingFilter</filter-name> <filter-class> ...

  10. Unity3D ——强大的跨平台3D游戏开发工具（五）

    第九章 图形用户界面类G.U.I 您在玩很多3D游戏的时候,不知是否注意到在游戏界面中,总有一些图形和文字信息是不随着3D视角的改变而改变的.这也是由于游戏本身的要求而决定的.比如说英雄的生命值,聊天 ...