Html
    Css
    Js

    
                        
 .ui-resizable {
	width:300px;
	height:300px;
	border:1px solid #444;
	margin:10px;
	position:relative;
}
.title {
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:24px;
	color:#fff;
	background:#999;
}
.resizable-r {
	width:10px;
	height:100%;
	background:red;
	position:absolute;
	right:0;
	top:0;
	cursor:e-resize;
}
.resizable-b {
	width:100%;
	height:10px;
	background:green;
	position:absolute;
	left:0;
	bottom:0;
	cursor:s-resize;
}
.resizable-rb {
	width:10px;
	height:10px;
	background:yellow;
	position:absolute;
	right:0;
	bottom:0;
	cursor:nw-resize;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

可变尺寸的面板

0