jquery实现模拟mac苹果系统桌面及文件系统效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现模拟mac苹果系统桌面及文件系统效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** CORE STYLES **/ *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html { font-size: 62.5%; font-family: "Consolas", monospace; } #desktop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("//repo.bfw.wiki/bfwrepo/image/5ef16bc8e6ab0.png"); background-size: cover; cursor: default; overflow: hidden; } /** BASE ELEMENT STYLES **/ input { position: relative; display: inline-block; vertical-align: top; width: 28px; height: 22px; font: normal 1.2rem "Consolas", monospace; color: #999999; background-color: #ffffff; border: none; border-radius: 3px; padding: 0 5px; box-shadow: 0 1px 1px rgba(40, 40, 40, 0.25); outline: none; } input:focus { color: #333333; } /** UTILITY CLASSES **/ .hidden { display: none; } .error { box-shadow: 0 0 2px 2px rgba(255, 95, 80, 0.4) !important; } .clearfix:after { content: ""; display: block; clear: both; } /** GENERIC WINDOW STYLES **/ .window { position: absolute; top: 100px; left: 100px; z-index: 1; width: 700px; height: 400px; border-top: 30px solid #eeeeee; border-radius: 3px; background-color: #ffffff; box-shadow: inset 0 1px 0 rgba(14, 14, 14, 0.3), 0 9px 20px 6px rgba(50, 50, 50, 0.5); } .window:before { content: attr(data-title); display: block; font-size: 1.4rem; line-height: 28px; text-align: center; color: #333333; margin-top: -28px; } .window header { position: absolute; top: -30px; left: 0; right: 0; height: 30px; padding-left: 10px; } .window .action { float: left; width: 14px; height: 14px; border-radius: 50%; background-color: #cdcdcd; margin: 8px 5px 0 0; cursor: pointer; } .window.focused .action.close { background-color: #ff5f50; } .window.focused .action.minimize { background-color: #fec107; } .window.focused .action.maximize { background-color: #16CF36; } .window main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; } /** CUSTOM WINDOW OVERRIDES **/ .finder header { height: 60px; } .finder .action-bar { width: calc(100% + 10px); height: 30px; font-size: 0; padding: 0 10px; margin: 30px 0 0 -10px; background-color: #eeeeee; box-shadow: 0 1px 0 rgba(14, 14, 14, 0.3); } .finder input[name="path"] { width: calc(100% - 324px); margin-left: 10px; } .finder input[name="search"] { width: 180px; margin: 0 10px; } .finder aside { position: absolute; top: 31px; left: 0; bottom: 0; width: 200px; background-color: #eeeeee; border-right: 1px solid #d2d0d5; border-bottom-left-radius: 3px; } .finder aside section { padding: 15px; } .finder aside section h1 { font-size: 1.2rem; line-height: 1; text-transform: uppercase; color: #888888; margin-bottom: 8px; } .finder aside section li { width: calc(100% + 30px); margin-left: -15px; list-style: none; font-size: 1.2rem; line-height: 1; color: #333333; cursor: pointer; padding: 4px 15px 2px 15px; } .finder aside section li:hover { color: #ffffff; background-color: #4f8edb; } .finder main { top: 30px; left: auto; width: calc(100% - 200px); } .finder main p { font-size: 1.2rem; text-align: center; color: #777777; margin-top: 15px; } .terminal { top: calc(100% - 400px); left: calc(100% - 600px); width: 500px; height: 300px; background-color: #222222; } .terminal main { margin: 7px; } .terminal .contents.overflow { position: absolute; left: 0; right: 0; bottom: 0; } .terminal p { font-size: 1.2rem; line-height: 1; color: #ffffff; word-break: break-all; } .terminal p.green { color: #16cf36; } .terminal p.yellow { color: #fec107; } .terminal p.red { color: #ff5f50; } .terminal .prompt { position: relative; } .terminal main span { position: absolute; font-size: 1.2rem; line-height: 1; color: #ffffff; } .terminal main span:after { content: " $"; } .terminal textarea { display: block; width: 100%; height: 12px; font: normal 1.2rem/1 "Consolas", monospace; text-indent: 26.5px; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; color: #ffffff; background: none; border: none; outline: none; resize: none; } .terminal textarea[data-capture-enter="false"] { text-indent: 0 !important; } .textedit { top: calc(100% - 350px); left: 250px; width: 400px; height: 300px; } .textedit main { padding: 5px; } .textedit textarea { display: block; width: 100%; height: 100%; font: normal 1.2rem/1 "Consolas", monospace; color: #222222; border: none; outline: none; resize: none; } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .alert { width: 300px; height: auto; z-index: 4; } .alert:before { content: ""; position: absolute; top: 40px; left: 10px; width: 50px; height: 50px; background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ab53f84ca3.png"); opacity: 0.25; } .alert main { position: static; display: block; padding: 20px 0 20px 70px; } .alert h4 { font-size: 1.3rem; text-transform: uppercase; color: #333333; margin-bottom: 3px; } .alert p { font-size: 1.2rem; color: #222222; } .filebrowser { width: 350px; height: 250px; z-index: 3; } .filebrowser ul { height: calc(100% - 32px); padding: 10px 0; overflow: auto; } .filebrowser .file-info { padding: 5px 10px; background-color: #eeeeee; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 -1px 0 rgba(14, 14, 14, 0.3); } .filebrowser label { float: left; font-size: 1.2rem; line-height: 2.2rem; color: #333333; margin-right: 5px; } .filebrowser input { float: left; width: 236px; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 1px; } .filebrowser .action-button { float: left; border-top-left-radius: 0; border-bottom-left-radius: 0; } /** COMPONENTS STYLES **/ .icon { display: inline-block; vertical-align: top; width: 75px; height: auto; font-size: 1.2rem; text-align: center; line-height: 1; white-space: pre-wrap; word-break: break-word; color: #222222; background: none; border-radius: 3px; margin: 5px; padding: 5px; cursor: pointer; } .icon:before { content: ""; display: block; width: 80%; padding: 40% 0; margin: 0 auto 5px auto; background: center center no-repeat; background-size: cover; box-sizing: content-box; } .icon.list { display: block; width: 100%; text-align: left; margin: 1px 0; border-radius: 0; padding: 4px 10px 2px 30px; position: relative; } .icon.list:nth-of-type(2n) { background-color: #eeeeee; } .icon.list:before { position: absolute; top: 2px; left: 10px; width: 14px; height: 14px; padding: 0; background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ab563e14e8.png"); opacity: 0.5; } .icon.highlighted { color: #ffffff !important; background-color: rgba(119, 170, 219, 1) !important; } .icon.launchpad:before { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5df872a0dab9f.png"); } .icon.terminal:before { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5f7ab69c66efd.png"); } .icon.textedit:before { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5f7ab6ba26918.png"); } .icon.documents:before { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5d835147aa4b2.png"); } .icon.sublimetext:before { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5d83505e72b9f.png"); } .icon textarea { display: block; width: 100%; height: 12px; font: normal 1.2rem/1 "Consolas", monospace; text-align: center; border: none; border-radius: 2px; padding: none; resize: none; outline: none; } .action-button { position: relative; display: inline-block; width: 28px; height: 22px; background-color: #ffffff; border-radius: 3px; box-shadow: 0 1px 1px rgba(40, 40, 40, 0.25); cursor: pointer; } .action-button:before { content: ""; position: absolute; width: 100%; height: 100%; background: transparent center center no-repeat; background-size: 80% auto; opacity: 0.5; } .action-button:active, .action-button.pressed { top: 1px; background-color: #fafafa; box-shadow: 0 0 1px rgba(40, 40, 40, 0.25); } .action-button.disabled { background-color: #f5f5f5; } .action-button.disabled:active { top: 0; box-shadow: 0 1px 1px rgba(40, 40, 40, 0.25); } .action-button[data-icon="back"]:before { background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ab7a3a8387.png"); } .action-button[data-icon="forward"]:before { background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ab7cfd3599.png"); } .action-button[data-icon="folder"]:before { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5d835147aa4b2.png"); background-size: 60% auto; } .action-button[data-icon="file"]:before { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5d83505e72b9f.png"); background-size: 60% auto; } .action-button[data-icon="check"]:before { background-image: url("//repo.bfw.wiki/bfwrepo/image/5f7ab8327fc85.png"); background-size: 60% auto; } .button-group { display: inline-block; font-size: 0; } .button-group .action-button { margin-right: 1px; border-radius: 0; } .button-group .action-button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .button-group .action-button:last-child { margin-right: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .contextmenu { position: absolute; z-index: 2; width: 100px; list-style: none; background-color: #ffffff; font-size: 1.2rem; color: #222222; border-radius: 2px; cursor: pointer; overflow: hidden; box-shadow: 0 4px 15px 3px rgba(50, 50, 50, 0.5); } .contextmenu li { padding: 5px 10px; } .contextmenu li:hover { color: #ffffff; background-color: #4f8edb; } </style> </head> <body translate="no" > <div id="desktop"> <div class="icon launchpad" data-application="finder">Finder</div> <div class="icon terminal" data-application="terminal">Terminal</div> <div class="icon textedit" data-application="textedit">TextEdit</div> <ul class="contextmenu hidden"> <li class="rename">Rename</li> </ul> </div> <template id="finder"> <section class="window finder" data-application="finder" data-title="Finder"> <header> <span class="action close"></span> <span class="action minimize"></span> <span class="action maximize"></span> <div class="action-bar"> <div class="button-group"> <span class="action-button back" data-icon="back"></span> <span class="action-button forward" data-icon="forward"></span> </div> <input type="text" name="path"> <input type="text" name="search" placeholder="Search"> <div class="button-group"> <span class="action-button folder" data-icon="folder"></span> <span class="action-button file" data-icon="file"></span> </div> </div> </header> <aside> <section> <h1>Favorites</h1> <ul class="favorites"> <li>Documents</li> <li>Pictures</li> <li>Music</li> <li>Videos</li> </ul> </section> </aside> <main></main> </section> </template> <template id="terminal"> <section class="window terminal" data-application="terminal" data-title="Terminal"> <header> <span class="action close"></span> <span class="action minimize"></span> <span class="action maximize"></span> </header> <main> <div class="contents"> <div class="prompt"> <span>/</span> <textarea class="autosize" data-capture-enter="true" spellcheck="off"></textarea> </div> </div> </main> </section> </template> <template id="textedit"> <section class="window textedit" data-application="textedit" data-title="TextEdit - Untitled"> <header> <span class="action close"></span> <span class="action minimize"></span> <span class="action maximize"></span> </header> <main> <textarea spellcheck="off"></textarea> </main> </section> </template> <template id="alert"> <section class="window alert focused"> <header> <span class="action close"></span> </header> <main> <h4>Error</h4> <p>The error message gets here.</p> </main> </section> </template> <template id="filebrowser"> <section class="window filebrowser" data-title=""> <header> <span class="action close"></span> </header> <main> <ul></ul> <div class="file-info clearfix"> <label>Filename:</label> <input type="text" name="filename"> <span class="action-button" data-icon="check"></span> </div> </main> </section> </template> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> (function(root, library) { if (typeof define === 'function' && define.amd) { define('generic-tree', [], library); } else { root.GenericTree = library(); } })(this, function() { function GenericTree() { this.root = null; this.insert = function(key, parent, properties) { if (key === undefined) { throw new Error('Missing argument: key'); } parent = parent instanceof Node ? [parent] : this.search(parent); var node = new Node(key, properties); if (parent === null && !this.root) { this.root = node; } else if (parent === null && !!this.root) { throw new Error('GenericTree already has a root. Please specify the node\'s parent.'); } else if (!parent.length) { throw new Error('Parent node not found.'); } else { parent[0].insert(node); } return node; }; this.delete = function(node) { if (node === undefined) { throw new Error('Missing argument: key'); } var targets = node instanceof Node ? [node] : this.search(node); if (targets === null || !targets.length) { throw new Error('Target node not found.'); } for (var i = 0; i < targets.length; i++) { var target = targets[i]; if (target === this.root) { this.root = null; } else { target.parent.delete(target); } } }; this.search = function(key) { return key !== undefined && this.root ? this.root.search(key) : null; }; this.traverse = function() { if (this.root !== null) { var queue = [this.root]; var levels = []; var level = []; for (var i = 1, j = 0; queue.length;) { var pointer = queue.shift(); level.push(pointer); j += pointer.children.length; if (!--i) { i = j; j = 0; levels.push(level); level = []; } queue = queue.concat(pointer.children); } return levels; } return []; }; } function Node(key, properties) { this.key = key; this.parent = null; this.children = []; properties = properties && typeof properties === 'object' ? properties : {}; for (var i in properties) { this[i] = properties[i]; } this.insert = function(child) { this.children.push(child); child.parent = this; }; this.delete = function(child) { this.children.splice(this.children.indexOf(child), 1); }; this.search = function(key) { var results = this.key.match('^' + key.replace(/\./g, '\\.').replace(/\*/g, '\.\*') + '$') ? [this] : []; for (var i in this.children) { results = results.concat(this.children[i].search(key)); } return results; }; this.find = function(key) { var results = []; for (var i in this.children) { if (this.children[i].key.match('^' + key.replace(/\./g, '\\.').replace(/\*/g, '\.\*') + '$')) { results.push(this.children[i]); } } return results; }; } return GenericTree; }); (function(root, library) { if (typeof define === 'function' && define.amd) { define('virtual-filesystem', ['generic-tree'], library); } else { root.VirtualFileSystem = library(root.GenericTree); } })(this, function(GenericTree) { function VirtualFileSystem() { this.tree = new GenericTree(); this.tree.insert('', null, { type: 'directory' }); this.pointer = this.tree.root; this.mkdir = function(path) { if (path === undefined) { throw new Error('Missing argument: path'); } var segments = path.replace(/\/+$/g, '').split('/'); var parent = this._resolve_path(segments.slice(0, segments.length - 1).join('/')); var name = segments[segments.length - 1]; if (parent.find(name).length) { throw new Error('Name already taken: ' + name); } this.tree.insert(name, parent, { type: 'directory' }); }; this.rmdir = function(path) { if (path === undefined) { throw new Error('Missing argument: path'); } var node = this._resolve_path(path.replace(/\/+$/g, '')); if (node === this.tree.root) { throw new Error('You cannot delete the root directory.'); } else if (node.type !== 'directory') { throw new Error('Not a directory: ' + node.key); } this.tree.delete(node); var current_path = this._absolute_path(this.pointer); var node_path = this._absolute_path(node); if (node_path.match('^' + current_path) && current_path.length) { this.pointer = node.parent; } }; this.cd = function(path) { if (path === undefined) { throw new Error('Missing argument: path'); } this.pointer = this._resolve_path(path); return this.pointer; }; this.cat = function(mode, path, contents) { if (path === undefined) { throw new Error('Missing argument: path'); } var segments = path.replace(/\/+$/g, '').split('/'); var parent = this._resolve_path(segments.slice(0, segments.length - 1).join('/')); var name = segments[segments.length - 1]; var node = parent.find(name)[0]; if (node && node.type !== 'file') { throw new Error('Not a file: ' + path); } else if (mode.length) { if (node === undefined) { node = this.tree.insert(name, parent, { type: 'file', contents: '' }); } node.contents = mode === '>' ? contents : node.contents + contents; } else { if (node === undefined) { throw new Error('File not found: ' + path); } return node.contents; } }; this.rm = function(path) { if (path === undefined) { throw new Error('Missing argument: path'); } var node = this._resolve_path(path.replace(/\/+$/g, '')); if (node.type !== 'file') { throw new Error('Not a file: ' + node.key); } this.tree.delete(node); }; this.rn = function(path, name) { if (path === undefined) { throw new Error('Missing argument: path'); } else if (name === undefined) { throw new Error('Missing argument: name'); } var node = this._resolve_path(path); if (node === this.tree.root) { throw new Error('You cannot rename the root directory.'); } var search = node.parent.find(name)[0]; if (search && search.type === node.type) { throw new Error('Rename failed. Name already taken.'); } node.key = name; }; this.cp = function(target, destination) { if (target === undefined) { throw new Error('Missing argument: target'); } else if (destination === undefined) { throw new Error('Missing argument: destination'); } target = typeof target === 'object' ? target : this._resolve_path(target); destination = typeof destination === 'object' ? destination : this._resolve_path(destination); var properties = { type: target.type }; if (properties.type === 'file') { properties.contents = target.contents; } var node = this.tree.insert(target.key, destination, properties); for (var i = 0; i < target.children.length; i++) { this.cp(target.children[i], node); } return node; }; this.mv = function(target, destination) { if (target === undefined) { throw new Error('Missing argument: target'); } else if (destination === undefined) { throw new Error('Missing argument: destination'); } target = typeof target === 'object' ? target : this._resolve_path(target); destination = typeof destination === 'object' ? destination : this._resolve_path(destination); this.tree.delete(target); return this.cp.call(this, target, destination); }; this.ls = function(path) { var node = path === undefined ? this.pointer : this._resolve_path(path); if (node.type === 'directory') { return node.children; } throw new Error('Not a directory: ' + path); }; this.whereis = function(query) { if (query === undefined) { throw new Error('Missing argument: query'); } return this.tree.search(query); }; this._resolve_path = function(path) { path = path.match('^\/') ? path : './' + path; path = path.split('/'); var parent = path[0].length ? this.pointer : this.tree.root; for (var i = !path[0].length ? 1 : 0; i < path.length; i++) { if (path[i] === '..') { if (parent === this.tree.root) { throw new Error('No more directories beyond root directory.'); } parent = parent.parent; } else if (path[i] !== '.' && path[i].length) { parent = parent.find(path[i])[0]; if (parent === undefined) { throw new Error('Path not found: ' + path.slice(0, i + 1).join('/')); } } } return parent; }; this._absolute_path = function(node) { var path = []; while (node !== null) { path.unshift(node.key); node = node.parent; } return path.join('/'); }; } return VirtualFileSystem; }); $(document).ready(function() { filesystem.initialize(); components.initialize(); windows.initialize(); system.initialize(); }); var filesystem = { instance: new VirtualFileSystem(), initialize: function() { filesystem.instance.mkdir('Documents'); filesystem.instance.mkdir('Pictures'); filesystem.instance.mkdir('Music'); filesystem.instance.mkdir('Videos'); filesystem.instance.mkdir('Documents/Academics'); filesystem.instance.mkdir('Documents/Projects'); filesystem.instance.mkdir('Documents/Work'); filesystem.instance.mkdir('Documents/Codes'); filesystem.instance.mkdir('Documents/Academics/cmsc142'); filesystem.instance.mkdir('Documents/Academics/cmsc141'); filesystem.instance.mkdir('Documents/Academics/sts40'); filesystem.instance.mkdir('Documents/Academics/cmsc198.1'); filesystem.instance.mkdir('Documents/Codes/Javascript'); filesystem.instance.mkdir('Documents/Codes/Python'); filesystem.instance.mkdir('Documents/Codes/Ruby'); filesystem.instance.cat('>', 'Documents/Academics/cmsc142/mp1.c', 'hello world'); filesystem.instance.cat('>', 'Documents/Academics/cmsc142/mp2.c', 'hello world again'); filesystem.instance.cat('>', 'Documents/Codes/Javascript/sample.js', 'this is a sample javascript file'); filesystem.instance.cat('>', 'Documents/Codes/Javascript/script.js', 'this is another sample javascript file'); filesystem.instance.cat('>', 'Documents/Codes/Python/sample.py', 'this is a sample python file'); filesystem.instance.cat('>', 'Documents/Codes/Ruby/sample.rb', 'this is a sample ruby file'); Window.favorites = ['/Documents', '/Pictures', '/Music', 'Videos']; }, resolve_path: function(path) { return path === undefined ? filesystem.instance.tree.root : filesystem.instance._resolve_path(path); }, absolute_path: function(path) { return this.instance._absolute_path(path); } }; var components = { initialize: function() { components.icons(); components.textareas(); components.huds(); }, icons: function() { windows.desktop.on('mousedown', '.icon', function(e) { if (e.ctrlKey) { $(this).toggleClass('highlighted'); } else { $('.icon').removeClass('highlighted'); $(this).addClass('highlighted'); } var target = $(this).closest('.window'); if (target.length) { windows.focus(windows.instance(target)); } }); windows.desktop.on('dblclick', '.icon[data-application]', function(e) { $(this).removeClass('highlighted'); windows.spawn($(this).data('application')); }); windows.desktop.on('dblclick', '.window .icon', function(e) { $(this).removeClass('highlighted'); var target = windows.instance($(this).closest('.window')); target.icons_handler(e); }); windows.desktop.on('mousedown', function(e) { if (!$(e.target).hasClass('icon')) { $('.icon').removeClass('highlighted'); } if (!$(e.target).closest('.contextmenu').length) { $('.contextmenu').addClass('hidden'); } }); }, textareas: function() { windows.desktop.on('keydown', 'textarea', function(e) { var target = windows.instance($(this).closest('.window')); if (e.keyCode === 9) { e.preventDefault(); } else if (e.keyCode === 13 && $(this).attr('data-capture-enter') === 'true') { e.preventDefault(); target.textarea_handler(e); } else if (e.ctrlKey && (e.keyCode === 76 || e.keyCode === 68 || e.keyCode === 83)) { e.preventDefault(); target.keyboard_handler(e); } else if (e.keyCode === 27) { target.keyboard_handler(e); } else if ($(thi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0