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'); });
resizable可调整尺寸组件的更多相关文章
- EasyUI Resizable 可调整尺寸
通过 $.fn.resizable.defaults 重写默认的 defaults. 用法 通过标记创建可调整尺寸(resizable)对象. <div class="easyui-r ...
- JQuery easyui (3) Resizable(调整大小)组件
Resizable 动态调整元素大小 不依赖其他组件 Resizable的加载方法 <div class="easyui-resizable"></div&g ...
- 一个全新的Vue拖拽特性实现:“调整尺寸”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...
- 调整 ANTD 组件菜单的字体大小。
调整 ANTD 组件菜单的字体大小:经过多次试验,原有字体太小,只有12px,通过下列CSS 强制加大. 1.分组子菜单(标题) .ant-menu-inline > .ant-menu-sub ...
- ps 替换背景以及调整尺寸
领导吩咐我修改她的图片背景,尺寸, 屁颠屁颠去弄,半小时后发现大学里学的 ps 忘差不多了,这里总结一下修改图片背景以及尺寸的基本操作. 1. 去除原背景 方法一: 选中魔术橡皮擦, 点击原图中背景, ...
- Delphi 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题
给你一段代码,网上转的:unit uMyClassHelpers;//实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题.// 陈小斌,2012年3月5日 interface Uses ...
- 前端JS转图片为base64并压缩、调整尺寸脚本
image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...
- jQueryEasyUI
jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...
- JQuery Easy Ui (Tree树)详解(转)
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
随机推荐
- tomcat高并发配置调优
最近部署的tomcat,里面放了一个apk提供给测试人员测试,而有一天压测的时候,他们一致反馈下载不了,结果查看日志才发现如下错误: [html] view plain copy INFO: Maxi ...
- Zstack中任务,事件,消息之间的关系
Zstack是Zigbee协议的具体实现,在实现的过程中为了能够更好的对各个模块和功能进行管理,所以加入了OSAL(Operating System Abstraction Layer 操作系统抽象层 ...
- 编码解码--三种常见字符编码简介:ASCII、Unicode和UTF-8
什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是255( ...
- 20145328 《Java程序设计》第10周学习总结
20145328 <Java程序设计>第10周学习总结 资料学习内容总结 网络编程 13.1 网络概述 网络编程技术是当前一种主流的编程技术,随着联网趋势的逐步增强以及网络应用程序的大量出 ...
- 20135320赵瀚青LINUX内核分析第三周学习笔记
赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 概述 本周是学习的主要是构造 ...
- 可扩展多线程异步Socket服务器框架EMTASS 2.0 (转自:http://blog.csdn.net/hulihui)
可扩展多线程异步Socket服务器框架EMTASS 2.0 (转自:http://blog.csdn.net/hulihui) 0 前言 >>[前言].[第1节].[第2节].[第3节]. ...
- ubuntu 18.04 64bit下如何安装python开发工具jupyterhub
注:这是多用户版本 1.安装依赖 sudo apt-get install npm nodes sudo apt-get install python3-distutils wget https:// ...
- poj-2259 team queue(数据结构)
第一遍看的时候立即想到了哈希表. 再想时觉得两个队列,一个用来排队伍之间的顺序,一个用来排队伍内部成员的顺序即足够了. DEQUE的时候先判断哪只队伍排在队首,之后再让该队伍中的首队员出列. 整体没有 ...
- iOS日常学习 - 每个Xcode开发者应该知道的七个使用技巧
本文为转载学习使用原文链接 工欲善其事,必先利其器.对一个iOS开发者来说,这就意味着对Xcode的熟练掌握程度.Xcode是一个学习起来有点难度的软件,下面的这些技巧或许可以显著的提高你的编程效率. ...
- 在服务器 部署 asp.net core 报502.5的错
HTTP Error 502.5 - Process Failure 如果 IIS 该安装的都装好了的话,那就需要安装一个.net core sdk,链接如下: https://www.microso ...