編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識，實現(xiàn)為控制面板Panel添加右下角控制元素。
效果如圖：
任務(wù)
一、通過腳本為Panel附加右下角的控制元素并且附加對應(yīng)的樣式
提示:
可以參照右側(cè)和底側(cè)的添加方法．
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網(wǎng)-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{
/* 右側(cè)控制元素樣式 */
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);
// 插入調(diào)整控制元素
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>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
