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系统版本号命令

    一.查看内核版本号命令: 1) [root@SOR_SYS ~]# cat /proc/version Linux version 2.6.18-238.el5 (mockbuild@x86-012. ...

  2. 返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性

    原文:返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性 [索引页][源码下载] 返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性 ...

  3. RH033读书笔记(13)-Lab 14 Network Clients

    Goal: Practice using a variety of tools to transfer files between your system and a remote system. S ...

  4. 【solr这四个主题】大约VelocityResponseWriter

    一个.大约Velocity基本配置 在Solr在,可以以多种方式返回搜索结果,作为一个简单的文字回复(XML.JSON.CSV等待),能够返回velocity.js等格式.而VelocityRespo ...

  5. 买面包和IoC

    今天上午准备去一个阿姨,在那里买面包.这可能是由于小尺寸她的,因此,管理不规范,所以,当你买面包.没有人行.即使所有的大学生,似几乎没有这种意识.. . 但让我感到震惊的是.尽管没有排队,但阿姨似乎能 ...

  6. JTextArea Demo

    在往JTextArea中填充数据时,JTextArea上的滚动条也可以拖动.解决办法:主线程放在EDT中,fill JTextArea的操作放在另外一个线程中,这样fill操作与GUI上的操作就分离了 ...

  7. Dom7.js 源码阅读备份

    在Framework7,其特色的HTML框架,可以创建精美的iOS应用;  她有自己的 DOM7- 一个集成了大部分常用DOM操作的高性能库.你不需要学习任何新的东西,因为她的用法和大名鼎鼎的jQue ...

  8. SQL Server 2008性能故障排查（一）——概论

    原文:SQL Server 2008性能故障排查(一)--概论 备注:本人花了大量下班时间翻译,绝无抄袭,允许转载,但请注明出处.由于篇幅长,无法一篇博文全部说完,同时也没那么快全部翻译完,所以按章节 ...

  9. 命令模式 & 策略模式 & 模板方法

    一.策略模式 策略模式:封装易变化的算法,可互相替换. GoF<设计模式>中说道:定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换.该模式使得算法可独立于它们的客户变化. 比如 ...

  10. ProgressDialog(三)——代号为中心的屏幕上显示ProgressDialog(ProgressBar)

    MainActivity如下面: package cc.testprogressdialog; import android.os.Bundle; import android.view.Gravit ...