首页 > 代码库 > resizable可调整尺寸组件

resizable可调整尺寸组件

2024-09-16 07:10:29   217人阅读

Resizable 可调整尺寸
不依赖于其他组件

1、用法：
通过标记创建可调整尺寸（resizable）对象
<div class="easyui-resizable" style="width:100px;height:100px; border:1px solid #ccc;" data-options="maxWidth:800,maxHeight:600">
<div>
使用js创建可调整尺寸（resizable）对象

2、属性
disabled boolean 如果设置为true，则禁止调整尺寸 false
handles string 指可调整尺寸（resizable）的方向，‘n’是北，‘e’是南，等等。 n,e,s,w,ne,se,nw,all
minWidth number 调整尺寸时的最小宽度 10
minHeight 调整尺寸时的最小高度 10
maxWidth number 调整尺寸时最大宽度 10000
maxHeight number调整尺寸时的最大高度 10000
edge number 被调整尺寸的边框的边缘,边框边缘触发大小 5

3、事件
onStartResize e 开始调整尺寸时触发
onResize e 调整尺寸期间触发。返回false时，DOM元素将不进行实际的调整尺寸动作
onStopResize e 停止调整尺寸时触发

4、方法
options none 返回可调整尺寸（resizable）选项（options）
enable none 启用可调整尺寸（resizable）特性
disable none 禁用可调整尺寸（resizable）特征

通过$.fn.resizable.defaults重写默认的defaults

句柄设置多个方向拖动，中间使用逗号连接，例如：handles : "e,s"
edge属性与拖动组件的那个产生的效果相反，属于边缘区域的话我们可以调整大小
onResize 调整尺寸期间如果返回的是false，那么在拖动的过程中dom元素不会有任何变化，拖动完毕后产生变化

 

<html>
<title>index</title>
<head>
<meta charset="UTF-8">
   
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
    <!--
    <div class="easyui-resizable" style="width:100px;height:100px; border:1px solid #ccc;" data-options="maxWidth:800,maxHeight:600">
    <div>
    -->
    <div id="box" style="width:100px;height:100px;border:1px solid #ccc">
    </div>
    
</body>
</html>


$(function(){
    $.fn.resizable.defaults.minWidth = 80;
    
    $("#box").resizable({
        //minWidth:50,
        minHeight:50,
        maxWidth:800,
        maxHeight:600,
        handles:"e,s",
        //edge:50,
        //onStartResize : function(e){
            //$(this).css("background","red");
        //},
        onResize: function(){
            //console.log(this.style.width + "--" + this.style.height);
            //return false;
        },
        onStopResize:function(e){
            $(this).css("background","orange");
        }
    });
    
    //console.log($("#box").resizable("options"));
    //$("#box").resizable(‘disable‘);
    //$("#box").resizable(‘enable‘);
    
});

 

resizable可调整尺寸组件


联系
我们