JQuery-Easyui----Resizable( 調整大小) 組件

時間 2019-12-13

標籤 jquery easyui resizable 調整大小組件欄目 JQuery 简体版

原文原文鏈接

學習要點：javascript

1.加載方式
2.屬性列表
3.事件列表
4.方法列表css

本節重點了解 EasyUI 中 Resizeable(調整大小)組件的使用方法，調整大小就是能夠對元素能夠拖着調整大小，這個組件不依賴於其餘組件。html

一．加載方式

　　在Easyui中全部的組件都有二種加載方式java

　　class加載方式jquery

<!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;