标签：style blog http color os io width re
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="http://code.jquery.com/jquery.min.js"></script> 6 <script> 7 function rootClicked(v) 8 { 9 var newItem=document.createElement("div"); 10 $(newItem).addClass("item"); 11 var Line=document.createElement("div"); 12 $(Line).addClass("line"); 13 var newNode=document.createElement("div"); 14 $(newNode).addClass("node"); 15 var innerBtn=document.createElement("button"); 16 $(innerBtn).html("添加子节点"); 17 $(innerBtn).attr("onclick","addChild(this)"); 18 var newWrapper=document.createElement("div"); 19 $(newWrapper).addClass("nodeWrapper"); 20 $(newNode).append(innerBtn); 21 $(newItem).append(Line); 22 $(newItem).append(newNode); 23 $(v).parent().next().append(newItem).append(newWrapper); 24 } 25 26 function addChild(v) 27 { 28 var newItem=document.createElement("div"); 29 $(newItem).addClass("item"); 30 var Line=document.createElement("div"); 31 $(Line).addClass("line"); 32 var newNode=document.createElement("div"); 33 $(newNode).addClass("node"); 34 var innerBtn=document.createElement("button"); 35 $(innerBtn).html("添加子节点"); 36 $(innerBtn).attr("onclick","addChild(this)"); 37 var newWrapper=document.createElement("div"); 38 $(newWrapper).addClass("nodeWrapper"); 39 $(newNode).append(innerBtn); 40 $(newItem).append(Line); 41 $(newItem).append(newNode); 42 $(v).parent().parent().next().append(newItem).append(newWrapper); 43 } 44 </script> 45 <title></title> 46 <style> 47 .root 48 { 49 width:100px; 50 height:40px; 51 background-color: green; 52 border:2px solid #a6a6a6; 53 border-radius: 4px; 54 } 55 .item 56 { 57 float:left; 58 clear:both; 59 } 60 .line 61 { 62 width:70px; 63 height:50px; 64 border-bottom:1px dotted #9c9c9c; 65 border-left:1px dotted #9c9c9c; 66 float:left; 67 } 68 .node 69 { 70 width:100px; 71 height:40px; 72 background-color: gray; 73 border:2px solid #a6a6a6; 74 border-radius: 4px; 75 float:left; 76 position:relative; 77 top:34px; 78 } 79 .nodeWrapper 80 { 81 float:left;padding-left:120px;clear:both;z-index: 0;border-left: 1px dotted #9c9c9c; 82 } 83 </style> 84 </head> 85 <body> 86 <div style="float:left;"> 87 <div class="root"><button onclick="rootClicked(this)">我是根节点,添加子节点</button></div> 88 <div style="float:left;margin-left:50px;z-index: 0;"></div> 89 </div> 90 </body> 91 </html>
标签：style blog http color os io width re
原文地址：http://www.cnblogs.com/liubeimeng/p/3865148.html
