zoukankan      html  css  js  c++  java
  • resizable

    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>
  • 相关阅读:
    HSV 量化
    小议:部署SharePoint 2013时,无法连接SQL Server问题
    BZOJ 1492 货币兑换 cdq分治或平衡树维护凸包
    初识ASP.NET---一般处理程序
    Vue.js
    jQuery内部原理和实现方式浅析
    关于js中namespace命名空间模式
    MutationObserver 监听DOM树变化
    TCP/UDP常见端口参考
    运算符优先级
  • 原文地址:https://www.cnblogs.com/m01qiuping/p/6486369.html
Copyright © 2011-2022 走看看