JQuery-Easyui----Resizable( 调整大小) 组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery-Easyui----Resizable( 调整大小) 组件相关的知识,希望对你有一定的参考价值。

学习要点:

1.加载方式
2.属性列表
3.事件列表
4.方法列表

本节重点了解 EasyUI 中 Resizeable(调整大小)组件的使用方法,调整大小就是可以对元素可以拖着调整大小,这个组件不依赖于其他组件。

一.加载方式

  在Easyui中所有的组件都有二种加载方式

  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="box" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;">
</div>
</body>
</html>

  JS加载方式

$(‘#box‘).resizable({
    maxWidth:800,
    maxHeight:600,
});

二. 属性列表

//属性设置
$(‘#box‘).resizable({
    disabled : true,  //disabled  boolean  默认为 false,设置为 true 则禁用调整
    handles : ‘se‘,//handles string 默认为 n,e,s,w,ne,se,sw,nw,all, 声明调整的方位,n 表示北、e 表示东、s 表示南、w 表示西、还有 ne、se、sw、nw 和 all
    minWidth : 200,//minWidth number 默认 10,调整大小时最小宽度
    minHeight : 200,//minHeight number 默认 10,调整大小时最小高度
    maxWidth : 500,//maxWidth number 默认 10000,调整大小时最大宽度
    maxHeight : 350,//maxHeight number 默认 10000,调整大小时最大高度
    edge : 20,//edge number 默认 5,边框边缘触发大小
});

三. 事件列表

$(‘#box‘).resizable({
        onStartResize : function (e) {
        console.log(‘开始改变大小时!‘);
    },
    onResize : function (e) {
        console.log(‘调整大小时期触发!‘);
        //return false;
    },
    onStopResize : function (e) {
        console.log(‘停止调整大小时触发!‘);
    },
});

四. 方法列表

//返回属性对象
console.log($(‘#box‘).resizable(‘options‘));
方法名 传参 说明
options none 返回属性对象
enable none 启用调整功能
disable none 禁用调整功能
//禁止调整
$(‘#box‘).resizable(‘disable‘);
//启用放置
$(‘#box‘).resizable(‘enable‘);
PS:我们可以使用$.fn.resizable.defaults 重写默认值对象。
$.fn.resizable.defaults.disabled = true;

 

以上是关于JQuery-Easyui----Resizable( 调整大小) 组件的主要内容,如果未能解决你的问题,请参考以下文章