EasyUI系列学习(五)-Resizable(调整大小)
一、创建组件
1.使用标签创建可变大小的窗口
<div id="rBox" class="easyui-resizable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
2.使用JavaScript创建可变大小的窗口
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable();
});
</script>
二、属性
1.disabled:如果为true,则禁用大小调整
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
disabled: true
});
});
</script>
2.handles:句柄默认值为:n, e, s, w, ne, se, sw, nw, all
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
//表示鼠标在东南方向会出现箭头
handles: "se"
});
});
</script>
3.minWidth,minHeight,maxWidth,maxHeight
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
//可调整最小宽度
minWidth: 150,
//可调整最小高度
minHeight: 80,
//可调整最大宽度
maxWidth: 500,
//可调整最打高度
maxHeight: 200
});
});
</script>
4.edge:设置边缘大小(理解为padding<=50时,操作才有效果)
<div id="rBox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
edge: 50
});
});
</script>
三、事件
1.onStartResize:在开始改变大小的时候触发
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
onStartResize: function (e) {
console.log("移动时触发一次");
}
});
});
</script>
2.onStopResize:在停止改变大小的时候触发
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
onStartResize: function (e) {
console.log("移动时触发一次");
},
onStopResize: function (e) {
console.log("每次鼠标按下都会触发,停止移动时触发一次");
}
});
});
</script>
3.onResize:在调整大小期间触发。当返回false的时候,不会实际改变DOM元素大小
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$("#rBox").resizable({
onStartResize: function (e) {
console.log("移动时触发一次");
},
onStopResize: function (e) {
console.log("每次鼠标按下都会触发,停止移动时触发一次");
},
onResize: function (e) {
console.log("调整期间会一直触发");
//return false;
}
});
});
</script>
四、方法
1.options:返回调整大小属性
2.enable:启用调整大小功能
3.disable:禁用调整大小功能
五、重写默认对象
<div id="rBox" style="width: 200px; height: 100px; background:cyan"></div>
<script>
$(function () {
$.fn.resizable.defaults.maxHeight = 500;
$("#rBox").resizable({ });
});
</script>
EasyUI系列学习(五)-Resizable(调整大小)的更多相关文章
- 第一百九十五节,jQuery EasyUI,Resizable(调整大小)组件
jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- EasyUI - Resizable 调整大小
效果: html代码: <div id="rr" style="width: 100px; height: 100px; border: 2px solid #cc ...
- EasyUI系列学习(二)-使用EasyUI
一.引入必要文件 <!--1.0引入jQuery核心库--> <script src="jquery-easyui-1.4.4/jquery.min.js"> ...
- Resizable(调整大小)组件
一.加载方式 //class 加载方式 <div id="rr" class="easyui-resizable" data-options=" ...
- EasyUI系列学习笔记(一)——注册
前面介绍过EasyUI是一个前段框架,开发之前需要导入底层包:我这里采用的是EasyUI 1.4版本~ 今天主要是搭建一个EasyUI的环境,同时做一个登陆页面... 环境搭建 导入需要的文件到项目中 ...
- EasyUI系列学习(十一)-Accordion(分类)
一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...
- EasyUI系列学习(八)-ProgressBar(进度条)
一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...
- EasyUI系列学习(六)-Tooltip(提示框)
一.创建组件 0.Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title= ...
随机推荐
- [bzoj5343][Ctsc2018]混合果汁_二分答案_主席树
混合果汁 bzoj-5343 Ctsc-2018 题目大意:给定$n$中果汁,第$i$种果汁的美味度为$d_i$,每升价格为$p_i$,每次最多添加$l_i$升.现在要求用这$n$中果汁调配出$m$杯 ...
- Django学习系列之django分页
基本语法实例 from django.core.paginator import Paginator objects = Post.objects.filter(status='published') ...
- react 项目实战(二)创建 用户添加 页面 及 fetch请求 json-server db.json -w -p 8000
1.安装 路由 npm install -S react-router@3.x 2.新增页面 我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面. 首先在/src目 ...
- HDU 4869 Turn the pokers (2014多校联合训练第一场1009) 解题报告(维护区间 + 组合数)
Turn the pokers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- [DLX+bfs] hdu 4069 Squiggly Sudoku
题意: 给你9*9的矩阵.对于每一个数字.能减16代表上面有墙,能减32代表以下有墙. .. 最后剩下的数字是0代表这个位置数要求,不是0代表这个数已知了. 然后通过墙会被数字分成9块. 然后做数独, ...
- 服务器端将复合json对象传回前端
前端接收后端传过来的JSON对象,对前端来说,传过来的确实就是JSON对象:但后端,类型则灵活得多,可以是IList<>等类型,当然也可以是newtonsoft的JObject类型.反正在 ...
- 获取特定html源码 富文本编辑器 爬虫生成 dom
python beautifulsoup获取特定html源码 - 吴悟无 - 博客园 https://www.cnblogs.com/vickey-wu/p/6843411.html PyQuery库 ...
- override (C# Reference)
https://msdn.microsoft.com/en-us/library/ebca9ah3.aspx The override modifier is required to extend o ...
- 【POI2004】【Bzoj2069】T2 洞穴 zaw
T2 洞穴zaw [问题描述] 在 Byte 山的山脚下有一个洞穴入口. 这个洞穴由复杂的洞室经过隧道连接构成. 洞穴的入口是 1 号点.两个洞室要么就通过隧道连接起来,要么就经过若干隧道间接的相连. ...
- android 制作9.png图片
什么叫.9.PNG呢,这是安卓开发里面的一种特殊的图片 这种格式的图片在android 环境下具有自适应调节大小的能力. (1)允许开发人员定义可扩展区域,当需要延伸图片以填充比图片本身更大区 ...