一、创建组件

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. 使用maven时,如何修改JVM的配置参数;maven命令执行时到底消耗多少内存?

    maven是使用java启动的,因此依赖JVM,那么如何修改JVM参数? MAVEN_OPTS 在系统的环境变量中,设置MAVEN_OPTS,用以存放JVM的参数,具体设置的步骤,参数示例如下: MA ...

  2. POJ 1849 Two(遍历树)

    POJ 1849 Two(遍历树) http://poj.org/problem?id=1849 题意: 有一颗n个结点的带权的无向树, 在s结点放两个机器人, 这两个机器人会把树的每条边都走一遍, ...

  3. JSP页面怎样导入优酷视频

    我在做的一个项目里面,应客户要求.要导入视频.然后我再考虑,视频是直接放在本地数据库的话,那么肯定会出现数据视频读取反应慢. 那么,就能够把视频先传到优酷上面,然后再直接应用优酷视频上的html代码, ...

  4. python内置全局变量

    vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...

  5. C# 插件热插拔 .NET:何时应该 “包装异常”? log4.net 自定义日志文件名称

    C# 插件热插拔   所谓热插拔就是插件可以 在主程序不重新启动的情况直接更新插件, 网上有很多方案: https://www.cnblogs.com/happyframework/p/3405811 ...

  6. Android学习笔记之Spinner下拉列表使用案例

    (1)两种方法提冲Spinner中的数据源:通过list集合,或者是通过xml文件进行配置 (2)布局代码例如以下: <RelativeLayout xmlns:android="ht ...

  7. 六度分离(floyd算法,SPFA算法,最短路—Dijkstra算法)

    Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submission(s) ...

  8. Python开发【1.4数据类型】

    1.数字 数字数据类型用于存储数值. 他们是不可改变的数据类型,这意味着改变数字数据类型会分配一个新的对象. # 创建对象 var1 = 1 var2 = 2 # 删除对象 del var1 del ...

  9. 安装ubuntu后启动黑屏

    我是在windows7上的一个空暇盘上安装ubuntu 14.安装后重新启动没有ubuntu的启动项,然后用easybcd生成启动项,重新启动发现果然有,可是选择之后黑屏. 百度半天无果.后来无意发现 ...

  10. iOS开发——高级篇——iOS 强制退出程序APP代码

    1.先po代码 UIAlertView* alert = [[UIAlertView alloc] initWithTitle:self.exitapplication message:@" ...