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. Android多点触控（图片的缩放Demo）

    本文主要介绍Android的多点触控,使用了一个图片缩放的实例,来更好的说明其原理.须要实现OnTouchListener接口,重写当中的onTouch方法. 实现效果图:       源码: 布局文 ...

  2. NEON简单介绍

    个128位四字寄存器Q0-Q15,32个64位双字寄存器D0-D31,两个寄存器是重叠的,在使用的时候须要特别注意,不小心就会被覆盖掉. NEON的数据类型:无符号整数.有符号整数.未指定类型的整数. ...

  3. Apple Watch 1.0 开发介绍 1.4 简介 使用iOS技术

    WatchKit extension可以使用iOS app同样的技术,但是由于他是extension,使用有些技术的时候会有限制,有些不推荐使用.下面是一些介绍以及什么时候使用什么技术: 有些需要权限 ...

  4. ThinkPad E530 Fedora 20 无线上网问题

    它一直在使用 Fedora 家庭 Linux. 但它自带的无线网卡驱动似下一些问题,通常,有时连接,有时你不能. 经常搜索不到的家用无线路由器. 因为家里有网线所以一直没有在意.没什么事就折腾了一下. ...

  5. HDU 3415 Max Sum of Max-K-sub-sequence（单调队列）

    转载请注明出处:http://blog.csdn.net/u012860063 Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java ...

  6. opencv2对于读书笔记——背投影图像的直方图来检测待处理的内容

    一些小的概念 1.直方图是图像内容的一个重要特性. 2.假设一幅图像的区域中显示的是一种独特的纹理或是一个独特的物体,那么这个区域的直方图能够看作是一个概率函数,它给出的是某个像素属于该纹理或物体的概 ...

  7. [原创].NET 业务框架开发实战之七 业务层初步构想

    原文:[原创].NET 业务框架开发实战之七 业务层初步构想 .NET 业务框架开发实战之七 业务层初步构想 前言:本篇主要讲述如何把DAL和BLL衔接起来. 本篇议题如下: 1.       DAL ...

  8. [原创].NET 分布式架构开发实战之二 草稿设计

    原文:[原创].NET 分布式架构开发实战之二 草稿设计 .NET 分布式架构开发实战之二 草稿设计 前言:本篇之所以称为草稿设计,是因为设计的都是在纸上完成的.反映了一个思考的过程. 本篇的议题如下 ...

  9. 探秘Java虚拟机——内存管理与垃圾回收（转）

    本文主要是基于Sun JDK 1.6 Garbage Collector(作者:毕玄)的整理与总结,原文请读者在网上搜索. 1.Java虚拟机运行时的数据区 2.常用的内存区域调节参数 -Xms:初始 ...

  10. MySql分析算法作品索引（马上，只是说说而已B-tree）

    刚开始学习的时候,百度搜索.但我发现很难理解了很多的太复杂,各种物品的整合总结(建议可能看到的文字,我不明白也没关系,再看看操作步骤图,然后结合文,所以,一切都清楚了很多) B-tree.B这是bal ...