jquery easyui 中元素的重置大小

 

<!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:距离边框多少距离开始重置。

你可能感兴趣的:(jquery easyui 中元素的重置大小)