zoukankan html css js c++ java

模拟文件夹

本来是要做一个命令行的，这个算是铺垫。

规定一个文件的表示形式：

            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

查看全文

相关阅读:
97. Interleaving String
96. Unique Binary Search Trees
95. Unique Binary Search Trees II
94. Binary Tree Inorder Traversal
odoo many2many字段指定打开的form视图
 docker sentry 配置文件位置
 postgres 计算时差
 postgres 字符操作补位,字符切割
 postgres判断字符串是否为时间,数字
 odoo fields_view_get

原文地址：https://www.cnblogs.com/xesam/p/2282942.html