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. Django学习笔记之Queryset详解

    Django ORM用到三个类:Manager.QuerySet.Model.Manager定义表级方法(表级方法就是影响一条或多条记录的方法),我们可以以models.Manager为父类,定义自己 ...

  2. TCP/UDP 端口

    端口说明 小于1024的端口通常运行一些网络服务 大于1024的端口用来与远程机器建立连接 TCP端口 = 回显 = 丢弃 = 在线用户 = 时间服务 = 网络状态 = 每日引用 = 消息发送 = 字 ...

  3. 一键安装lnmp（2）

    all(){path=`pwd`cd $pathechoecho "exclude=*.i386 *.i686" >> /etc/yum.confrpm -ivh ht ...

  4. 20145310 《Java程序设计》第2周学习总结

    20145310 <Java程序设计>第2周学习总结 教材学习内容总结 第三章主要学习了java的基础语法. java中的基本类型主要可区分为,整数.字节.浮点数.字符与布尔.整数shor ...

  5. 20145312 《Java程序设计》第八周学习总结

    20145312 <Java程序设计>第八周学习总结 学习笔记 Chapter 15时间与日期 15.1 日志 15.1.1 日志API简介 java.util.logging包提供了日志 ...

  6. 20135320赵瀚青LINUX内核分析第一周学习笔记

    赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.概述 第一周的学习内容主 ...

  7. Kali视频学习6-10

    Kali视频学习6-10 kali信息收集之主机探测 主机探测指识别目标机器是否可用(简单来说是否在线),在探测过程中,需要得到目标是否online等信息.由于IDS和(入侵检测系统)和IPS(入侵保 ...

  8. Mac Book Air 上用 Vmware Fusion 8 pro 安装 CentOS7

    一. 准备工作: 1. 安装Vmware Fusion (略) 2. 下载CentOS-7-x86_64-Minimal http://isoredirect.centos.org/centos/7/ ...

  9. ubuntu16.04下安装mysql详细步骤

    1.如果要搭建服务器先去购买一个云主机,比如阿里云.京东云.新网等等都有卖.这里推荐使用京东云服务器,因为最近在搞活动.一元可体验两个月(可能现在活动已经过了,但在京东云里有免费领一个月的,学生机也有 ...

  10. Vue.js项目部署在Tomcat服务器上

    1.在本地的Vue框架中 执行npm run build  将我们的项目打包到dist 文件夹中 2.在服务器上的Tomcat的 webapps文件夹下,新建一个文件夹如:frontvue 3.启动t ...