2-4 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现为控制面板Panel添加右下角控制元素。

效果如图：

任务

一、通过脚本为Panel附加右下角的控制元素并且附加对应的样式

 

  提示:
  可以参照右侧和底侧的添加方法．
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <title>慕课网-Resizable</title>
  8.  
  9. <style type="text/css">
  10.  
  11. 	body{
  12. 		margin: 0px;padding: 50px;font-size: 14px;color: #333;
  13. 	}
  14.  
  15. 	.panel{
  16. 		width: 400px;height: 240px;
  17. 		border:1px solid #ccc;position: relative;
  18. 	}
  19.  
  20. 	.panel .title{
  21. 		background-color: #eee;text-align: center;line-height: 30px;
  22. 		border: 1px solid #fff;
  23. 		font-weight: bold;
  24. 	}
  25.  
  26. 	.ui-Resizable-r{
  27. 		/* 右侧控制元素样式　*/
  28. 		position: absolute;right: 0px;top: 0px;
  29. 		width: 10px;height: 100%;
  30. 		background-color: green;
  31. 		cursor: e-resize;
  32. 	}
  33. 	.ui-Resizable-b{
  34. 		/* 底边控制元素样式　*/
  35. 		position: absolute;right: 0px;bottom: 0px;
  36. 		width: 100%;height:10px ;
  37. 		background-color: blue;
  38. 		cursor: s-resize;
  39. 	}
  40. 	.ui-Resizable-rb{
  41. 		/* 右下角控制元素样式　*/
  42. 		position: absolute;right: 0px;bottom: 0px;
  43. 		width: 20px;height:20px ;
  44. 		background-color: red;
  45. 		cursor: nw-resize;
  46. 	}
  47. </style>
  48.  
  49. </head>
  50. <body>
  51.  
  52. 	<div class="panel" id="ui-Resizable">
  53. 		<div class="title">Resizable Panel</div>
  54. 	</div>
  55. 	<script type="text/javascript">
  56. 	function Resizable( panelId ){
  57.  
  58. 		var panel = document.getElementById(panelId);
  59. 		//	插入调整控制元素
  60.  
  61. 		var r = document.createElement("div");
  62. 		var b = document.createElement("div");
  63. 		var rb = document.createElement("div");
  64.  
  65. 		r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
  66. 		b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
  67.  
  68. 		/* 为右下角的控制元素附加样式 */		
  69.  
  70. 		panel.appendChild(r);
  71. 		panel.appendChild(b);
  72.  
  73. 		/* 把右下角的控制元素添加到Panel中 */		
  74. 	}
  75. 	Resizable('ui-Resizable');
  76.  
  77. 	</script>
  78. </script>
  79. </body>
  80. </html>
下一节