【连载】研究EasyUI系统

　　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="data: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系统— Resizable组件相关推荐

【连载】研究EasyUI系统— Accordion组件
Accordion组件是easyui框架中的布局组件之一,它提供了多个可展开/折叠的面板.Accordion经常用作页面的导航菜单.我们先通过制作一个导航菜单来认识一下Accordion. 图中左侧便 ...
Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
软件的接口设计图_基于GJB 5000A的软件配置管理研究与系统实现
郝延刚 (海军装备部驻南京地区第二军事代表室,南京 211153) 摘要:采用Spring.MyBatis以及Activiti等技术,设计了符合GJB 5000A软件配置管理要求的软件配置管理系统. ...
[附源码]JAVA毕业设计人才库构建研究（系统+LW）
[附源码]JAVA毕业设计人才库构建研究(系统+LW) 项目运行环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe( ...
php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
centos5.6 (64bit)编译安装vsftpd-2.3.4的配置(两种用户登录)[连载之电子商务系统架构]...
centos5.6 (64bit)编译安装vsftpd-2.3.4的配置(两种用户登录) 出处:http://jimmyli.blog.51cto.com/我站在巨人肩膀上Jimmy Li 作者:Ji ...
构建百万访问量电子商务网站之LVS负载均衡(前端四层负载均衡器)[连载之电子商务系统架构]...
构建百万访问量电子商务网站之LVS负载均衡(前端四层负载均衡器)[连载之电子商务系统架构] 版本:V1 出处:http://jimmyli.blog.51cto.com/我站在巨人肩膀上Jimmy L ...
CV：传统视觉知识—机器视觉系统的基础知识(机器视觉三要素+典型的工业机器视觉系统五大组件)
CV:传统视觉知识-机器视觉系统的基础知识(机器视觉三要素+典型的工业机器视觉系统五大组件) 目录机器视觉三要素 1.what-测量.判断 2.why-灵活性.自动化
VS2015 打包添加系统必备组件
有时我们除了需要安装系统必备组件之外,还需要做自定义的子安装程序,如我的需要安装2007 Office System Driver: Data Connectivity Components!现将操作 ...

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

【连载】研究EasyUI系统— Resizable组件相关推荐

最新文章

热门文章