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= ...
随机推荐
- ACM组队安排-——杭电校赛(递推)
#include<stdio.h> #include<string.h> #include<math.h> #include<stdlib.h> #in ...
- 线程池之ThreadPool与ForkJoinPool
网上对Java线程池都有很多非常具体的解析,我概念性进行总结下,如有错误,可与我联系修改. 1.1 ThreadPool Executor 一个线程池包括以下四个基本组成部分: 1.线程池管理器(Th ...
- sata express接口
华硕z97主板的sata express接口目前没什么用,但随着电脑接口的发展,可能会占据一席之地. 1.顾名思义,SATA-Express是SATA接口 + PCI-Express的混合体,其理论带 ...
- [Java Spring] Spring Annotation Configuration Using XML
Add context to our application. main/resources/applicationContext.xml: <?xml version="1.0&qu ...
- AutoCAD菜单加载失败 找不到文件mnc 怎么办
菜单加载失败,找不到文件 SWFILECONV(mnu/mns/mnc) 找到CAD安装目录下的swfileconv.arx文件,用记事本打开,清空内容,然后保存即可.
- Android AsyncTask 分析内部实现
sdk3.0前,使用内部的线程池,多线程并发运行.线程池大小等于5,最大达128 sdk3.0后,使用默认的serial线程池.运行完一个线程,再顺序运行下一个线程.sdk3.0<=curren ...
- ArcGIS中生成蜂窝多边形算法解析
近来有不少同学.都有问我关于蜂窝多边形的问题.也就是正六边形,也就是以下这个东东: 一般的问答模式例如以下: 亲们问:ArcGIS里面那个工具能够做这个东东? 虾神答:额,没有原生的工具. 亲们问:那 ...
- 用py文件调用操作系统的命名,粘包问题
帅爆太阳的男人 1,执行代码 在py代码中去调用操作系统的命令 新的模块:subprocess, import subprocess r = subprocess().Popen( "dir ...
- servlet container:tomcat jetty and undertow
1 spring boot内嵌容器支持tomcat.jetty和undertow 但是undertow性能最好,详见: https://examples.javacodegeeks.com/enter ...
- 获取发布的头条的url,避免点击打开新的页面
https://www.toutiao.com/ document.getElementsByClassName("ugc-mode-content")[0].getElement ...