简陋的树形控件

时间：2014-07-24 10:03:43 阅读：302 评论：0 收藏：0 [点我收藏+]

<!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>

简陋的树形控件,布布扣,bubuko.com

简陋的树形控件

标签：style blog http color os io

原文地址：http://www.cnblogs.com/sky-view/p/3864658.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行