简陋的树形控件_html/css_WEB-ITnose-tutoriel HTML-php.cn

简陋的树形控件_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 12:01:10

original

797 Les gens l'ont consulté

<!DOCTYPE html><html><head>    <script src="http://code.jquery.com/jquery.min.js"></script>    <script>        function rootClicked(v)        {            var newItem=document.createElement("div");            $(newItem).addClass("item");            var Line=document.createElement("div");            $(Line).addClass("line");            var newNode=document.createElement("div");            $(newNode).addClass("node");            var innerBtn=document.createElement("button");            $(innerBtn).html("addNode");            $(innerBtn).attr("onclick","addChild(this)");            var newWrapper=document.createElement("div");            $(newWrapper).addClass("nodeWrapper");            $(newNode).append(innerBtn);            $(newItem).append(Line);            $(newItem).append(newNode);            $(v).parent().next().append(newItem).append(newWrapper);        }        function addChild(v)        {            var newItem=document.createElement("div");            $(newItem).addClass("item");            var Line=document.createElement("div");            $(Line).addClass("line");            var newNode=document.createElement("div");            $(newNode).addClass("node");            var innerBtn=document.createElement("button");            $(innerBtn).html("addNode");            $(innerBtn).attr("onclick","addChild(this)");            var newWrapper=document.createElement("div");            $(newWrapper).addClass("nodeWrapper");            $(newNode).append(innerBtn);            $(newItem).append(Line);            $(newItem).append(newNode);            //$(v).parent().parent().parent().children().last().css("background-color","black");            //$(v).parent().parent().next().css("background-color","blue");            //if($(v).parent().parent().next()[0]===$(v).parent().parent().parent().children().last()[0])            //{            //    $(newWrapper).css("border-left","white");            //}            //else            //{            //    $(v).parent().parent().parent().children().last().css("border-left","1px dotted #9c9c9c");            //}            $(v).parent().parent().next().append(newItem).append(newWrapper);        }    </script>    <title></title>    <style>        .root        {            width:100px;            height:30px;            background-color: #e12249;            border:2px solid #a6a6a6;            border-radius: 4px;        }        .item        {            float:left;            clear:both;        }        .line        {            width:70px;            height:50px;            border-bottom:1px dotted #9c9c9c;            border-left:1px dotted #9c9c9c;            float:left;        }        .node        {            width:100px;            height:30px;            background-color: #e12249;            border:2px solid #a6a6a6;            border-radius: 4px;            float:left;            position:relative;            top:34px;        }        .nodeWrapper        {            float:left;padding-left:120px;clear:both;z-index: 0;border-left: 1px dotted #9c9c9c;        }    </style></head><body><div style="float:left;">    <div class="root"><button onclick="rootClicked(this)">addNode</button></div>    <div style="float:left;margin-left:50px;z-index: 0;"></div></div></body></html>

Copier après la connexion