JQuery EasyUI(5)_easyui jquer.min.js 5-优快云博客

第五章：Resizable（调整大小）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式


<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <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 id="rr" class="easyui-resizable" data-options="maxWidth:600,maxHeight:400," style="width:100px;height:100px;border:1px solid black">
    
      </div>   
  </body>
</html>

2.JS调用


<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <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 id="rr" style="width:100px;height:100px;border:1px solid black">
    
    </div>   
  </body>
</html>

$(function(){
      $('#rr').resizable({
       
  });
});

二、属性列表：

Resizable属性
属性名	值	说明
disabled	boolean	默认为false,设置为true,则禁用调整
handles	string	默认为n,e,w,s,ne,se,sw,nw,all。声明调整的方位，n表示北，e表示东，s表示南，w表示西，还有ne,se,sw,nw,all
minWidth	number	默认10，调整大小时最小宽度
minHeigth	number	默认10，调整大小时最小高度
maxWidth	number	默认1000，调整大小时最大宽度
maxHeigth	number	默认1000，调整大小时最大高度
edge	number	默认5，边框边缘触发大小

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <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 id="rr" style="width:100px;height:100px;border:1px solid black">
    
      </div>
  </body>
</html>

$(function(){
      $('#rr').resizable({
       //disabled:true,
       //handles:'e,s,se', 
       //minWidth:200,
       //minHeight:200,
       //maxWidth:600,
       //maxHeight:400,
        edge:50,
  });
});

三、事件列表

Resizable事件
事件名	传参	说明
onStartResize	e	在开始改变大小时候触发
onResize	e	在调整大小时触发，当返回false的时候，不会实际改变DOM元素大小
onStopResize	e	在停止更改变大小的时候触发

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <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 id="rr" style="width:100px;height:100px;border:1px solid black">
    
    </div>   
  </body>
</html>

$(function(){
      $('#rr').resizable({
       onStartResize:function(e){
        console.log('开始调整的时候触发！');
    },
       onResize:function(e){
        console.log('调整期间的时候触发！');
        //return false;
    },
       onStopResize:function(e){
        console.log('停止调整的时候触发！');
    },
  });
});

四、方法列表

Resizable方法
方法名	传参	说明
options	none	返回属性对象
enable	none	启用调整功能
disable	none	禁止调整功能

PS：我们可以使用$.fn.resizable.defaults 重写默认值对象。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <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 id="rr" style="width:100px;height:100px;border:1px solid black">
    
     </div>
  </body>
</html>

$(function(){

     $.fn.resizable.defaults.disabled = true;

      $('#rr').resizable({
       onStartResize:function(e){
        console.log('开始调整的时候触发！');
    },
       onResize:function(e){
        console.log('调整期间的时候触发！');
        //return false;
    },
       onStopResize:function(e){
        console.log('停止调整的时候触发！');
    },
  });

    console.log($('#rr').resizable('options'));
    $('#rr').resizable('enable');
    $('#rr').resizable('disable');
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102834988

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！