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标记创建:

  1. <div class="easyui-resizable" style="width:100px;height:100px;border:1px solid #ccc;"
  2.         data-options="maxWidth:800,maxHeight:600">
  3. </div>

2、使用js脚本创建:

  1. <div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
  2. $('#rr').resizable({
  3.     maxWidth:800,
  4.     maxHeight:600
  5. });

Demo

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

  1. <!DOCTYPE html>
  2. <html> <head>
  3.     <meta charset="UTF-8">
  4.     <title>Basic Draggable - jQuery EasyUI Demo</title>
  5.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">
  6.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">
  7.     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">
  8.     <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
  9.     <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
  10. </head>
  11. <body>
  12.     <center>
  14.         <div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="border: 2px solid #C0C0C0;
  15.         -moz-border-radius: 10px;
  16.         -webkit-border-radius: 10px;
  17.         border-radius: 10px;
  18.         position: relative;
  19.         padding: 5px;
  20.         background: #FFF;
  21.         height:300px;
  22.         width:300px;
  23.         z-index: 2;">
  24.             <div style="padding:20px">Resize Me</div>
  25.         </div>
  26.     </center>
  27.     <script>
  28.     </script>
  29. </body>
  30. </html>


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


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


												


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

    
								
  1. EasyUI基础入门之Parser(解析器)
		
    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
    
		
    2. 
						
  2. EasyUI基础入门之Easyloader(载入器)
		
    在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...
    
		
    3. 
						
  3. EasyUI基础入门之Pagination(分页)
		
    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...
    
		
    4. 
						
  4. easyUI基础入门
		
    头部需要引人文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <ti ...
    
		
    5. 
						
  5. EasyUI基础入门之Droppable(可投掷)
		
    怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
    
		
    6. 
						
  6. 王者荣耀是怎样炼成的（二）《王者荣耀》unity安装及使用的小白零基础入门
		
    转载请注明出处:http://www.cnblogs.com/yuxiuyan/p/7535345.html 工欲善其事,必先利其器. 上回书说到,开发游戏用到unity和C#.本篇博客将从零开始做一 ...
    
		
    7. 
						
  7. CSS3基础入门03
		
    CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...
    
		
    8. 
						
  8. CSS3基础入门02
		
    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...
    
		
    9. 
						
  9. Siki_Unity_1-3_Unity零基础入门_古迹探险
		
    1-3 Unity零基础入门 古迹探险 任务1/2:资料下载 链接:https://pan.baidu.com/s/1jHVymNk 密码:rbob 任务3:工程的创建和打开 Project:古迹探险 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 使用clojure訪问SQL Server数据库
			
    (require '[korma.core :as kc]) (require '[korma.db :as kd]) (Class/forName "com.microsoft.jdbc. ...
    
			
    2. 
						
  2. async And await异步编程活用基础
			
    原文:async And await异步编程活用基础 好久没写博客了,时隔5个月,奉上一篇精心准备的文章,希望大家能有所收获,对async 和 await 的理解有更深一层的理解. async 和 a ...
    
			
    3. 
						
  3. Mean Shift简介
			
    Mean Shift,我们 翻译“平均漂移”. 其集群,图像平滑. 图像分割和跟踪已广泛应用.因为我现在认为追踪,因此推出Mean Shift该方法用于目标跟踪.从而MeanShift較全面的介绍.  ...
    
			
    4. 
						
  4. UVA 1411 - Ants(二分图完美匹配）
			
    UVA 1411 - Ants 题目链接 题意:给定一些黑点白点,要求一个黑点连接一个白点,而且全部线段都不相交 思路:二分图完美匹配,权值存负的欧几里得距离,这种话,相交肯定比不相交权值小,所以做一 ...
    
			
    5. 
						
  5. Microsoft Toolkit 2.5下载 – 一键激活Windows 8.1/2012 R2/Office 2013
			
    http://www.dayanzai.me/microsoft-toolkit-2-5.html
    
			
    6. 
						
  6. C# 读取IE缓存文件(1)
			
    using System; using System.Runtime.InteropServices; namespace Common { public class IECache { [DllIm ...
    
			
    7. 
						
  7. Raw-OS互斥的源代码分析的量的Mutex
			
    作为分析的内核版本2014-04-15,基于1.05正式版.blogs我们会跟上的内核开发进度的最新版本,如果出现源代码的目光"???"的话,没有深究的部分是理解. Raw-OS官 ...
    
			
    8. 
						
  8. c# 16进制显示转化
			
    非原创. 接收16进制数据,在TextBox委托显示: private void readPortandShow() { char[] HexChar = { '0', '1', '2', '3',  ...
    
			
    9. 
						
  9. SQL Server 2008性能故障排查（三）——I/O
			
    原文:SQL Server 2008性能故障排查(三)--I/O 接着上一章:CPU瓶颈 I/O瓶颈(I/O Bottlenecks): SQLServer的性能严重依赖I/O子系统.除非你的数据库完 ...
    
			
    10. 
						
  10. django简单图表
			
    Settings.py:项目的配置文件.包含数据库配置信息;模板路径的配置信息;webserver的配置信息;app的配置信息等其他配置信息. urls.py:函数与模板相应关系的配置信息,能够理解为 ...
    
			
    11.