首页 > 代码库 > 开发路程(13):树形控件
开发路程(13):树形控件
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 .root48 {49 width:100px;50 height:40px;51 background-color: green;52 border:2px solid #a6a6a6;53 border-radius: 4px;54 }55 .item56 {57 float:left;58 clear:both;59 }60 .line61 {62 width:70px;63 height:50px;64 border-bottom:1px dotted #9c9c9c;65 border-left:1px dotted #9c9c9c;66 float:left;67 }68 .node69 {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 .nodeWrapper80 {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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。