Resizable(调整大小)组件

Posted 2022-09-12 alaic2052243080

一、class加载方式

   <div id="pop" class="easyui-resizable" data-options="maxWidth:400, maxHeight:400" style="width: 100px;height: 100px;background-color: powderblue"></div>

二、js加载方式

       $("#pop").resizable(

         //属性
            disabled:false , //设置为 true 则禁用调整,默认为 false
            handles:‘s,e‘, //值为string ，声明调整的方位 n/s/w/e/ne/se/sw/nw/all -> 北/南/西/东
            minWidth:200 , //最小宽度 默认为10
            minHeight:200, //最小高度 默认为10
            maxWidth:400 , //最大宽度 默认为10000
            maxHeight:400 , //最大高度 默认为10000
            edge:50 , //边框边缘触发大小 默认 5
      //事件
           onResize:function ()
                 return false
           , //在调整大小期间触发。当返回 false 的时候， 不会实际改变 DOM 元素大小,直到松开鼠标左键才会改变DOM元素大小
          onStartResize : function (e) , //在开始改变大小的时候触发
          onStopResize : function (e) , //在停止改变大小的时候触发

          );
     //方法
         $(‘#pop‘).resizable(‘options‘); //返回属性对象
         $(‘#box‘).resizable(‘disable‘); //禁止调整
         $(‘#box‘).resizable(‘enable‘); //启用放置

三、可以使用重写默认值对象?  如：$.fn.resizable.defaults.disabled = true