jquery easyui 中元素的重置大小

最新推荐文章于 2024-09-18 14:45:42 发布

原创最新推荐文章于 2024-09-18 14:45:42 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery resize resizable 重置大小

CSS 同时被 2 个专栏收录

4 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

本文详细介绍了使用 jQuery EasyUI 实现 HTML 元素的大小重置功能，包括常用参数、事件响应方法及未提及的属性解释。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../jquery-1.6.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			//可以随意的调整大小
			$('#rr').resizable();
			
			/**
			* minWidth:最小宽度；
			* maxWidth：最大宽度；
			* minHeight：最小高度；
			* maxHeight：最大高度
			*/
			$('#dd').draggable({handle:'#mytitle'});
			$('#rd').draggable({edge:5}).resizable({
				minWidth:50,
				maxWidth:150,
				minHeight: 100,
				maxHeight: 200,
				//开始调整
				onStartResize: function(e){
					$('#info').html('start'+$(this).css('width'));
				},
				//正在调整
				onResize: function(e){
					$('#info').html($(this).css('width'));
				},
				//停止调整
				onStopResize: function(e){
					$('#info').html('stop:'+$(this).css('width'));
				}
			});
			$('div.mcc').draggable({edge:5}).resizable();
		});

		function stop(){
			$('div.mcc').draggable({disabled:true});
		}
	</script>
</head>
<body>
	<div id="info" style="top:300px;height:20px;border:1px solid #ccc;">info</div>
	<div id="rr" style="width:400px;height:100px;background:#bbb;">Resize</div>
	<div id="dd" style="left:100px;top:100px;width:100px;height:100px;background:#ccc;">
		<div id="mytitle" style="background:red;">title</div>
		Drag
	</div>
	<div id="rd" style="margin:10px;padding:10px;width:100px;height:100px;background:#ddd;border:1px solid red;">Resize/Drag</div>
	<div class="mcc" style="-moz-border-radius:5px;left:300px;top:100px;width:100px;height:100px;background:#eee;border:2px solid red;">
		<a href="#" onclick="stop()">stopdrag</a>
	</div>
</body>
</html>

jquery easyui 中元素的重置大小

常用的参数以及事件响应的方法在代码中已经体现

还有未出现的属性：

disable：是否可以重置大小，true：不能，false：可以，默认为false；

handles：通过方为来控制可以调整的区域，'n' is the north,'e' is the east,etc.传入的参数有：n, e, s, w, ne, se, sw, nw, all；

例如：

handles:'n,w,e',
minWidth:50,
maxWidth:150,
minHeight: 100,
maxHeight: 200,

只能从北，西，东这三个方向来调整元素的大小；

edge：距离边框多少距离开始重置。