css3文件树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul, li {
list-style: none; } ul {
padding-left: 20px;
} .close {
transition: transform .5s;
display: inline-block;
width: 15px;
height: 15px;
background: url("close.png") no-repeat center;
background-size: contain;
cursor: pointer;
}
.close:hover{
transform: scale(1.5,1.5);
} .open {
transition: transform .5s;
display: inline-block;
width: 15px;
height: 15px;
background: url("open.png") no-repeat center;
background-size: contain;
cursor: pointer;
}
.open:hover{
transform: scale(1.5,1.5);
} .leaf {
display: inline-block;
width: 15px;
height: 15px;
background: url("leaf.png") no-repeat center;
background-size: contain;
transition: transform .5s;
cursor: pointer;
} .leafName {
transition: transform .5s;
color: green;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
cursor: pointer;
} .leafName:hover{
transform: scale(1.2,1.2);
font-weight: bolder;
text-shadow: 1px 1px 2px red;
}
.leaf:hover{
transform: scale(1.5,1.5) rotate(360deg);
} .openTrue {
cursor: pointer;
transition: transform .5s;
color: black; }
.openTrue:hover{
font-weight: bolder;
transform: scale(1.5,1.5) rotate(360deg);
}
</style>
</head>
<body>
<div id="tree"></div>
<script type="text/javascript" src="../../../static/plugins/jquery/jquery-1.9.1.js"></script>
<script>
var arr = [
{
name: "父节点1 - 展开", open: true,
children: [
{
name: "父节点11 - 折叠",
children: [
{name: "叶子节点111", nid: "nid"},
{name: "叶子节点112",},
{name: "叶子节点113"},
{name: "叶子节点114"}
]
},
{
name: "父节点12 - 折叠",
children: [
{name: "叶子节点121"},
{name: "叶子节点122"},
{name: "叶子节点123"},
{name: "叶子节点124"}
]
},
{name: "父节点13 - 没有子节点", isParent: true}
]
},
{
name: "父节点2 - 折叠",
children: [
{
name: "父节点21 - 展开",
children: [
{name: "叶子节点211"},
{name: "叶子节点212"},
{name: "叶子节点213"},
{name: "叶子节点214"}
]
},
{
name: "父节点22 - 折叠",
children: [
{name: "叶子节点221"},
{name: "叶子节点222"},
{name: "叶子节点223"},
{name: "叶子节点224"}
]
},
{
name: "父节点23 - 折叠",
children: [
{
name: "叶子节点231", children: [
{
name: "叶子节点231", children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{
name: "叶子节点234", children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{
name: "叶子节点234", children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{
name: "叶子节点234", children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234"}
]
}
]
}
]
}
]
},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234"}
]
},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234"}
]
}
]
},
{name: "父节点3 - 没有子节点", isParent: true} ]; var arr1 = [
{id: 1, pId: 0, name: "父节点1 - 展开", open: true},
{id: 11, pId: 1, name: "父节点11 - 折叠"},
{id: 111, pId: 11, name: "叶子节点111"},
{id: 112, pId: 11, name: "叶子节点112"},
{id: 113, pId: 11, name: "叶子节点113"},
{id: 114, pId: 11, name: "叶子节点114"},
{id: 12, pId: 1, name: "父节点12 - 折叠"},
{id: 121, pId: 12, name: "叶子节点121"},
{id: 122, pId: 12, name: "叶子节点122"},
{id: 123, pId: 12, name: "叶子节点123"},
{id: 124, pId: 12, name: "叶子节点124"},
{id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: true},
{id: 2, pId: 0, name: "父节点2 - 折叠"},
{id: 21, pId: 2, name: "父节点21 - 展开", open: true},
{id: 211, pId: 21, name: "叶子节点211"},
{id: 212, pId: 21, name: "叶子节点212"},
{id: 213, pId: 21, name: "叶子节点213"},
{id: 214, pId: 21, name: "叶子节点214"},
{id: 22, pId: 2, name: "父节点22 - 折叠"},
{id: 221, pId: 22, name: "叶子节点221"},
{id: 222, pId: 22, name: "叶子节点222"},
{id: 223, pId: 22, name: "叶子节点223"},
{id: 224, pId: 22, name: "叶子节点224"},
{id: 23, pId: 2, name: "父节点23 - 折叠"},
{id: 231, pId: 23, name: "叶子节点231"},
{id: 232, pId: 23, name: "叶子节点232"},
{id: 233, pId: 23, name: "叶子节点233"},
{id: 234, pId: 23, name: "叶子节点234"},
{id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true}
]; paintingTree(arr, "tree") for(var i=0;i<20;i++){
new Image().src="https://www.cnblogs.com/liuhao-web/p/10030778.html"
} function paintingTree(arr, id) {
if(arr[0]["pId"]!==undefined){
arr=removeEmptyFromPaintData(arr)
}
var str = ""
//渲染树
function createTree(arr) {
if (arr) {
var children = arr;
str += "<ul>";
for (var j = 0; j < children.length; j++) {
str += "<li>"
if (children[j]["children"]) {
if (children[j]["open"]) {
str += "<div open='true'><span class='close'></span><span class='openTrue'>" + children[j]["name"] + "</span></div>";
} else {
str += "<div open='false'><span class='open'></span><span class='openTrue'>" + children[j]["name"] + "</span></div>";
} } else {
if(children[j]["isParent"]){
str += "<div open='true'><span class='open'></span>" + children[j]["name"] + "</div>";
}else{
str += "<div class='leafCon'><span class='leaf'></span><span class='leafName'>" + children[j]["name"] + "</span></div>";
} } createTree(children[j]["children"])
str += "</li>"
}
str += "</ul>";
}
} createTree(arr)
$("#"+id).hide()
$("#"+id).html(str)
$("[open=true]").each(function () {
$(this).next().show()
})
$("[open=false]").each(function () {
$(this).next().hide()
})
$(document).on("click", ".close", function () {
$(this).parent().next().hide(500)
$(this).addClass("open").removeClass("close")
})
$(document).on("click", ".open", function () {
$(this).parent().next().show(500)
$(this).addClass("close").removeClass("open")
})
$("#"+id).show()
//把简单的数据转化成渲染数据
function createPaintDataFromSimpleData(zNodes, Nodes) {
for (var i = 0; i < zNodes.length; i++) {
if (!!zNodes[i]) {
zNodes[i]["children"] = [];
for (var j = 0; j < Nodes.length; j++) { if (!!Nodes[j]) {
if (Nodes[j]["pId"] == zNodes[i]["id"]) {
if (Nodes[j]) {
zNodes[i]["children"].push(Nodes[j])
Nodes[j] = ""
}
}
}
}
if (zNodes[i]["children"].length == 0) {
zNodes[i]["children"] = false
} else {
createPaintDataFromSimpleData(zNodes[i]["children"], zNodes)
}
}
}
return zNodes
}
//对渲染数据清除空元素
function removeEmptyFromPaintData(nodes) {
var data = createPaintDataFromSimpleData(nodes, nodes);
var arr = [];
for (var i = 0; i < data.length; i++) {
if (!!data[i]) {
arr.push(data[i])
}
}
return arr
}
} </script>
</body>
</html>
css3文件树的更多相关文章
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- 基于 Octotree 的[码云]文件树插件
之前一直在用github上面的Octotree,现在在用gitee(主要是github的访问速度太慢了). 现在主要转到了gitee上面了,那么有没有基于 Octotree 的[码云]文件树插 ...
- VUE实现Studio管理后台（七）：树形结构，文件树，节点树共用一套代码NodeTree
本次介绍的内容,稍稍复杂了一点,用VUE实现树形结构.目前这个属性结构还没有编辑功能,仅仅是展示.明天再开一篇文章,介绍如何增加编辑功能,标题都想好了.先看今天的展示效果: 构建树必须用到递归,使用s ...
- 【技术博客】使用iview的Tree组件写一棵文件树
本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...
- python 根据现有文件树创建文件树
# -*- coding: utf-8 -*- import os, errno def fileName(path):#获取文件夹 str = '' for i in range(1,len(pat ...
- linux创建文件树,孩子兄弟树（或广义表）,创建文件树及其訪问
假设在Linux下要訪问一个目录. 我们须要知道一下系统调用. 1.opendir(path); //注意path是绝对路径 2.ptr=readdir(dir);//dir 为opendir();正 ...
- Mac下命令行tree生成文件树
不像Windows,Mac环境本身是没有tree命令的,但可以后天呐~ 1.下载文件包并将其放在系统目录下(本人存放路径为/Users/) https://homebrew.bintray.com/b ...
- jq生成目录文件树jQuery Ztree基本用法
转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...
- CSS3 垂直树状图——运用 :before 和 :after
直接上图(原网址),还有步骤想详解视频.自己CSS3练习demo. [demo] [HTML] <div class="tree"> <ul> <li ...
随机推荐
- Postgres常用命令之增、删、改、查
增.删.改.查: postgres=# \password postgres 为postgres进行密码设置: postgres=# CREATE USER test WITH PASSWORD '1 ...
- Postgres主备切换
主备查询 主备不会自动切换(即需要实现线上环境主数据库宕掉之后,从数据库能够自动切换为主数据库,需要借用第三方软件,例如heartbeat等) (1)如何查看是primary还是standby 方法1 ...
- 大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo
上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...
- 菜鸟学Linux - Tarball安装的一般步骤
所谓的Tarball软件,实际上指的是从网络上下载到的源码包.通常是以.tar.gz和tar.bz2结尾.至于gz和bz2的区别在于压缩算法的不同(bz2的压缩效果好像好一些).源码包下载完成后,需要 ...
- 1，版本控制git--仓库管理
再开始这个话题之前,让我想起了一件很痛苦的事情,在我大学写毕业论文的时候,我当时的文件是这样保存的 毕业论文_初稿.doc 毕业论文_修改1.doc 毕业论文_修改2.doc 毕业论文_修改3.d ...
- SpringMVC---web.xml配置详解
web.xml中需要配置的内容 1.配置监听器<listener> 它有两个监听器: 1). <!--配置文件加载监听器--> <listener> <lis ...
- 8 实现10mins用户登录与注册
1.重新认识登录 2.实现登录功能 (1)Django 自带的authenticate, login模块 from django.contrib.auth import authenticate, l ...
- 3336 /P1948电话网络（二分答案）
3336 电话网络 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题目描述 Description 由于地震使得连接汶川县城电话线全部损坏,假如你是 ...
- centos 6.X 关闭selinux
SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统.在这种访问控制体系的限制下,进程只能访问那 ...
- ubuntu上通用解压方式
ubuntu上通用解压方式 tar xvf *.bin.tar.gz,gz,tar.tgz