jQuery Easy UI Resizable(调整大小)组件

最新推荐文章于 2025-04-19 21:35:48 发布

hai_cheng001

最新推荐文章于 2025-04-19 21:35:48 发布

阅读量6.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jQuery jQuery 文章标签： jquery easyui Resizable

本文链接：https://blog.youkuaiyun.com/caohaicheng/article/details/38876807

jQuery 同时被 2 个专栏收录

21 篇文章

订阅专栏

jQuery

20 篇文章

订阅专栏

本文介绍jQuery Easy UI中的Resizable组件，作为基础组件，它允许用户通过拖动来调整元素的大小。示例代码展示了如何使用相关属性和事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

点击下载源代码