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 ...
随机推荐
- 怎样通过互联网ssh访问家里电脑
需求:用可以上网的公司windows电脑连接家里的manjaro linux电脑.. 环境情况:公司电脑为内网,通过登录出口服务器连接互联网.家里的电脑也为内网,通过连接无线路由器连接外网.路由器有公 ...
- RepeatMasker使用
RM是library-based,通过相似性比对来识别重复序列,可以屏蔽序列中转座子重复序列和低复杂度序列(默认将其替换成N).使用数据库Dfam和Repbase. The Dfam database ...
- HyperLedger Fabric 1.4 区块链技术形成（1.2）
在比特币诞生之时,没有区块链技术概念,当人们看到比特币在无中心干预的前提下,还能安全.可靠的运行,比特币网络打开了人们的想象空间:技术专家们开始研究比特币的底层技术,并抽象提取出来,形成区块链技术,或 ...
- CodeForces 522D Closest Equals 树状数组
题意: 给出一个序列\(A\),有若干询问. 每次询问某个区间中值相等且距离最短的两个数,输出该距离,没有则输出-1. 分析: 令\(pre_i = max\{j| A_j = A_i, j < ...
- 绑定host域名 修改手机hosts域名
windows: C:\Windows\System32\drivers\etc\hosts # 在这儿输入你需要绑定的 hosts 116.31.72.421129 bro-user.flyme.c ...
- Java继承的缺点
转载自:https://www.cnblogs.com/xz816111/archive/2018/05/24/9080173.html JAVA中使用到继承就会有两个无法回避的缺点: 1.打破了封装 ...
- 《Cracking the Coding Interview》——第17章：普通题——题目13
2014-04-29 00:15 题目:将二叉搜索树展开成一个双向链表,要求这个链表仍是有序的,而且不能另外分配对象,就地完成. 解法:Leetcode上也有,递归解法. 代码: // 17.13 F ...
- 如何将现有的项目添加到远程的git库里面！
我们经常都会遇到这样的场景,就是将本地的一个项目同步到网上远程的git库里面.最近也遇到这样的问题,发现网上很少人讲到这个问题,但是这个问题是很多程序员遇到的版本库管理的最早的拦路虎. 我的远程是ht ...
- mybatis批量添加、批量删除
<!-- 批量添加 --> <insert id="insertNameListSynHisBatch" parameterType="java.uti ...
- 新建git仓库--留
1.git config 配置配置息,查看配置信息