resizable可调整尺寸组件
Resizable 可调整尺寸
不依赖于其他组件
1、用法:
通过标记创建可调整尺寸(resizable)对象
<div class="easyui-resizable" style="width:100px;height:100px; border:1px solid #ccc;" data-options="maxWidth:800,maxHeight:600">
<div>
使用js创建可调整尺寸(resizable)对象
2、属性
disabled boolean 如果设置为true,则禁止调整尺寸 false
handles string 指可调整尺寸(resizable)的方向,‘n’是北,‘e’是南,等等。 n,e,s,w,ne,se,nw,all
minWidth number 调整尺寸时的最小宽度 10
minHeight 调整尺寸时的最小高度 10
maxWidth number 调整尺寸时最大宽度 10000
maxHeight number调整尺寸时的最大高度 10000
edge number 被调整尺寸的边框的边缘,边框边缘触发大小 5
3、事件
onStartResize e 开始调整尺寸时触发
onResize e 调整尺寸期间触发。返回false时,DOM元素将不进行实际的调整尺寸动作
onStopResize e 停止调整尺寸时触发
4、方法
options none 返回可调整尺寸(resizable)选项(options)
enable none 启用可调整尺寸(resizable)特性
disable none 禁用可调整尺寸(resizable)特征
通过$.fn.resizable.defaults重写默认的defaults
句柄设置多个方向拖动,中间使用逗号连接,例如:handles : "e,s"
edge属性与拖动组件的那个产生的效果相反,属于边缘区域的话我们可以调整大小
onResize 调整尺寸期间如果返回的是false,那么在拖动的过程中dom元素不会有任何变化,拖动完毕后产生变化
<html>
<title>index</title>
<head>
<meta charset="UTF-8"> <script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
<!--
<div class="easyui-resizable" style="width:100px;height:100px; border:1px solid #ccc;" data-options="maxWidth:800,maxHeight:600">
<div>
-->
<div id="box" style="width:100px;height:100px;border:1px solid #ccc">
</div> </body>
</html> $(function(){
$.fn.resizable.defaults.minWidth = 80; $("#box").resizable({
//minWidth:50,
minHeight:50,
maxWidth:800,
maxHeight:600,
handles:"e,s",
//edge:50,
//onStartResize : function(e){
//$(this).css("background","red");
//},
onResize: function(){
//console.log(this.style.width + "--" + this.style.height);
//return false;
},
onStopResize:function(e){
$(this).css("background","orange");
}
}); //console.log($("#box").resizable("options"));
//$("#box").resizable('disable');
//$("#box").resizable('enable'); });
最新文章
- Python Mysql 篇
- [CF245H] Queries for Number of Palindromes (容斥原理dp计数)
- IE浏览器相关的问题及解决方案[转]
- dede栏目调用大全
- apache2.4配置虚拟目录
- ui的设计原则
- JAVA并发编程实战---第二章:线程安全性
- [Swift]LeetCode204. 计数质数 | Count Primes
- JavaWeb学习 (十三)————JSP
- @PathVariable与@RequestBody的区别,及前段请求接口的写法。
- Swift5 语言指南(二十二) 扩展
- Bzoj4818:生成函数 快速幂
- iphone 恢复出厂设置方法
- webpack快速入门——CSS进阶:消除未使用的CSS
- FTP的安装配置使用
- log报错: Caused by: java.sql.SQLException: An attempt by a client to checkout a Connection has timed out.
- Jfreechart 生成不同数据源多个饼图(Multiple Pie Chart)
- 倍福TwinCAT(贝福Beckhoff)基础教程4.1 TwinCAT如何读写TXT文件
- Python3--中括号";[]";与冒号";:";在列表中的作用
- jsonview插件的常见使用方法整理