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( 调整大小) 组件的主要内容，如果未能解决你的问题，请参考以下文章