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可调整尺寸组件的更多相关文章

  1. EasyUI Resizable 可调整尺寸

    通过 $.fn.resizable.defaults 重写默认的 defaults. 用法 通过标记创建可调整尺寸(resizable)对象. <div class="easyui-r ...

  2. JQuery easyui (3) Resizable(调整大小)组件

    Resizable  动态调整元素大小  不依赖其他组件 Resizable的加载方法 <div class="easyui-resizable"></div&g ...

  3. 一个全新的Vue拖拽特性实现:“调整尺寸”部分

    关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...

  4. 调整 ANTD 组件菜单的字体大小。

    调整 ANTD 组件菜单的字体大小:经过多次试验,原有字体太小,只有12px,通过下列CSS 强制加大. 1.分组子菜单(标题) .ant-menu-inline > .ant-menu-sub ...

  5. ps 替换背景以及调整尺寸

    领导吩咐我修改她的图片背景,尺寸, 屁颠屁颠去弄,半小时后发现大学里学的 ps 忘差不多了,这里总结一下修改图片背景以及尺寸的基本操作. 1. 去除原背景 方法一: 选中魔术橡皮擦, 点击原图中背景, ...

  6. Delphi 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题

    给你一段代码,网上转的:unit uMyClassHelpers;//实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题.//        陈小斌,2012年3月5日 interface Uses ...

  7. 前端JS转图片为base64并压缩、调整尺寸脚本

    image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...

  8. jQueryEasyUI

    jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...

  9. JQuery Easy Ui (Tree树)详解(转)

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

随机推荐

  1. oracle中的异常处理方法

    异常处理create or replace procedure prc_get_sex (stuname student.name%type) as stusex student.sex%type; ...

  2. pxe基于虚拟机的自启动

    环境系统:centos6.4 min版 虚拟机实现:提供的服务器ip为192.168.0.105,桥接 安装dhcp服务: yum -y install dhcp 配置dhcp服务,使能够成功启动: ...

  3. kali 2.0下搭建DVWA环境

    DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序.包含了SQL注入.XSS.盲注等常 ...

  4. 20144303 《Java程序设计》第五周学习总结

    20144303 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 异常处理 异常就是程序在运行时出现不正常情况,异常的由来是因为Java把出现的问题封装成了对象,换句话说Ja ...

  5. # PHP学习笔记之一

    PHP学习笔记之一 标签(空格分隔): PHP 资料来源:慕课网PHP入门篇.PHP学习手册 一.变量 变量定义 $变量名 = 变量值; $var = "xxx"; 变量类型查看 ...

  6. C teaching

    L1 Preparation 1. environment codeblocks 2.variable, const 3. data type int "%d" char &quo ...

  7. git如何生成单个文件的补丁

    背景:有时候碰到一个commit包含了好几个文件的修改,但是我只需要其中一个文件的修改内容,那么这时候就需要以下方法来生成这一个文件对应修改内容的补丁 答:git format-patch " ...

  8. java 普通内部类和静态内部类

    区别1: 普通内部类实例化后的对象持有外部类的引用,在非静态类内部可以访问外部类的成员:静态内部类实例化不持有外部对象引用,不能访问外面的方法和成员: 从耦合度上来讲,普通内部类跟外部类耦合程度很高, ...

  9. Leetcode——Third Maximum Number

    Question Given a non-empty array of integers, return the third maximum number in this array. If it d ...

  10. IO与NIO

    IO IO概念: Java IO Java IO 即java的输入系统,不管我们编写任何种语言,都难免输入输出相关的媒介打交道,其实和媒介进行IO的过程是十分复杂的,还要考虑的因素特别多,比如我们要考 ...