Web Demo Mobile Demo Angular Demo Vue Demo React Demo

可调整大小的 Resizable

Basic Resizable

Click on the edge of box and move the edge to resize the box.

Resize Me
Title
Drag and Resize Me
源代码
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Resizable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Basic Resizable</h2>
	<p>Click on the edge of box and move the edge to resize the box.</p>
	<div style="margin:20px 0;"></div>
	<div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="width:200px;height:150px;border:1px solid #ccc;">
		<div style="padding:20px">Resize Me</div>
	</div>
	<div id="dd" class="easyui-draggable easyui-resizable" data-options="handle:'#mytitle'" style="width:200px;height:150px;border:1px solid #ccc">
		<div id="mytitle" style="background:#ddd;padding:5px;">Title</div>
		<div style="padding:20px">Drag and Resize Me</div>
	</div>
</body>
</html>