easyui的base插件学习已经进行到Resizable(可缩放)了。照旧看看easyui官网的API。

Resiable

正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展为可伸缩的，panel、window等,不信的话查阅easyui载入器源代码就能够知道啦!(window是依赖于resizable的)还是以官网的描写叙述来说。

覆盖默认$.fn.resizable.defaults.

属性

名称 类型 描写叙述信息 默认值
disabled boolean 假设为true则表示能够伸缩 false
handles string 暗示了伸缩的方向,'n'表明向北方伸缩,'e'则表示向东边 n,e,s,w,ne,se,sw,nw,all
minWidth number 伸缩之后的最小宽度 10
minHeight number 缩放之后的最小高度 10
maxWidth number 缩放之后的最大宽度 10000    
maxHeight number 缩放之后的最小宽度 10000
edge number 缩放的宽度,距离边缘多少能够缩放 5

事件

名称 參数 描写叙述信息
onStartResize e 当開始缩放的时候会被触发                                                 
onResize e 调整大小的期间触发,当返回false,DOM元素不会起到实际的缩放作用
onStopResize e 停止缩放的时候触发的操作

方法

名称 參数 描写叙述信息
options none 返回resiable參数对象
enable none 能够调整大小
disable none 不能调整大小

使用方式

1、通过html标记创建:

<div class="easyui-resizable" style="width:100px;height:100px;border:1px solid #ccc;"

        data-options="maxWidth:800,maxHeight:600">

</div>

2、使用js脚本创建:

<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>

$('#rr').resizable({

    maxWidth:800,

    maxHeight:600

});

Demo

相同官方站点的Demo,一看就懂!

<!DOCTYPE html>

<html> <head>

    <meta charset="UTF-8">

    <title>Basic Draggable - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">

    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>

    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>

</head>

<body>

    <center>

        <div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="border: 2px solid #C0C0C0;

        -moz-border-radius: 10px;

        -webkit-border-radius: 10px;

        border-radius: 10px;

        position: relative;

        padding: 5px;

        background: #FFF;

        height:300px;

        width:300px;

        z-index: 2;">

            <div style="padding:20px">Resize Me</div>

        </div>

    </center>

    <script>

    </script>

</body>

</html>

好了,就这样了,我也懒得去贴网址了!

独立网站:liangtao.sinaapp.com/?p=200

EasyUI基础入门之Resiable(可缩放)的更多相关文章

  1. EasyUI基础入门之Parser(解析器)

    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...

  2. EasyUI基础入门之Easyloader(载入器)

    在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...

  3. EasyUI基础入门之Pagination(分页)

    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...

  4. easyUI基础入门

    头部需要引人文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <ti ...

  5. EasyUI基础入门之Droppable(可投掷)

    怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...

  6. 王者荣耀是怎样炼成的（二）《王者荣耀》unity安装及使用的小白零基础入门

    转载请注明出处:http://www.cnblogs.com/yuxiuyan/p/7535345.html 工欲善其事,必先利其器. 上回书说到,开发游戏用到unity和C#.本篇博客将从零开始做一 ...

  7. CSS3基础入门03

    CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...

  8. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  9. Siki_Unity_1-3_Unity零基础入门_古迹探险

    1-3 Unity零基础入门 古迹探险 任务1/2:资料下载 链接:https://pan.baidu.com/s/1jHVymNk 密码:rbob 任务3:工程的创建和打开 Project:古迹探险 ...

随机推荐

  1. Java 大数类

    划分结果存在数组.供应商下标0 在剩下的标记1 import java.math.BigInteger; import java.util.Scanner; public class Main { p ...

  2. sql基础之DDL(Data Definition Languages)

    好久没写SQL语句了,复习一下. DDL数据定义语言,DDL定义了不同的数据段.数据库.表.列.索引等数据库对象的定义.经常使用的DDL语句包含create.drop.alter等等. 登录数据:my ...

  3. 使用commons-fileupload进行上传

    须要使用的包 这两个包在Apache官网上能够下载得到 commons-fileupload-1.3.1.jar是Apache的一个开源项目.废话不说直接说吧 前段页面 <form action ...

  4. Unity3d该物业(Attributes)整理

    http://blog.sina.com.cn/s/blog_5b6cb9500101857b.html Attributes属性属于U3D的RunTimeClass,所以加上下面的命名空间是必须的了 ...

  5. EL字符串表达式和常用功能用途拦截

    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> ${wj ...

  6. c#中的属性

    在C#中我们可以很自由的访问共有字段,但有时我们可能需要某字段只能读或者写,或在改变字段值得时候做一些其他事情,显然这些仅仅依靠字段是无法实现的,于是便有了属性. 1.基本用法 c#中的属性由属性作用 ...

  7. Java AIO 入门实例（转）

    Java7 AIO入门实例,首先是服务端实现: 服务端代码 SimpleServer: public class SimpleServer { public SimpleServer(int port ...

  8. Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）

    Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...

  9. axWindowsMediaPlayer1获取音频长度

    OpenFileDialog openFileDialog1 = new OpenFileDialog { InitialDirectory = "c:\\", Filter = ...

  10. Centos6.5下一个Ceph存储集群结构

    简单的介绍 Ceph的部署模式下主要包括下面几个类型的节点 • Ceph OSDs: A Ceph OSD 进程主要用来存储数据,处理数据的replication,恢复,填充.调整资源组合以及通过检查 ...