کد ایجاد پوشه درختی در سایت

شما میتوانید با کد ایجاد پوشه درختی برای خود یک سایت اهنگ و یا هر چیز دیگر درست کنید.

این کد در سایت شما پوشه ای شبیه به پوشه های گوشی و یا کامپیوتر شما ایجاد میکند

که به راحتی میتوانید در پوشه ها اهنگ و یا هر چیز دیگه ای که به نظر شما میرسه بزارید.

شما میتوانید ایکون پوشه ها را با عکس مورد نظر خود تعویض نمایید مثلا عکس – و یا + را قرار دهید و تا بینهایت عمق برای پوشه ها ایجاد کنید.

شما میتوانید با کد ایجاد پوشه درختی کارهای زیر را انجام دهید

۱= ایجاد سایت موزیک و قرار دادن البوم هر خواننده در پوشه مورد نظر

۲= ایجاد صفحه پرسش و پاسخ با عوض کردن ایکون پوشه ها

۳- ساخت سایتی شبیه به مای کامپیوتر که کاربر پس از ورود به ان بتواند وارد فولدرها شد و فیلم یا عکس خود را مشاهده کند.

پیشنمایش کد

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>پوشه درختی</title>
</head>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<h1><a style="display:none;" href="https://www.codebazan.ir/">&#1705;&#1583;&#1576;&#1575;&#1586;&#1575;&#1606;</a></h1><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="author" content="codebazan">
<style type="text/css">
a, a:visited, a:active {
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:black;
text-decoration:underline;
}
a:hover {
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:#00436e;
text-decoration:none;
}
body{
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:black;
background-color:rgb(255,255,255);
}
.code{
font-size:10pt;
font-weight:normal;
font-family:serif;
color:maroon;
}
.code1{
font-size:10pt;
font-weight:normal;
font-family:serif;
color:blue;
}
.code2{
font-size:10pt;
font-weight:normal;
font-family:serif;
color:green;
}
.desc {
cursor:default;
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:maroon;
}
.folder {
cursor:default;
display:block;
font-size:12pt;
font-family:serif;
font-weight:bold;
color:black;
padding:6 0 0 0;
}
.content {
display:none;
color:#00436e;
padding: 0 0 0 25;
font-size:10pt;
font-family:sans-serif;
}
.container{
width:98%;
display:block;
}
</style>

<script language="javascript">
var ids=new Array();
function FTinit(){
if(document.getElementById){
var tids=document.getElementsByTagName('span');
for(i=0;i<tids.length;i++)if(tids[i].className=="folder")ids[ids.length]=tids[i];
for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate;
//expandall(); // REMOVE THE // FROM THE BIGINNING OF THIS LINE TO HAVE THE TREE EXPANDED INITIALLY.
openById('mainID');
}}
function openById(id){
var el=document.getElementById(id);
el.parentNode.getElementsByTagName('div')[0].style.display="block";
el.getElementsByTagName('img')[0].src="https://rozup.ir/view/964224/5175747601.gif";
}
function closeById(el){
var el=document.getElementById(id);
el.parentNode.getElementsByTagName('div')[0].style.display="none";
el.getElementsByTagName('img')[0].src="https://rozup.ir/view/964224/5175747601.gif";
}
function setstate(){
for(i=0;i<ids.length;i++){
if(ids[i]==this){
var d=this.parentNode.getElementsByTagName('div')[0];
if(d.style.display=="block"){
d.style.display="none";
this.getElementsByTagName('img')[0].src="https://rozup.ir/view/964224/5175747601.gif";
}else{
d.style.display="block";
this.getElementsByTagName('img')[0].src="https://rozup.ir/view/964224/5175747601.gif";
}}}}
function expandall(){
if(document.getElementById){
for(i=0;i<ids.length;i++){
ids[i].parentNode.getElementsByTagName('div')[0].style.display="block";
ids[i].getElementsByTagName('img')[0].src="https://rozup.ir/view/964223/3212511739.gif";
}}}
function collapseall(){
if(document.getElementById){
for(i=0;i<ids.length;i++){
ids[i].parentNode.getElementsByTagName('div')[0].style.display="none";
ids[i].getElementsByTagName('img')[0].src="https://rozup.ir/view/964224/5175747601.gif";
}}}
window.onload=FTinit;</script>
</script>


</head>


<body>
<center>
<a href="javascript:expandall()">باز کردن همه</a> | <a href="javascript:collapseall()">بستن همه</a>
<br><br>
<div class="container"><span class="folder" id="mainID"><img src="https://rozup.ir/view/964224/5175747601.gif"> پوشه ها</span>
<div class="content">

  <div class="container"><span class="folder"><img src="https://rozup.ir/view/964224/5175747601.gif"> پوشه 1</span>
  <div class="content">
متن درون پوشه  
  </div></div>

  <div class="container"><span class="folder"><img src="https://rozup.ir/view/964224/5175747601.gif">پوشه 2</span>
  <div class="content">
  <ol>
 متن پوشه 2
  
  </ul>
  </div></div>

  <div class="container"><span class="folder"><img src="https://rozup.ir/view/964224/5175747601.gif"> پوشه 3</span>
  <div class="content">
 متن پوشه 3

        <div class="container"><span class="folder"><img src="https://rozup.ir/view/964224/5175747601.gif"> زیر پوشه 1</span>
        <div class="content">
          <div class="container"><span class="folder"><img src="https://rozup.ir/view/964224/5175747601.gif">زیر پوشه 2</span>
          <div class="content">
            <div class="container"><span class="folder"><img src="https://rozup.ir/view/964224/5175747601.gif"> 

زیر پوشه 3</span>
            <div class="content">
              <div class="container"><span class="folder"><img src="https://rozup.ir/view/964224/5175747601.gif"> زیر پوشه 4            <div class="content">
           متن زیر پوشه5
              </div></div>
            </div></div>
          </div></div>
        </div></div>
  </div></div>
</div></div>
</body>
</html>
<body>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>پوشه درختی</title>

</head>

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<h1><a style="display:none;" href="https://www.codebazan.ir/">کدبازان</a></h1><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

a, a:visited, a:active {

font-size:10pt;

font-weight:normal;

font-family:sans-serif;

color:black;

text-decoration:underline;

}

a:hover {

font-size:10pt;

font-weight:normal;

font-family:sans-serif;

color:#00436e;

text-decoration:none;

}

body{

font-size:10pt;

font-weight:normal;

font-family:sans-serif;

color:black;

background-color:rgb(255,255,255);

}

.code{

font-size:10pt;

font-weight:normal;

font-family:serif;

color:maroon;

}

.code1{

font-size:10pt;

font-weight:normal;

font-family:serif;

color:blue;

}

.code2{

font-size:10pt;

font-weight:normal;

font-family:serif;

color:green;

}

.desc {

cursor:default;

font-size:10pt;

font-weight:normal;

font-family:sans-serif;

color:maroon;

}

.folder {

cursor:default;

display:block;

font-size:12pt;

font-family:serif;

font-weight:bold;

color:black;

padding:6 0 0 0;

}

.content {

display:none;

color:#00436e;

padding: 0 0 0 25;

font-size:10pt;

font-family:sans-serif;

}

.container{

width:98%;

display:block;

}

</style>

var ids=new Array();

function FTinit(){

if(document.getElementById){

var tids=document.getElementsByTagName('span');

for(i=0;i<tids.length;i++)if(tids[i].className=="folder")ids[ids.length]=tids[i];

for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate;

//expandall(); // REMOVE THE // FROM THE BIGINNING OF THIS LINE TO HAVE THE TREE EXPANDED INITIALLY.

openById('mainID');

}}

function openById(id){

var el=document.getElementById(id);

el.parentNode.getElementsByTagName('div')[0].style.display="block";

el.getElementsByTagName('img')[0].src="http://rozup.ir/view/964224/5175747601.gif";

}

function closeById(el){

var el=document.getElementById(id);

el.parentNode.getElementsByTagName('div')[0].style.display="none";

el.getElementsByTagName('img')[0].src="http://rozup.ir/view/964224/5175747601.gif";

}

function setstate(){

for(i=0;i<ids.length;i++){

if(ids[i]==this){

var d=this.parentNode.getElementsByTagName('div')[0];

if(d.style.display=="block"){

d.style.display="none";

this.getElementsByTagName('img')[0].src="http://rozup.ir/view/964224/5175747601.gif";

}else{

d.style.display="block";

this.getElementsByTagName('img')[0].src="http://rozup.ir/view/964224/5175747601.gif";

}}}}

function expandall(){

if(document.getElementById){

for(i=0;i<ids.length;i++){

ids[i].parentNode.getElementsByTagName('div')[0].style.display="block";

ids[i].getElementsByTagName('img')[0].src="http://rozup.ir/view/964223/3212511739.gif";

}}}

function collapseall(){

if(document.getElementById){

for(i=0;i<ids.length;i++){

ids[i].parentNode.getElementsByTagName('div')[0].style.display="none";

ids[i].getElementsByTagName('img')[0].src="http://rozup.ir/view/964224/5175747601.gif";

}}}

window.onload=FTinit;</script>

</script>

</head>

<body>

متن درون پوشه

</div></div>

<ol>

متن پوشه 2

</ul>

</div></div>

متن پوشه 3

زیر پوشه 3</span>

متن زیر پوشه5

</div></div>

</body>

</html>

<body>

</body>

</html>

کد ایجاد پوشه درختی در سایت

دیدگاهتان را بنویسید لغو پاسخ