Dir_tree

Developer
Alexandr
Size
3,651 Kb
Views
30,360
  1. Dir_tree Previews
  2. Dir_tree HTML Codes
  3. Dir_tree CSS Codes
  4. Dir_tree JS Codes

How do I make an dir_tree?

What is a dir_tree? How do you make a dir_tree? This script and codes were developed by Alexandr on 07 October 2022, Friday.

Dir_tree Previews
IQ Test

Dir_tree - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dir_tree</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div class="root_dir"> <details class="dir"> <summary class="dir_name">Папка1</summary> <div class="create_dir"> <form name="createDir" action="$" onsubmit="return fun_createDir(this)"> <input class="input_create_dir" type="text" name="dir_name" placeholder="Создать папку"/> </form> </div> <details class="dir"> <summary class="dir_name">Папка2</summary> <details class="dir"> <summary class="dir_name">Папка3.1</summary> </details> <details class="dir"> <summary class="dir_name">Папка3.2</summary> </details> </details> </details> <details class="dir"> <summary class="dir_name">Директория1</summary> <details class="dir"> <summary class="dir_name">Директория2</summary> <details class="dir"> <summary class="dir_name">Директория3.1</summary> </details> <details class="dir"> <summary class="dir_name">Директория3.2</summary> </details> </details> </details> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Dir_tree - Script Codes CSS Codes

.root_dir { border: 1px solid black; padding: 10px; width: 50%;
}
details.dir { padding-left: 30px; display: block; width: 200px; margin-top: 5px;
}
summary.dir_name { width: 150px; height: 25px; border: 1px solid grey; border-radius: 0px 10px 0 0; background-color: #ffa; padding: 5px;
}
input.input_create_dir { cursor: pointer; width: 150px; height: 25px; border: 1px dashed grey; border-radius: 15px; background-color: #fee; padding: 5px; text-align: center;
}

Dir_tree - Script Codes JS Codes

//var root_dir;
var folder={dir_name:"Новая папка", parent: 0,
selected: false};
function new_folder(name, parent) { this.__proto__ = folder;	this.name = name;	this.parent = parent;
}
var list_of_folders = [folder];
//var list_of_img_names = ["image1","img2","img3","img4","img5"];
//var expansion = ".jpg";
if (!localStorage.length)	{localStorage.setItem("list_of_img_names", list_of_img_names);}
function fun_createDir(form) {	//alert ("111");	var dir_name = form.dir_name.value;	$(form).parent().after($("details.dir:last")).append("<details class='dir'><summary class='dir_name'>"+dir_name+" </summary></details>");	form.dir_name.placeholder = "Создать папку";	form.dir_name.value="";	//alert (dir_name);	return false;	}
function create_img_of_files(arr){	arr.forEach(function(item, i, arr) {	//alert( i + ": " + item );	//newLi.innerHTML+= '';	$(".root_dir").append("<div class='file'><div class='file_rect'></div><p class='file_name'>" + item + expansion + "</p></div>");	});
}
// alert("fff");
//create_img_of_files(list_of_img_names);
$(document).ready (function(){
});
Dir_tree - Script Codes
Dir_tree - Script Codes
Home Page Home
Developer Alexandr
Username Aortan
Uploaded October 07, 2022
Rating 3
Size 3,651 Kb
Views 30,360
Do you need developer help for Dir_tree?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexandr (Aortan) Script Codes
Name
Shape-outside
Gamma
Game of Life
A Pen by Alexander
A Pen by Alexandr
Overflow-wrap and white-space
Flexblock
Color Game of Life
Tooltips
My slider
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!