muzi
/
macUI
mirror of https://github.com/1099438829/macUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增文件夹分类支持多级分类 

修复图标渲染超过边界的问题
This commit is contained in:
1099438829@qq.com 2019-03-03 00:42:12 +08:00
parent 44c3231dc8
commit 343e66dbe4
4 changed files with 54 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
demo.html
View File

@ -12,6 +12,8 @@
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="./css/macdefault.css" rel="stylesheet"> <link href="./css/macdefault.css" rel="stylesheet">
<script type="text/javascript" src="./js/mac.js"></script> <script type="text/javascript" src="./js/mac.js"></script>
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
<style> <style>
* { * {
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
@ -96,6 +98,31 @@
<div class="shortcut win10-open-window flipInX animated" data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;"> <div class="shortcut win10-open-window flipInX animated" data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;">
<i class="icon fa fa-fw fa-picture-o blue"></i> <i class="icon fa fa-fw fa-picture-o blue"></i>
<div class="title">切换壁纸</div> <div class="title">切换壁纸</div>
</div>
<div class="shortcut win10-drawer">
<img class="icon" src="./img/icon/folder.png"/><!--
<i class="icon fa fa-fw fa-folder" style="color: blue;font-size: 50px;"></i> -->
<div class="title">新建文件夹</div>
<div class="win10-drawer-box">
<div class="shortcut-drawer win10-drawer">
<img class="icon" src="./img/icon/folder.png"/>
<div class="title">新建文件夹</div>
<div class="win10-drawer-box">
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div>
</div>
</div>
</div>
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div>
</div>
<div class="shortcut-drawer">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项2</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

BIN
img/icon/file.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

26
index.html
View File

@ -12,6 +12,8 @@
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="./css/macdefault.css" rel="stylesheet"> <link href="./css/macdefault.css" rel="stylesheet">
<script type="text/javascript" src="./js/mac.js"></script> <script type="text/javascript" src="./js/mac.js"></script>
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
<style> <style>
* { * {
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
@ -74,6 +76,30 @@
<img class="icon" src="./img/icon/demo.png"/> <img class="icon" src="./img/icon/demo.png"/>
<div class="title">查看DEMO</div> <div class="title">查看DEMO</div>
</div> </div>
<div class="shortcut win10-drawer">
<img class="icon" src="./img/icon/folder.png"/>
<div class="title">新建文件夹</div>
<div class="win10-drawer-box">
<div class="shortcut-drawer win10-drawer">
<img class="icon" src="./img/icon/folder.png"/>
<div class="title">三级菜单</div>
<div class="win10-drawer-box">
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div>
</div>
</div>
</div>
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div>
</div>
<div class="shortcut-drawer">
<i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项2</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div id="win10-menu" class="hidden"> <div id="win10-menu" class="hidden">

2
js/mac.js
View File

@ -643,7 +643,7 @@ window.Win10 = {
$("#win10-msg-nof").removeClass('on-new-msg fa-commenting-o'); $("#win10-msg-nof").removeClass('on-new-msg fa-commenting-o');
}, },
renderShortcuts:function () { renderShortcuts:function () {
var h=parseInt(($("#win10 #win10-shortcuts")[0].offsetHeight-60)/100); var h=parseInt(($("#win10 #win10-shortcuts")[0].offsetHeight-90)/100);
var x=0,y=0; var x=0,y=0;
$("#win10 #win10-shortcuts .shortcut").each(function () { $("#win10 #win10-shortcuts .shortcut").each(function () {
$(this).css({ $(this).css({