您的位置：首页 > 产品设计 > UI/UE

【连载】研究EasyUI系统— Resizable组件

2017-02-10 16:05 302 查看

　　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组件属性：


属性名称	属性值类型	属性默认值	描述
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像素，看下图：

resizable组件方法：


方法名称	参数	描述
options	无	返回所有属性。
enable	无	启用组件。
disable	无	禁用组件。

　　方法很简单，不赘述。

　　

resizable组件事件：


事件名称	参数	描述
onStartResize	e	组件开始缩放时触发。
onResize	e	在整个缩放过程中触发。如果返回false,最终将不会实现缩放效果。
onStopResize	e	组件停止缩放时触发。

　　事件中的参数e是js中的Event对象。onStartResize和onStopResize很简单，不多说。onResize事件在整个缩放过程中都会持续触发。如果在事件最终返回false，即便用户拖动边框做了缩放动作，一旦放开鼠标后，组件还是会回到原来的状态，并不实际完成缩放。例子代码中，我们便是通过onResize事件的不断触发，实现实时显示图片的大小。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui

相关文章推荐

新的分享

章节导航