Resizable(调整大小)组件，easyui基础组件之中的一个。调整大小就是能够对元素能够拖着调整大小，这个组件不依赖于其它组件，使用比較简单，相关的属性、事件都

在样例中介绍了。

演示样例：

<!DOCTYPE html>

<html>

<head>

<title>jQuery Easy UI</title>

<meta charset="UTF-8" />

<script type="text/javascript" src="easyui/jquery.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

<script>

$(function () {

	$.fn.resizable.defaults.disabled = true;

	$('#rr').resizable({

		disabled : false,  		//设置为true的时候禁止调整

		handles : 'e,s,se',		//声明调整的方位：n：北  e：东  s：南  w：西 除此之外还有ne、se、sw、nw和all。

		minWidth : 200,			//默觉得10  调整大小的时候最小宽度

		minHeight : 200,		//默觉得10  调整

		maxWidth : 600,			//默觉得10000	调整大小时默认最大宽度

		maxHeight: 400,			//默觉得10000	调整大小时默认最大高度

		edge : 10,				//默认5  		边框边缘触发大小(就是多大区域触发可拖拽边线)

		//通过浏览器控制台能够清晰的看到以下几个事件的触发时机以及触发次数

		onStartResize : function (e) {

			console.log('開始调整的时候触发！

');

		},

		onResize : function (e) {

			console.log('调整期间的时候触发！');

			//return false;

		},

		onStopResize : function (e) {

			console.log('停止调整的时候触发！

');

		},

	});

	console.log($('#rr').resizable('options'));//返回对象属性

	$('#rr').resizable('disable');			   //禁用调整功能

	$('#rr').resizable('enable');			   //启用调整功能

});

</script>

</head>

<body>

	<div id="rr" style="width:100px;height:100px;border:1px solid black"></div>

</body>

</html>

点击下载源码

jQuery Easy UI Resizable(调整大小)组件的更多相关文章

  1. 第一百九十五节，jQuery EasyUI，Resizable(调整大小)组件

    jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...

  2. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  3. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  4. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  5. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  6. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  8. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  9. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

随机推荐

  1. python:利用asyncio进行快速抓取

    web数据抓取是一个经常在python的讨论中出现的主题.有很多方法可以用来进行web数据抓取,然而其中好像并没有一个最好的办法.有一些如scrapy这样十分成熟的框架,更多的则是像mechanize ...

  2. BZOJ 1615: [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机

    题目 1615: [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机 Time Limit: 5 Sec  Memory Limit: 64 MB Desc ...

  3. Binary Tree（二叉树+思维）

    Binary Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tota ...

  4. android 项目中使用到的网络请求框架以及怎样配置好接口URL

    我们在做项目中一定少不了网络请求,如今非常多公司的网络请求这块好多都是使用一些比較好的开源框架,我项目中使用的是volley,如今讲讲一些volley主要的使用,假设想要具体的了解就要去看它的源代码了 ...

  5. CursorAdapter说明

    参考:http://www.bubuko.com/infodetail-734550.html和http://blog.csdn.net/yuzhiboyi/article/details/76548 ...

  6. 关于C++ 的eof

    #include<iostream> #include<fstream> #define MAXSIZE 1000 using namespace std; int main( ...

  7. BZOJ 1798: [Ahoi2009]Seq 维护序列seq( 线段树 )

    线段树.. 打个 mul , add 的标记就好了.. 这个速度好像还挺快的...( 相比我其他代码 = = ) 好像是#35.. ---------------------------------- ...

  8. 笔记之Cyclone IV第一卷第四章Cyclone IV器件中的嵌入式乘法器

    嵌入式乘法器可以配置成一个 18 × 18 乘法器,或者配置成两个 9 × 9 乘法器.对于那些大于18 × 18 的乘法运算 ,Quartus II 软件会将多个嵌入式乘法器模块级联在一起.虽然没有 ...

  9. form验证及图片上传

    form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...

  10. 腾讯QQ：异地登陆也被封号，你们是怎么决策的？？？

    此文我想放到首页,让很多其它的人看到,更期待有人能解释一下.希望管理员给开绿灯. 今天真是费解,我的手机号是青岛的.可是我在武汉工作,因为是3G的卡,全国没有漫游,打电话也没多少钱,所以就没换号. 谁 ...