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 ...
随机推荐
- 裸机——SD卡
1.首先要对SD卡有个基础知识 (1) SD = nandflash + 主控IC. 主控IC负责了校验和坏块管理,所以SoC只需要依照时序就可以和SD卡上的主控IC进行数据交换等操作. (2) SD ...
- 笔记-python lib-pymongo
笔记-python lib-pymongo 1. 开始 pymongo是python版的连接库,最新版为3.7.2. 文档地址:https://pypi.org/project/pymong ...
- 笔记-scrapy-signal
笔记-scrapy-signal 1. scrapy singal 1.1. 信号机制 scrapy的信号机制主要由三个模块完成 signals.py 定义信号量 signalmana ...
- ST表学习
啊谈不上学习了.复习一下原理留一下板子. $f\left[i,j \right]$表示以$i$为起点,区间长度为${2}^{j}$的区间最值.以最小值为例,即 $min\left(a\left [ k ...
- SpringBoot推荐基础包
技术交流群:233513714 Spring Boot 推荐的基础包 名称 说明 spring-boot-starter 核心 POM,包含自动配置支持.日志库和对 YAML 配置文件的支持. spr ...
- hasOne
public boolean hasOne(int n) { int lastdigit=0; while( n >0 ){ lastdigit=(n % 10); if(lastdigit== ...
- 对setTimeout函数的理解
之前去面试一家公司时,面试官出了一道关于js的setTimeout函数的题目: /* *面试官给的原题目如下: *执行mytest()后,控制台输出内容是_____ *function mytest( ...
- Kotlin中when表达式的使用：超强的switch（KAD 13）
作者:Antonio Leiva 时间:Feb 23, 2017 原文链接:https://antonioleiva.com/when-expression-kotlin/ 在Java(特别是Java ...
- 浅谈 css 之 position用法
在 css中, position 属性有四个值可用: static(默认值).absolute.relative.fixed. relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留 ...
- IDEA调试快捷键
F9 resume programe 恢复程序 F8 Step Over 相当于eclipse的f6 跳到下一步 Ctrl+Shift+F,全局查 ...