模拟文件夹
本来是要做一个命令行的，这个算是铺垫。
规定一个文件的表示形式：
file_0 : {
type : 'folder',
name : 'folder_0',
length : 2,
files[fileContent] :{}
}
type:文件类型，分为disk、folder和file
name：文件（夹）名
length：文件夹中的文件个数，file类型没有length属性
files：子文件
fileContent：文件内容
fileArray:主要是想用来进行排序的。
作为demo的文件结构
var fileSystem = {
type : 'disk',
name : 'C:',
length : 8,
fileArray:['file_0','file_1','file_2','file_3','file_4','file_5','file_6','file_7'],
files : {
file_0 : {
type : 'folder',
name : 'folder_0',
fileArray:['file_0','file_1'],
length : 2,
files :{
file_0 : {
type : 'file',
name : 'file_1'
},
file_1 : {
type : 'folder',
name : 'folder_0_0',
length : 3,
fileArray:['file_0','file_1','file_2'],
files :{
file_0 : {
type : 'file',
name : 'file_2'
},
file_1 : {
type : 'file',
name : 'file_3'
},
file_2:{
type : 'folder',
name : 'folder_0_0_0',
length : 0,
files :{}
}
}
}
}
},
file_1 : {
type : 'folder',
name : 'folder_2',
length : 2,
fileArray:['file_0','file_1'],
files :{
file_0 : {
type : 'file',
name : 'file_2'
},
file_1 : {
type : 'file',
name : 'file_3'
}
}
},
file_2:{
type : 'file',
name : 'file_2',
fileContent:'小西山子'
},
file_3:{
type : 'file',
name : 'file_3',
fileContent:'小西山子'
},
file_4:{
type : 'file',
name : 'file_4',
fileContent:'小西山子'
},
file_5:{
type : 'file',
name : 'file_5',
fileContent:'小西山子'
},
file_6:{
type : 'file',
name : 'file_6',
fileContent:'小西山子'
},
file_7:{
type : 'folder',
name : 'folder_7',
length : 0,
fileArray:[],
files :{}
}
}
}
这是一个树形结构，
第一层有8个文件——包括2个文件夹（type:folder）和6个文件（type:file），以此类推
基本的HTML结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body{ font-size: 12px;}
ul{ list-style: none;}
#fileWindow{ position: relative; width: 600px; height: 400px; margin:10px 0 0 20px; border: 5px solid #808080; border-radius: 5px; box-shadow: 5px 5px 10px #000; overflow: hidden;}
#fileWindow li{ float: left; width: 50px; height: 50px; line-height: 50px; margin: 10px; cursor: pointer; border-radius: 5px; box-shadow: 5px 5px 10px #000; font-size: 14px; color: #fff; text-align: center;}
.folder{ background: #008b8b; }
.folder:after{ content: '文件夹';}
.file{ background: #006400;}
.file:after{ content: '文件';}
#defaultWindow,.subWindow{ position: absolute; top:0; width: 100%; height: 100%; background: #7fffd4;}
#defaultWindow{ left: 0; }
.subWindow{ left: 602px;}
.subWindow .title{ height: 30px; line-height: 30px; background: #a9a9a9;}
.subWindow .title span{ float: right; cursor: pointer;}
#contentWindow{ position: absolute; left: 650px; top:0; width: 400px; height: 200px; margin:10px 0 0 20px; border: 3px dotted #ff8c00; font-size: 14px;}
</style>
</head>
<body>
<div id="fileWindow">
<div id="defaultWindow"></div>
</div>
<div id="contentWindow"></div>
</body>
</html>
其中<div#defaultWindow作为默认的显示窗口。div#contentWindow是为了简化显示文件内容的
暂时的原理是：
点击文件时，在div#contentWindow里面直接显示文件内容。
点击文件夹时，创建一个新窗口，然后覆盖当前窗口，这里有个问题就是重复创建窗口以及窗口过多引起性能下降，所以需要进行处理，由于demo个数较少，而且我限制在单窗口打开，所以没有处理，后面实现成弹出窗口时，就需要考虑了。
下面是demo：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body{ font-size: 12px;}
ul{ list-style: none;}
#fileWindow{ position: relative; width: 600px; height: 400px; margin:10px 0 0 20px; border: 5px solid #808080; border-radius: 5px; box-shadow: 5px 5px 10px #000; overflow: hidden;}
#fileWindow li{ float: left; width: 50px; height: 50px; line-height: 50px; margin: 10px; cursor: pointer; border-radius: 5px; box-shadow: 5px 5px 10px #000; font-size: 14px; color: #fff; text-align: center;}
.folder{ background: #008b8b; }
.folder:after{ content: '文件夹';}
.file{ background: #006400;}
.file:after{ content: '文件';}
#defaultWindow,.subWindow{ position: absolute; top:0; width: 100%; height: 100%; background: #7fffd4;}
#defaultWindow{ left: 0; }
.subWindow{ left: 602px;}
.subWindow .title{ height: 30px; line-height: 30px; background: #a9a9a9;}
.subWindow .title span{ float: right; cursor: pointer;}
#contentWindow{ position: absolute; left: 650px; top:0; width: 400px; height: 200px; margin:10px 0 0 20px; border: 3px dotted #ff8c00; font-size: 14px;}
</style>
</head>
<body>
<div id="fileWindow">
<div id="defaultWindow"></div>
</div>
<div id="contentWindow"></div>
<script type="text/javascript">
var fileSystem = {
type : 'disk',
name : 'C:',
length : 8,
fileArray:['file_0','file_1','file_2','file_3','file_4','file_5','file_6','file_7'],
files : {
file_0 : {
type : 'folder',
name : 'folder_0',
fileArray:['file_0','file_1'],
length : 2,
files :{
file_0 : {
type : 'file',
name : 'file_1'
},
file_1 : {
type : 'folder',
name : 'folder_0_0',
length : 3,
fileArray:['file_0','file_1','file_2'],
files :{
file_0 : {
type : 'file',
name : 'file_2'
},
file_1 : {
type : 'file',
name : 'file_3'
},
file_2:{
type : 'folder',
name : 'folder_0_0_0',
length : 0,
files :{}
}
}
}
}
},
file_1 : {
type : 'folder',
name : 'folder_2',
length : 2,
fileArray:['file_0','file_1'],
files :{
file_0 : {
type : 'file',
name : 'file_2'
},
file_1 : {
type : 'file',
name : 'file_3'
}
}
},
file_2:{
type : 'file',
name : 'file_2',
fileContent:'小西山子'
},
file_3:{
type : 'file',
name : 'file_3',
fileContent:'小西山子'
},
file_4:{
type : 'file',
name : 'file_4',
fileContent:'小西山子'
},
file_5:{
type : 'file',
name : 'file_5',
fileContent:'小西山子'
},
file_6:{
type : 'file',
name : 'file_6',
fileContent:'小西山子'
},
file_7:{
type : 'folder',
name : 'folder_7',
length : 0,
fileArray:[],
files :{}
}
}
}
function $(id){
return document.getElementById(id);
}
var fileWindow = $('fileWindow');
var defaultWindow = $('defaultWindow');
var contentWindow = $('contentWindow');
// var windowStack = [defaultWindow];//用作栈
// var windowPointer = defaultWindow;//栈指针
var textContent = document.body.innerText !== null ? 'innerText' : 'textContent';
var mainList = createFolderTree(fileSystem);
defaultWindow.appendChild(mainList);
fileWindow.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() == 'li'){
switch(target.content.type){
case('folder') : {
openFolder(target.content);
break;
}
case('file') : {
openFile(target.content);
break;
}
}
}
if(target.className == 'back'){
goBack(target);
}
}
//返回上一级
function goBack(target){
target.wrapWindow.style.left = '602px';
return 0;
}
//打开文件夹
function openFolder(targetFolder){
//如果打开了就不用在创建了，这里后面需要限制一下最大个数
if(!targetFolder.subWindow){
targetFolder.subWindow = createWindow(targetFolder);
targetFolder.subWindow.bd.appendChild(createFolderTree(targetFolder));
fileWindow.appendChild(targetFolder.subWindow);
}
// windowStack.push(targetFolder.subWindow);
targetFolder.subWindow.style.left = 0;
return 0;
}
//创建新窗口
function createWindow(targetFolder){
var subWindow = document.createElement('div');
subWindow.className = 'subWindow';
var hd = document.createElement('div');
hd.className = 'title';
var title = document.createElement('h3');
title[textContent] = targetFolder.name;
var back = document.createElement('span');
back.className = 'back';
back.innerHTML = '返回';
back.wrapWindow = subWindow;
hd.appendChild(back);
hd.appendChild(title);
var bd = document.createElement('div');
subWindow.appendChild(hd);
subWindow.appendChild(bd);
subWindow.back = back;
subWindow.bd = bd;
return subWindow;
}
//显示文件结构
function createFolderTree(targetFolder){
var fileList = document.createElement('ul');
for(var i = 0; i < targetFolder.length; i++){
var li = document.createElement('li');
li.content = targetFolder.files[targetFolder.fileArray[i]];
li.className = targetFolder.files[targetFolder.fileArray[i]]['type'];
fileList.appendChild(li);
}
return fileList;
}
//打开文件
function openFile(targetFile){
contentWindow[textContent] = targetFile.fileContent || '空文件';
return 0;
}
</script>
</body>
</html>
大致是这个样子的，有些想法并不成熟，只是今天临时想到的，有什么问题，欢迎指出。
转载请注明来自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2011/12/09/2282942.html
