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 ...
随机推荐
- POJ：3684-Physics Experiment(弹性碰撞)
Physics Experiment Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3392 Accepted: 1177 Sp ...
- python正则表达式02--findall()和search()方法区别，group()方法
import re st = 'asxxixxsaefxxlovexxsdwdxxyouxxde' #search()和 findall()的区别 a = re.search('xx(.*?)xxsa ...
- Hadoop2.8.0 源码编译
一.下载源码并解压 二.检查以下几项 必须有网络!!! JDK 1.7+ 安装方法 java -version Maven 3.0 or later 安装方法 mvn -version Findbug ...
- 12，DBUtils - Python数据库连接池
创建数据库连接池: import time import pymysql import threading from DBUtils.PooledDB import PooledDB, SharedD ...
- 18，Shell编程实战
为什么要学习Shell编程 Shell脚本语言是实现Linux/Unix系统管理及自动化运维所必须的重要工具,Linux系统的底层以及基础应用软件的核心大都涉及Shell脚本的内容. 一个合格的L ...
- The GNU C Library
Any Unix-like operating system needs a C library: the library which defines the ``system calls'' and ...
- 用swoole实现nginx日志解析
1.原技术路线解析 在nging配置中将日志信息交给syslog处理,rsyslog配置中将数据传递给了514端口解析,然后将解析好的数据传入elasticsearch中. nginx配置 serve ...
- win7重装后恢复grub和ubuntu14
没有光盘和优盘启动盘,可以在win7下安装easybcd,添加一个启动选项为linux grub2,启动后进入ubutnu,执行如下: sudo -i //取得root权限 fdisk -l ...
- 《Cracking the Coding Interview》——第13章：C和C++——题目6
2014-04-25 20:07 题目:为什么基类的析构函数必须声明为虚函数? 解法:不是必须,而是应该,这是种规范.对于基类中执行的一些动态资源分配,如果基类的析构函数不是虚函数,那么 派生类的析构 ...
- MQ消息中间件
MQ是什么? MQ是Message Queue消息队列的缩写.消息队列是一种应用程序对应用程序的通信方法.应用程序通过写和检索入列队的针对应用程序的数据(消息)来进行通信,而不需要专用连接来链接它们. ...