一、创建组件

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(调整大小)的更多相关文章

  1. 第一百九十五节,jQuery EasyUI,Resizable(调整大小)组件

    jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...

  2. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  3. EasyUI - Resizable 调整大小

    效果: html代码: <div id="rr" style="width: 100px; height: 100px; border: 2px solid #cc ...

  4. EasyUI系列学习(二)-使用EasyUI

    一.引入必要文件 <!--1.0引入jQuery核心库--> <script src="jquery-easyui-1.4.4/jquery.min.js"> ...

  5. Resizable(调整大小)组件

    一.加载方式 //class 加载方式 <div id="rr" class="easyui-resizable" data-options=" ...

  6. EasyUI系列学习笔记(一)——注册

    前面介绍过EasyUI是一个前段框架,开发之前需要导入底层包:我这里采用的是EasyUI 1.4版本~ 今天主要是搭建一个EasyUI的环境,同时做一个登陆页面... 环境搭建 导入需要的文件到项目中 ...

  7. EasyUI系列学习(十一)-Accordion(分类)

    一.加载 1.class加载 <div class="easyui-accordion" style="width:300px;height:200px" ...

  8. EasyUI系列学习(八)-ProgressBar(进度条)

    一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...

  9. EasyUI系列学习(六)-Tooltip(提示框)

    一.创建组件 0.Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title= ...

随机推荐

  1. [bzoj5343][Ctsc2018]混合果汁_二分答案_主席树

    混合果汁 bzoj-5343 Ctsc-2018 题目大意:给定$n$中果汁,第$i$种果汁的美味度为$d_i$,每升价格为$p_i$,每次最多添加$l_i$升.现在要求用这$n$中果汁调配出$m$杯 ...

  2. Django学习系列之django分页

    基本语法实例 from django.core.paginator import Paginator objects = Post.objects.filter(status='published') ...

  3. react 项目实战(二)创建 用户添加 页面 及 fetch请求 json-server db.json -w -p 8000

    1.安装 路由 npm install -S react-router@3.x 2.新增页面 我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面. 首先在/src目 ...

  4. HDU 4869 Turn the pokers (2014多校联合训练第一场1009) 解题报告(维护区间 + 组合数)

    Turn the pokers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. [DLX+bfs] hdu 4069 Squiggly Sudoku

    题意: 给你9*9的矩阵.对于每一个数字.能减16代表上面有墙,能减32代表以下有墙. .. 最后剩下的数字是0代表这个位置数要求,不是0代表这个数已知了. 然后通过墙会被数字分成9块. 然后做数独, ...

  6. 服务器端将复合json对象传回前端

    前端接收后端传过来的JSON对象,对前端来说,传过来的确实就是JSON对象:但后端,类型则灵活得多,可以是IList<>等类型,当然也可以是newtonsoft的JObject类型.反正在 ...

  7. 获取特定html源码 富文本编辑器 爬虫生成 dom

    python beautifulsoup获取特定html源码 - 吴悟无 - 博客园 https://www.cnblogs.com/vickey-wu/p/6843411.html PyQuery库 ...

  8. override (C# Reference)

    https://msdn.microsoft.com/en-us/library/ebca9ah3.aspx The override modifier is required to extend o ...

  9. 【POI2004】【Bzoj2069】T2 洞穴 zaw

    T2 洞穴zaw [问题描述] 在 Byte 山的山脚下有一个洞穴入口. 这个洞穴由复杂的洞室经过隧道连接构成. 洞穴的入口是 1 号点.两个洞室要么就通过隧道连接起来,要么就经过若干隧道间接的相连. ...

  10. android 制作9.png图片

    什么叫.9.PNG呢,这是安卓开发里面的一种特殊的图片   这种格式的图片在android 环境下具有自适应调节大小的能力.   (1)允许开发人员定义可扩展区域,当需要延伸图片以填充比图片本身更大区 ...