<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-Resizable</title>
<style type="text/css">
body{
margin: 0px;padding: 50px;font-size: 14px;color: #333;
}
.panel{
width: 400px;height: 240px;
border:1px solid #ccc;position: relative;
}
.panel .title{
background-color: #eee;text-align: center;line-height: 30px;
border: 1px solid #fff;
font-weight: bold;
}
.ui-Resizable-r{
/* 右侧控制元素样式 */
position: absolute;right: 0px;top: 0px;
width: 10px;height: 100%;
background-color: green;
cursor: e-resize;
}
.ui-Resizable-b{
/* 底边控制元素样式 */
position: absolute;right: 0px;bottom: 0px;
width: 100%;height:10px ;
background-color: blue;
cursor: s-resize;
}
.ui-Resizable-rb{
/* 右下角控制元素样式 */
position: absolute;right: 0px;bottom: 0px;
width: 20px;height:20px ;
background-color: red;
cursor: nw-resize;
}
</style>
</head>
<body>
<div class="panel" id="ui-Resizable">
<div class="title">Resizable Panel</div>
</div>
<script type="text/javascript">
function Resizable( panelId ){
var panel = document.getElementById(panelId);
// 插入调整控制元素
var r = document.createElement("div");
var b = document.createElement("div");
var rb = document.createElement("div");
r.class = r.className = 'ui-Resizable-r ui-Resizable-ctrl';
b.class = b.className = 'ui-Resizable-b ui-Resizable-ctrl';
/* 为右下角的控制元素附加样式 */
panel.appendChild(r);
panel.appendChild(b);
/* 把右下角的控制元素添加到Panel中 */
}
Resizable('ui-Resizable');
</script>
</script>
</body>
</html>
