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. Linux/UNIX流程关系

    流程关系 过程组 除了一个过程,每个过程ID此外.也属于一个进程组.过程基是一个或多个过程的集合. 通常它们与相同的作业相关联,它接受各种信号从相同终端. #include<unistd.h&g ...

  2. SRM 620 D2L3: RandomGraph, dp

    称号:http://community.topcoder.com/stat? c=problem_statement&pm=13143&rd=15853 參考:http://apps. ...

  3. 【Android进阶】SlidingMenu实现侧滑栏效果的实现

    public class MainActivity extends Activity { @Override protected void onCreate(final Bundle savedIns ...

  4. RH133读书笔记(7)-Lab 7 Advanced Filesystem Mangement

    Lab 7 Advanced Filesystem Mangement Goal: Develop skills and knowlege related to Software RAID, LVM, ...

  5. hdu 4945 2048 （dp+组合的数目）

    2048 Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submi ...

  6. Objective-C路成魔【11-多态性、动态类型和动态绑定】

    郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠.支持郝萌主.捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 多态这个其 ...

  7. Nginx + IIS 配置，实现负载均衡

    当你的Web应用程序访问量大的时候,一台服务器可能会因为压力过大而无法处理所有的请求.此时,可以增加服务器,采用负载均衡来分担所有的请求.关于Nginx的作用,自行百度了解.总之,在Windows平台 ...

  8. Android CTS測试Fail项改动总结（四）

    Android5.1上的測试 1.android.security.cts.SELinuxDomainTest# testInitDomain fail 打印的log junit.framework. ...

  9. Vertica对于所计算的时间SQL声明大全

    词:强.大.所有,强烈推荐 SQL语句 查询结果 select (timestamp '2005-01-17 10:00' - timestamp '2005-01-01'); 16 10:10 se ...

  10. BZOJ 1901 Zju 2112 Dynamic Rankings 与更改的树董事长

    标题效果:给定一个序列,单点变化,询价区间k大. 思维:假设没有变化.然后划分树就可以解决,但树的分工仍然是一棵树,它不支持的变化. 主席舒变化实际上是在外带fenwick右护套层值段树,但正确的值线 ...