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

来源：互联网发布：淘宝红包在哪里领取编辑：程序博客网时间：2024/05/20 19:45

　　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 在整个缩放过程中触发。
如果返回false,最终将不会实现缩放效果。 onStopResize e 组件停止缩放时触发。

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

0 0