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. RH033读书笔记(3)-Lab 4 Browsing the Filesystem

    Lab 4 Browsing the Filesystem Sequence 1: Directory and File Organization 1. Log in as user student ...

  2. Hive自己定义函数的使用——useragent解析

    想要从日志数据中分析一下操作系统.浏览器.版本号使用情况.可是hive中的函数不能直接解析useragent,于是能够写一个UDF来解析.useragent用于表示用户的当前操作系统,浏览器版本号信息 ...

  3. BZOJ 2007 NOI2010 海拔高度 最小减产计划

    标题效果:YT城市是一个精心规划的城市.这个城市是东西向和南北向干道成n×n地区性.简单.可以YT作为一个城市广场,每个区域也可被视为一个正方形.因此,.YT市中含有(n+1)×(n+1)交叉口和2n ...

  4. C#取硬盘、CPU、主板、网卡的序号 ManagementObjectSearcher

    原文:C#取硬盘.CPU.主板.网卡的序号 ManagementObjectSearcher private void button1_Click(object sender, EventArgs e ...

  5. [LeetCode226]Invert Binary Tree

    题目: Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 反转二叉树,左右儿子值交换 代码: / ...

  6. 玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互

    最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...

  7. nyoj 题号12 水厂（两）——南阳oj

    标题信息: 喷水装置(二) 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描写叙述 有一块草坪.横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n(n<=1000 ...

  8. ajax跨域请求学习笔记

    原文:ajax跨域请求学习笔记 前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可 ...

  9. 猫学习IOS（四）UI半小时就搞定Tom猫

    阿土 首先对影响 下载项目的源材料: Tom猫游戏代码iOS 素材http://blog.csdn.net/u013357243/article/details/44457357 效果图 以前风靡一时 ...

  10. [Django1.6]south于django1.6使用

    south在django1.6中的使用 django1.7中已经支持数据合并了,所以仅仅能在django1.4 1.5 1.6的版本号中使用south. south的主要作用就是做数据的合并,当我们在 ...