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

            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);        }            .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;        }    

登录后复制

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3092132.html

(0)
上一篇 2025年3月28日 13:41:53
下一篇 2025年3月28日 13:42:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • django控件及传参使用详解

    这次给大家带来djangodjango及传参使用详解,django控件及传参使用的django有哪些,下面就是实战案例,一起来看一下。 本文对djangoHTML的表单控件中的单选及多选进行介绍,并说明如何进行参数传递。 1.HTML中的表…

    编程技术 2025年4月4日
    200
  • vue.js如何判断对象是否存在某个属性

    vue.js判断对象是否存在某个属性的方法:【if(row.hasOwnProperty(‘url’)){//row对象存在’url’属性}else{//row对象不存在’url&…

    2025年4月1日
    100
  • photoshop制作动感非主流空间闪图教程让别人羡慕你的动画

    看到别人空间那漂亮有闪烁的图片羡慕吗?在看看自己静态的图片,一点都不吸引眼球。其实常见的闪动效果制作一点也不难,下面就就跟我一起学习制作方法吧! 闪图最终效果  1、打开已经准备好的三张闪图图片 2、用选框工具把三张图片都复制到一个图片上面…

    2025年4月1日 编程技术
    100
  • Photoshop制作酷劲十足的三维空间特效

    在这个教程中我将教你如何用PS来创建一个方法简单,但酷劲十足的3维空间特效……先看一下最终效果: 1.建立一个新文档,这里我用600*600像素。建立一个新图层并用白色填充,命名为“Blocks”。然后执行滤镜-风格化-凸出,设置如下所示:…

    2025年4月1日 编程技术
    200
  • Photoshop入门教程:字体安装及使用

      我们得到的字体如果都安装到字体文件夹里,势必会增加系统负荷,影响系统的运行速度,这就要解决如何即不占c盘空间,又能很方便地使用,特别是在photoshop里的运用,我们分几个部分来解决一下。   1、文件的存放   我们得到的字体文件最…

    2025年4月1日 编程技术
    200
  • HTML属性的详解及教程

    属性是 html 元素提供的附加信息。 HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 about an element 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name=”val…

    编程技术 2025年4月1日
    100
  • display常见的属性值介绍

    常见的属性值  none:元素隐藏  block:块级元素  inline-block:内联块级元素  list-item:列表项目  表格系列方面的显示  table  table-row flex(弹性盒子) .table{displa…

    编程技术 2025年4月1日
    100
  • 标签属性分类(元素对象属性)实例教程

    标签属性分类(元素对象属性) 普遍属性    全局都可以生效 特定属性    不同的标签有它们特有的属性 特殊标签: href  百度    默认是在本窗口打开 target href  百度    如果不删除红色部分,网页会在新窗口打开 …

    2025年4月1日
    100
  • 小tips:js中的pixelTop属性

    style对象: pixelLeftpixelToppixelWidthpixelHeight 返回以像素为单位的位置坐标的数值,非像素单位转换为像素单位显示。   lefttopwidthheight 返回带单位的位置坐标字符串 以上就是…

    编程技术 2025年4月1日
    100
  • HTML中块标记和行内标记的介绍

    html标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素。 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。并且块级元素容器可以容纳多个嵌套的块级标签或者行…

    2025年4月1日 编程技术
    100

发表回复

登录后才能评论