【连载】研究EasyUI系统— Resizable组件
2017-02-10 本文已影响63人
我想我是人
resizable组件提供了一种可拉伸、缩小放大的功能，很多桌面应用程序，比如图片查看器、word文档等，用户可以通过鼠标将程序拉大拉小，resizable组件则在web页面上为各类元素提供了类似的功能，我们先通过一个缩放图片的例子了解一下resizable组件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<title>resizableDemo</title>
<style>
.resizableContainer {
width:520px; /*原图宽度*/
height: 245px; /*原图高度*/
border: 1px solid lightblue;
}
.imgDemo {
width:100%;
height:100%;
}
.resizableInfo {
width:200px;
height: 30px;
border: 1px solid lightblue;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="showInfo" class="resizableInfo"></div>
<div id="resizable" class="easyui-resizable resizableContainer">
< img src='images/demo.jpg' id="imgResizable" class="imgDemo" />
</div>
</div>
<script>
$("#resizable").resizable({
handles:'all',
maxWidth:520,
maxHeight:245,
edge:5,
onResize:function(e) {
/* 在onResize事件中实时显示当前图片高度和宽度 */
$("#showInfo").html("");
$("#showInfo").html("宽度：" + $("#resizable").width() + " " + "高度：" + $("#resizable").height());
}
});
</script>
</body>
</html>
效果图如下：
resizable组件效果图
resizable组件属性：
| 属性名称 | 属性值类型 | 属性默认值 | 描述 |
|---|---|---|---|
| handles | 字符串 | “all” | 指定缩放方向。 |
| disabled | 布尔值 | false | 是否禁用组件。 |
| minWidth | 数值 | 10 | 缩放的最小宽度。 |
| minHeight | 数值 | 10 | 缩放的最小高度。 |
| maxWidth | 数值 | 10000 | 缩放的最大宽度。 |
| maxHeight | 数值 | 10000 | 缩放的最大高度。 |
| edge | 数值 | 5 | 组件可用于缩放的边缘宽度。 |
handles属性指定了缩放的方向，我们在开发各类应用中，不一定所有的边都是可拉伸的，例如左边导航菜单等，只需拉伸右边框即可，其他方向无需拉动。该属性提供的值有“e”、“s”、“w”、“n”、“ne”、“se”、“nw”、“sw”、“all”,分别代表可缩放的方向为东、南、西、北、东北、东南、西北、西南、全方位。
minWidth和minHeight表示缩放的最小宽度和最大宽度，即收缩时，宽度或高度不能小于这两个值，默认为10，也就是宽度或高度缩小到10时就停止了，无法再缩小了。
maxWidth和maxHeight也是类似，拉伸的范围不能超过这两个值。
edge指可缩放区域的宽度，如果将其设为10像素，看下图：
edge属性说明
resizable组件方法：
| 方法名称 | 参数 | 描述 |
|---|---|---|
| options | 无 | 返回所有属性。 |
| enable | 无 | 启用组件。 |
| disable | 无 | 禁用组件。 |
方法很简单，不赘述。
resizable组件事件：
| 事件名称 | 参数 | 描述 |
|---|---|---|
| onStartResize | e | 组件开始缩放时触发。 |
| onResize | e | 在整个缩放过程中触发。<br /> 如果返回false,最终将不会实现缩放效果。 |
| onStopResize | e | 组件停止缩放时触发。 |
事件中的参数e是js中的Event对象。onStartResize和onStopResize很简单，不多说。onResize事件在整个缩放过程中都会持续触发。如果在事件最终返回false，即便用户拖动边框做了缩放动作，一旦放开鼠标后，组件还是会回到原来的状态，并不实际完成缩放。例子代码中，我们便是通过onResize事件的不断触发，实现实时显示图片的大小。
