EasyUI jQuery可调整的小部件
在这篇文章中,我们将学习如何使用jQuery EasyUI设计一个可调整大小的widget。一个可调整大小的部件使给定的元素可以调整大小。它有助于建立交互式网络和移动应用程序的功能,为开发人员节省大量的时间。
EasyUI for jQuery的下载:
https://www.jeasyui.com/download/index.php
语法:
var a = $(".selector").resizable({
});
属性:
- disabled:如果disabled属性被设置为true,可调整大小将被禁用。
- handle。指明可调整大小的方向。
- minWidth:调整大小时的最小宽度。
- minHeight。调整大小时的最小高度。
- maxWidth:调整大小时的最大宽度。
- maxHeight。调整大小时的最大高度。
- edge。要调整大小的边框的边缘。
事件:
- onStartResize。当调整大小开始时,该事件被触发。
- onResize。这个事件在调整大小时被触发。
- onStopResize : 当停止调整大小时,该事件被触发。
方法:
- options。它返回选项的属性。
- Enable。它启用可调整大小的属性。
- disable。它禁用了可调整大小的属性。
CDN链接:首先,添加你的项目需要的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>
</script>
示例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="initial-scale=1.0, maximum-scale=1.0,
user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<h1>GeeksforGeeks</h1>
<h3>Easy UI | resizable widget</h3>
</head>
<body>
Resize
<div class="easyui-resizable"
style="width:190px;height:190px;border:1px solid #ccc;"
data-options="maxWidth:800,maxHeight:600">
</div>
</body>
</html>
输出: