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

resizable组件提供了一种可拉伸、缩小放大的功能，很多桌面应用程序，比如图片查看器、word文档等，用户可以通过鼠标将程序拉大拉小，resizable组件则在web页面上为各类元素提供了类似的功能，我们先通过一个缩放图片的例子了解一下resizable组件。

    
        
        
        
        
        
        
        
    
    
        

            

            

                < img src='images/demo.jpg' id="imgResizable" class="imgDemo" />
            
        
        
    

效果图如下：

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事件的不断触发，实现实时显示图片的大小。