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:
昱墨 2022-08-03 21:03:42 +08:00
parent 705391034b
commit 8d42923198
25 changed files with 1622 additions and 627 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
README.md
View File

@ -10,7 +10,7 @@ v1.1.2.5
> 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。 > 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。
> 更新方式：基本无须修改html文件，覆盖css和win10.js文件。 > 更新方式：基本无须修改html文件，覆盖css和win10.js文件。
> 关于html文件的修改，只是添加一行代码。在#win10>.desktop div下，添加一个div `<div id="win10-desktop-scene"></div>`到末尾。 > 关于html文件的修改，只是添加一行代码。在#mac>.desktop div下，添加一个div `<div id="mac-desktop-scene"></div>`到末尾。
> 对于实在不想修改html的用户，我们在js中添加了自动修正的代码，所以不修改也会有正常的效果。但是这种修正代码将会在未来版本被取消，只作为临时使用。 > 对于实在不想修改html的用户，我们在js中添加了自动修正的代码，所以不修改也会有正常的效果。但是这种修正代码将会在未来版本被取消，只作为临时使用。
## 预览 ## 预览
@ -42,7 +42,7 @@ v1.1.2.5
#### 如何自定义桌面图标？ #### 如何自定义桌面图标？
```html ```html
<div id="win10-shortcuts"> <div id="mac-shortcuts">
<div class="shortcut" onclick="//do something..."> <div class="shortcut" onclick="//do something...">
<img src="图片地址" class="icon" /> <img src="图片地址" class="icon" />
<div class="title">图标底部文字</div> <div class="title">图标底部文字</div>
@ -58,7 +58,7 @@ v1.1.2.5
#### 如何自定义开始菜单列表? #### 如何自定义开始菜单列表?
```html ```html
<div class="list win10-menu-hidden animated animated-slideOutLeft"> <div class="list mac-menu-hidden animated animated-slideOutLeft">
<div class="item">一级菜单</div> <div class="item">一级菜单</div>
<div class="item">一级菜单</div> <div class="item">一级菜单</div>
<div class="sub-item">二级菜单</div> <div class="sub-item">二级菜单</div>
@ -72,19 +72,19 @@ v1.1.2.5
## API ## API
* 调用：Win10-ui的api应当在其初始化之后被调用 * 调用：Macui-ui的api应当在其初始化之后被调用
```html ```html
<script> <script>
Win10.onReady(function () { Macui.onReady(function () {
//Win10-ui初始化完成后将执行此处代码 //Macui-ui初始化完成后将执行此处代码
}); });
</script> </script>
``` ```
> 所有方法都需要加``Win10.``前缀。 > 所有方法都需要加``Macui.``前缀。
* setBgUrl(bgs) 设置背景图片 ``Win10.setBgUrl({main:'宽屏壁纸url',mobile:'竖屏壁纸url',})`` * setBgUrl(bgs) 设置背景图片 ``Macui.setBgUrl({main:'宽屏壁纸url',mobile:'竖屏壁纸url',})``
* openUrl(url,title,areaAndOffset) ** 打开一个子窗口,参数列表：url,标题，[尺寸，区域]\(同layer的area和offset的设置格式，也可以传入'max'强制最大化，例如``[['30%','30%'],['50px','50px']]``\) * openUrl(url,title,areaAndOffset) ** 打开一个子窗口,参数列表：url,标题，[尺寸，区域]\(同layer的area和offset的设置格式，也可以传入'max'强制最大化，例如``[['30%','30%'],['50px','50px']]``\)
* onReady(handle) win10-ui初始化完毕后的回调 * onReady(handle) mac-ui初始化完毕后的回调
* menuOpen() 开始菜单打开 * menuOpen() 开始菜单打开
* menuClose() 开始菜单关闭 * menuClose() 开始菜单关闭
* menuToggle() 开始菜单打开/关闭 * menuToggle() 开始菜单打开/关闭
@ -111,7 +111,7 @@ v1.1.2.5
#### 设计思路 #### 设计思路
* Win10-UI应当作为你网站模块的主入口，而具体功能页面适合用子窗口的形式打开。子窗口是以iframe实现的，减少了js、css冲突，保证了独立性。同时父子页之间也可以通过Win10_child.js的API进行沟通 * Macui-UI应当作为你网站模块的主入口，而具体功能页面适合用子窗口的形式打开。子窗口是以iframe实现的，减少了js、css冲突，保证了独立性。同时父子页之间也可以通过Macui_child.js的API进行沟通
* 桌面图标适用于最常用的操作，菜单适用于构建所有操作的清单（这里的操作不限于打开子窗口） * 桌面图标适用于最常用的操作，菜单适用于构建所有操作的清单（这里的操作不限于打开子窗口）
* 小磁贴视觉冲击力强，除了可以做出醒目的按钮，也可以用作信息展板，甚至于在磁贴的方块空间内构建复杂的应用（如音乐播放器） * 小磁贴视觉冲击力强，除了可以做出醒目的按钮，也可以用作信息展板，甚至于在磁贴的方块空间内构建复杂的应用（如音乐播放器）
@ -120,8 +120,8 @@ v1.1.2.5
本着极简的设计风格，所有图标相关的辅助类都设置为'icon' 本着极简的设计风格，所有图标相关的辅助类都设置为'icon'
```html ```html
<div class="shortcut"> <div class="shortcut">
<img class="icon" src="./img/icon/win10.png"/> <img class="icon" src="./img/icon/mac.png"/>
<div class="title">Win10-UI官网</div> <div class="title">Macui-UI官网</div>
</div> </div>
``` ```
>在桌面图标中，设置img.icon声明该图片是一个图标 >在桌面图标中，设置img.icon声明该图片是一个图标
@ -129,14 +129,14 @@ v1.1.2.5
```html ```html
<div class="shortcut"> <div class="shortcut">
<i class="fa fa-camera-retro icon"></i> <i class="fa fa-camera-retro icon"></i>
<div class="title">Win10-UI官网</div> <div class="title">Macui-UI官网</div>
</div> </div>
``` ```
>在桌面图标中，用.icon声明一个字体图标（以font awesome为例） >在桌面图标中，用.icon声明一个字体图标（以font awesome为例）
```html ```html
Win10.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/win10.png\"/>Win10-UI官网"); Macui.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/mac.png\"/>Macui-UI官网");
Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标"); Macui.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");
``` ```
>没错！你也可以在openUrl函数的title参数中插入图片图标或者字体图标！ >没错！你也可以在openUrl函数的title参数中插入图片图标或者字体图标！
@ -171,7 +171,7 @@ Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></
#### 父子页沟通 #### 父子页沟通
* 要使用子页工具集，请先引入win10.child.js * 要使用子页工具集，请先引入win10.child.js
* 自由的使用Win10_child对象吧，目前包含close、newMsg、openUrl函数；也可以使用Win10_parent对象，将指向父页的Win10对象。 * 自由的使用Macui_child对象吧，目前包含close、newMsg、openUrl函数；也可以使用Macui_parent对象，将指向父页的Macui对象。
* 父页打开子窗口的函数openUrl会返回索引index，使用getLayeroByIndex(index)获得子窗口对象,然后就可以方便的控制子窗口的行为了。 * 父页打开子窗口的函数openUrl会返回索引index，使用getLayeroByIndex(index)获得子窗口对象,然后就可以方便的控制子窗口的行为了。
#### 颜色预定义 #### 颜色预定义
@ -189,35 +189,35 @@ Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></
#### 右键菜单配置 #### 右键菜单配置
Win10.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。 Macui.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。
其中jq_dom是jq对象或选择器字符串,menu是菜单配置项(true表示禁用默认菜单,null表示恢复默认菜单,[数组]表示自定义菜单) 其中jq_dom是jq对象或选择器字符串,menu是菜单配置项(true表示禁用默认菜单,null表示恢复默认菜单,[数组]表示自定义菜单)
~~~js ~~~js
//典型用法(桌面菜单) //典型用法(桌面菜单)
Win10.setContextMenu('#win10>.desktop',[ Macui.setContextMenu('#mac>.desktop',[
'菜单标题', //单字符串，不带回调 '菜单标题', //单字符串，不带回调
['进入全屏',function () {Win10.enableFullScreen()}], //菜单项+点击回调 ['进入全屏',function () {Macui.enableFullScreen()}], //菜单项+点击回调
['退出全屏',function () {Win10.disableFullScreen()}], ['退出全屏',function () {Macui.disableFullScreen()}],
'|', //分隔符 '|', //分隔符
['关于',function () {Win10.aboutUs()}], ['关于',function () {Macui.aboutUs()}],
]); ]);
//设置menu为true会起到禁用系统默认菜单的作用 //设置menu为true会起到禁用系统默认菜单的作用
Win10.setContextMenu('#win10',true); Macui.setContextMenu('#mac',true);
~~~ ~~~
> 点击回调函数可以声明一个参数e,将传入点击事件的对象。特别的，e.data是触发右键菜单的对象。 > 点击回调函数可以声明一个参数e,将传入点击事件的对象。特别的，e.data是触发右键菜单的对象。
#### 桌面舞台 #### 桌面舞台
为了让广大开发者能更自由的定义自己的桌面，Win10-UI自v1.1.2.3版本起加入桌面舞台。 为了让广大开发者能更自由的定义自己的桌面，Macui-UI自v1.1.2.3版本起加入桌面舞台。
桌面舞台是一个`id`为`win10-desktop-scene`的div，位于`#win10>.desktop`下。桌面舞台预定义了css，使其浮动于桌面图标的下方。 桌面舞台是一个`id`为`mac-desktop-scene`的div，位于`#mac>.desktop`下。桌面舞台预定义了css，使其浮动于桌面图标的下方。
借助此特性，你甚至可以发挥想象力，制作出动态壁纸。 借助此特性，你甚至可以发挥想象力，制作出动态壁纸。
> 使用`getDesktopScene`函数可以快捷获取桌面舞台的jq对象。 > 使用`getDesktopScene`函数可以快捷获取桌面舞台的jq对象。
> v1.1.2.3之前的版本，如果想要临时体验桌面舞台的支持特性，可以去官方群下载补丁`win10_desktop_scene_support.js`。 > v1.1.2.3之前的版本，如果想要临时体验桌面舞台的支持特性，可以去官方群下载补丁`#mac_desktop_scene_support.js`。
#### 子窗口事件自动绑定 #### 子窗口事件自动绑定
所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定 所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定
> v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件`win10_bind_open_windows.js`。 > v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件`#mac_bind_open_windows.js`。
* 标签属性说明 * 标签属性说明
* data-title:窗口标题 * data-title:窗口标题
@ -230,7 +230,7 @@ Win10.setContextMenu('#win10',true);
* 特别的，如果子节点有icon和title的css类，可以自动识别为图标和标题，无须设置data-title和data-icon-image(font) * 特别的，如果子节点有icon和title的css类，可以自动识别为图标和标题，无须设置data-title和data-icon-image(font)
~~~html ~~~html
<div class="shortcut win10-open-window" <div class="shortcut mac-open-window"
data-url="http://www.baidu.com" data-url="http://www.baidu.com"
data-title="我是百度" data-title="我是百度"
data-icon-image="https://www.baidu.com/img/bd_logo1.png" data-icon-image="https://www.baidu.com/img/bd_logo1.png"
@ -244,7 +244,7 @@ Win10.setContextMenu('#win10',true);
> 这是所有可选项都用上的完整写法。 > 这是所有可选项都用上的完整写法。
~~~html ~~~html
<div class="shortcut win10-open-window" data-url="www.baidu.com" > <div class="shortcut mac-open-window" data-url="www.baidu.com" >
<i class="icon fa fa-fw fa-user-circle blue" ></i> <i class="icon fa fa-fw fa-user-circle blue" ></i>
<div class="title">百度</div> <div class="title">百度</div>
</div> </div>

2
broadcast.html
View File

@ -12,7 +12,7 @@
<style> <style>
* { * {
color: gray; color: gray;
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu,sans-serif
} }
.title { .title {

8
child.html
View File

@ -31,16 +31,16 @@
<div class="btn" onclick="f3()">关闭子页</div> <div class="btn" onclick="f3()">关闭子页</div>
</body> </body>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="./js/win10.child.min.js"></script> <script src="./js/mac.child.min.js"></script>
<script> <script>
function f1() { function f1() {
Win10_child.newMsg('子页的问候', '这是从iframe页调用APi发送的消息哦'); Macui_child.newMsg('子页的问候', '这是从iframe页调用APi发送的消息哦');
} }
function f2() { function f2() {
Win10_child.openUrl('http://win10ui.yuri2.cn', '<img class=\'icon\' src=\'./img/icon/win10.png\'/>', 'Win10-UI官网') Macui_child.openUrl('http://win10ui.yuri2.cn', '<img class=\'icon\' src=\'./img/icon/mac.png\'/>', 'Macui-UI官网')
} }
function f3() { function f3() {
Win10_child.close(); Macui_child.close();
} }
</script> </script>
</html> </html>

915
component/layer/theme/default/layer.css
View File

File diff suppressed because one or more lines are too long

BIN
component/layer/theme/mac/icon-ext.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
component/layer/theme/mac/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

1
component/layer/theme/mac/layer.css Normal file
View File

File diff suppressed because one or more lines are too long

BIN
component/layer/theme/mac/loading-0.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
component/layer/theme/mac/loading-1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 701 B

BIN
component/layer/theme/mac/loading-2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

384
css/index.css
View File

File diff suppressed because it is too large Load Diff

2
css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

94
demo.html
View File

@ -16,40 +16,40 @@
</head> </head>
<body> <body>
<div id="win10"> <div id="mac">
<div id="win10_task_bar" class="backgroud_blur"> <div id="mac_task_bar" class="backgroud_blur">
<div id="win10_btn_group_left" class="btn_group"> <div id="mac_btn_group_left" class="btn_group">
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div> <div id="mac_btn_win" class="btn"><span class="fa fa-apple"></span></div>
</div> </div>
<div id="win10_btn_group_middle" class="btn_group"></div> <div id="mac_btn_group_middle" class="btn_group"></div>
<div id="win10_btn_group_right" class="btn_group"> <div id="mac_btn_group_right" class="btn_group">
<div class="btn" id="win10_btn_time"></div> <div class="btn" id="mac_btn_time"></div>
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div> <div class="btn" id="mac_btn_command"><span id="mac-msg-nof" class="fa fa-list-ul"></span></div>
<div class="btn" id="win10_btn_show_desktop"></div> <div class="btn" id="mac_btn_show_desktop"></div>
</div> </div>
</div> </div>
<div class="desktop"> <div class="desktop">
<div id="win10-shortcuts" class="shortcuts-hidden"> <div id="mac-shortcuts" class="shortcuts-hidden">
<div class="shortcut" <div class="shortcut"
onclick="Win10.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')"> onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
<img class="icon" src="./img/icon/computer.png" /> <img class="icon" src="./img/icon/computer.png" />
<div class="title">OS官网</div> <div class="title">OS官网</div>
</div> </div>
<div class="shortcut" <div class="shortcut"
onclick="Win10.openUrl('./app/todo','<img class=\'icon\' src=\'./img/icon/notes.png\'/>','note')"> onclick="Macui.openUrl('./app/todo','<img class=\'icon\' src=\'./img/icon/notes.png\'/>','note')">
<img class="icon" src="./img/icon/notes.png" /> <img class="icon" src="./img/icon/notes.png" />
<div class="title">Note</div> <div class="title">Note</div>
</div> </div>
<div class="shortcut" <div class="shortcut"
onclick="Win10.openUrl('https://developer.apple.com/game-center','<img class=\'icon\' src=\'./img/icon/gamecenter.png\'/>','GameCenter')"> onclick="Macui.openUrl('https://developer.apple.com/game-center','<img class=\'icon\' src=\'./img/icon/gamecenter.png\'/>','GameCenter')">
<img class="icon" src="./img/icon/gamecenter.png" /> <img class="icon" src="./img/icon/gamecenter.png" />
<div class="title">GameCenter</div> <div class="title">GameCenter</div>
</div> </div>
<div class="shortcut" onclick="Win10.openUrl('./app/calendar','<img class=\'icon\' src=\'./img/icon/calendar.png\'/>','Calendar',[['910px','675px'],'auto'])"> <div class="shortcut" onclick="Macui.openUrl('./app/calendar','<img class=\'icon\' src=\'./img/icon/calendar.png\'/>','Calendar',[['910px','675px'],'auto'])">
<img class="icon" src="./img/icon/calendar.png" /> <img class="icon" src="./img/icon/calendar.png" />
<div class="title">Calendar</div> <div class="title">Calendar</div>
</div> </div>
<div class="shortcut" onclick="Win10.openUrl('./app/calculator','<img class=\'icon\' src=\'./img/icon/calculator.png\'/>','Calculator',[['387px','613px'],'auto'])"> <div class="shortcut" onclick="Macui.openUrl('./app/calculator','<img class=\'icon\' src=\'./img/icon/calculator.png\'/>','Calculator',[['387px','613px'],'auto'])">
<img class="icon" src="./img/icon/calculator.png" /> <img class="icon" src="./img/icon/calculator.png" />
<div class="title">Calculator</div> <div class="title">Calculator</div>
</div> </div>
@ -58,12 +58,12 @@
<div class="title">iCloud</div> <div class="title">iCloud</div>
</div> </div>
<div class="shortcut" <div class="shortcut"
onclick="Win10.openUrl('https://map.baidu.com','<img class=\'icon\' src=\'./img/icon/maps.png\'/>','Map')"> onclick="Macui.openUrl('https://map.baidu.com','<img class=\'icon\' src=\'./img/icon/maps.png\'/>','Map')">
<img class="icon" src="./img/icon/maps.png" /> <img class="icon" src="./img/icon/maps.png" />
<div class="title">地图</div> <div class="title">地图</div>
</div> </div>
<div class="shortcut" <div class="shortcut"
onclick="window.open('https://github.com/yuri2peter/win10-ui/archive/master.zip')"> onclick="window.open('https://github.com/yuri2peter/mac-ui/archive/master.zip')">
<img class="icon" src="./img/icon/prefapp.png" /> <img class="icon" src="./img/icon/prefapp.png" />
<div class="title">设置</div> <div class="title">设置</div>
</div> </div>
@ -72,26 +72,26 @@
<i class="fa fa-user icon black-green"></i> <i class="fa fa-user icon black-green"></i>
<div class="title">登录页</div> <div class="title">登录页</div>
</div> </div>
<div class="shortcut win10-open-window flipInX animated" <div class="shortcut mac-open-window flipInX animated"
data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;"> data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;">
<img class="icon" src="./img/icon/DesktopScreenEffectsPref.png" /> <img class="icon" src="./img/icon/DesktopScreenEffectsPref.png" />
<div class="title">切换壁纸</div> <div class="title">切换壁纸</div>
</div> </div>
<div class="shortcut win10-drawer"> <div class="shortcut mac-drawer">
<img class="icon" src="./img/icon/folder.png" /> <img class="icon" src="./img/icon/folder.png" />
<div class="title">新建文件夹</div> <div class="title">新建文件夹</div>
<div class="win10-drawer-box"> <div class="mac-drawer-box">
<div class="shortcut-drawer win10-drawer"> <div class="shortcut-drawer mac-drawer">
<img class="icon" src="./img/icon/folder.png" /> <img class="icon" src="./img/icon/folder.png" />
<div class="title">新建文件夹</div> <div class="title">新建文件夹</div>
<div class="win10-drawer-box"> <div class="mac-drawer-box">
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com"> <div class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i> <i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div> <div class="title">子项1</div>
</div> </div>
</div> </div>
</div> </div>
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com"> <div class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i> <i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div> <div class="title">子项1</div>
</div> </div>
@ -105,41 +105,41 @@
<div class="background blur"></div> <div class="background blur"></div>
</div> </div>
<div id="win10-menu" class="hidden backgroud_blur"> <div id="mac-menu" class="hidden backgroud_blur">
<div class="list win10-menu-hidden animated animated-slideOutLeft"> <div class="list mac-menu-hidden animated animated-slideOutLeft">
<div class="item"><i class="icon fa fa-wrench fa-fw"></i><span>API测试</span></div> <div class="item"><i class="icon fa fa-wrench fa-fw"></i><span>API测试</span></div>
<div class="sub-item" onclick="Win10.openUrl('./child.html','子页')">父子页沟通</div> <div class="sub-item" onclick="Macui.openUrl('./child.html','子页')">父子页沟通</div>
<div class="sub-item" onclick="Win10.commandCenterOpen()">打开消息中心</div> <div class="sub-item" onclick="Macui.commandCenterOpen()">打开消息中心</div>
<div class="sub-item" <div class="sub-item"
onclick="Win10.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})"> onclick="Macui.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})">
发送带回调的消息</div> 发送带回调的消息</div>
<div class="sub-item" onclick="Win10.menuClose()">关闭菜单</div> <div class="sub-item" onclick="Macui.menuClose()">关闭菜单</div>
<div class="item"><i class="icon fa fa-gavel fa-fw"></i>辅助工具</div> <div class="item"><i class="icon fa fa-gavel fa-fw"></i>辅助工具</div>
<div class="sub-item" <div class="sub-item"
onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-shortcut.html','图标代码生成器')">桌面图标代码生成器 onclick="Macui.openUrl('win10ui.yuri2.cn/src/tools/builder-shortcut.html','图标代码生成器')">桌面图标代码生成器
</div> </div>
<div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','磁贴代码生成器')"> <div class="sub-item" onclick="Macui.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','磁贴代码生成器')">
磁贴代码生成器</div> 磁贴代码生成器</div>
<div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','菜单代码生成器')"> <div class="sub-item" onclick="Macui.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','菜单代码生成器')">
菜单代码生成器</div> 菜单代码生成器</div>
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div> <div class="item" onclick="Macui.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div> <div class="item" onclick=" Macui.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
</div> </div>
</div> </div>
<div id="win10_command_center" class="hidden_right backgroud_blur"> <div id="mac_command_center" class="hidden_right backgroud_blur">
<div class="command-header"> <div class="command-header">
<div class="tab-today active">今天</div> <div class="tab-today active">今天</div>
<div class="tab-msg">通知</div> <div class="tab-msg">通知</div>
</div> </div>
<div class="command-body today"></div> <div class="command-body today"></div>
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> --> <!-- <span id="mac_btn_command_center_clean_all">全部清除</span> -->
<div class="command-body msgs"></div> <div class="command-body msgs"></div>
</div> </div>
<!--bottom dock --> <!--bottom dock -->
<div class="dock" id="dock"> <div class="dock" id="dock">
<div class="dock-container backgroud_blur"> <div class="dock-container backgroud_blur">
<a class="dock-item" onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"><span>finder</span><img src="./img/icon/finder.png" alt="finder"></a> <a class="dock-item" onclick="Macui.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"><span>finder</span><img src="./img/icon/finder.png" alt="finder"></a>
<a class="dock-item" onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')"><span>safari</span><img src="./img/icon/safari.png" alt="safari"></a> <a class="dock-item" onclick="Macui.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')"><span>safari</span><img src="./img/icon/safari.png" alt="safari"></a>
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a> <a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a> <a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a> <a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
@ -159,29 +159,29 @@
<script type="text/javascript" src="./js/index.min.js"></script> <script type="text/javascript" src="./js/index.min.js"></script>
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script> <script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
<script> <script>
Win10.onReady(function () { Macui.onReady(function () {
//设置壁纸 //设置壁纸
Win10.setBgUrl({ Macui.setBgUrl({
main: './img/wallpapers/main.jpg', main: './img/wallpapers/main.jpg',
mobile: './img/wallpapers/mobile.jpg', mobile: './img/wallpapers/mobile.jpg',
}); });
Win10.setAnimated([ Macui.setAnimated([
'animated flip', 'animated flip',
'animated bounceIn', 'animated bounceIn',
], 0.01); ], 0.01);
setTimeout(function () { setTimeout(function () {
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () { Macui.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
Win10.enableFullScreen(); Macui.enableFullScreen();
}); });
Win10.newMsg('最新资讯', '最新资讯信息', function () { Macui.newMsg('最新资讯', '最新资讯信息', function () {
layer.open({ layer.open({
type: 2, type: 2,
title: '最新资讯', title: '最新资讯',
area: ['300px', '380px'], area: ['300px', '380px'],
shade: 0, shade: 0,
skin: 'win10-open-iframe', skin: 'mac-open-iframe',
offset: 'rb', offset: 'rb',
content: './broadcast.html' content: './broadcast.html'
}); });
@ -194,7 +194,7 @@
title: '最新资讯', title: '最新资讯',
area: ['300px', '380px'], area: ['300px', '380px'],
shade: 0, shade: 0,
skin: 'win10-open-iframe', skin: 'mac-open-iframe',
offset: 'rb', offset: 'rb',
content: 'broadcast.html' content: 'broadcast.html'
}) })

80
index.html
View File

@ -15,21 +15,21 @@
</head> </head>
<body> <body>
<div id="win10"> <div id="mac">
<div id="win10_task_bar" class="backgroud_blur"> <div id="mac_task_bar" class="backgroud_blur">
<div id="win10_btn_group_left" class="btn_group"> <div id="mac_btn_group_left" class="btn_group">
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div> <div id="mac_btn_win" class="btn"><span class="fa fa-apple"></span></div>
</div> </div>
<div id="win10_btn_group_middle" class="btn_group"></div> <div id="mac_btn_group_middle" class="btn_group"></div>
<div id="win10_btn_group_right" class="btn_group"> <div id="mac_btn_group_right" class="btn_group">
<div class="btn" id="win10_btn_time"></div> <div class="btn" id="mac_btn_time"></div>
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div> <div class="btn" id="mac_btn_command"><span id="mac-msg-nof" class="fa fa-list-ul"></span></div>
<div class="btn" id="win10_btn_show_desktop"></div> <div class="btn" id="mac_btn_show_desktop"></div>
</div> </div>
</div> </div>
<div class="desktop"> <div class="desktop">
<div id="win10-shortcuts" class="shortcuts-hidden"> <div id="mac-shortcuts" class="shortcuts-hidden">
<div class="shortcut" onclick="Win10.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')"> <div class="shortcut" onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
<img class="icon" src="./img/icon/computer.png"/> <img class="icon" src="./img/icon/computer.png"/>
<div class="title">UI官网</div> <div class="title">UI官网</div>
</div> </div>
@ -37,21 +37,37 @@
<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"> <div class="shortcut mac-drawer">
<img class="icon" src="./img/icon/folder.png"/> <img class="icon" src="./img/icon/folder.png"/>
<div class="title">新建文件夹</div> <div class="title">新建文件夹</div>
<div class="win10-drawer-box"> <div class="mac-drawer-box">
<div class="shortcut-drawer win10-drawer"> <div class="shortcut-drawer mac-drawer">
<img class="icon" src="./img/icon/folder.png"/> <img class="icon" src="./img/icon/folder.png"/>
<div class="title">新建文件夹</div> <div class="title">新建文件夹</div>
<div class="win10-drawer-box"> <div class="mac-drawer-box">
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com"> <div class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i> <i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div> <div class="title">子项1</div>
</div> </div>
</div> </div>
</div> </div>
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com"> <div class="shortcut-drawer mac-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 class="shortcut-drawer mac-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 class="shortcut-drawer mac-open-window" data-url="www.baidu.com">
<i class="icon fa fa-fw fa-th-list orange"></i> <i class="icon fa fa-fw fa-th-list orange"></i>
<div class="title">子项1</div> <div class="title">子项1</div>
</div> </div>
@ -64,26 +80,26 @@
</div> </div>
<div class="background blur"></div> <div class="background blur"></div>
</div> </div>
<div id="win10-menu" class="hidden backgroud_blur"> <div id="mac-menu" class="hidden backgroud_blur">
<div class="list win10-menu-hidden animated animated-slideOutLeft"> <div class="list mac-menu-hidden animated animated-slideOutLeft">
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div> <div class="item" onclick="Macui.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div> <div class="item" onclick=" Macui.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
</div> </div>
</div> </div>
<div id="win10_command_center" class="hidden_right backgroud_blur"> <div id="mac_command_center" class="hidden_right backgroud_blur">
<div class="command-header"> <div class="command-header">
<div class="tab-today active">今天</div> <div class="tab-today active">今天</div>
<div class="tab-msg">通知</div> <div class="tab-msg">通知</div>
</div> </div>
<div class="command-body today"></div> <div class="command-body today"></div>
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> --> <!-- <span id="mac_btn_command_center_clean_all">全部清除</span> -->
<div class="command-body msgs"></div> <div class="command-body msgs"></div>
</div> </div>
<div class="dock" id="dock"> <div class="dock" id="dock">
<div class="dock-container backgroud_blur"> <div class="dock-container backgroud_blur">
<a class="dock-item" onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <span>finder</span><img src="./img/icon/finder.png"></a> <a class="dock-item" onclick="Macui.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <span>finder</span><img src="./img/icon/finder.png"></a>
<a class="dock-item" href="#" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')" ><span>UI官网</span><img src="./img/icon/computer.png" alt="UI官网" /></a> <a class="dock-item" href="#" onclick="Macui.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')" ><span>UI官网</span><img src="./img/icon/computer.png" alt="UI官网" /></a>
<a class="dock-item" onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')"> <span>safari</span><img src="./img/icon/safari.png"></a> <a class="dock-item" onclick="Macui.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')"> <span>safari</span><img src="./img/icon/safari.png"></a>
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a> <a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a> <a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a> <a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
@ -103,21 +119,21 @@
<script type="text/javascript" src="./js/index.min.js"></script> <script type="text/javascript" src="./js/index.min.js"></script>
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script> <script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
<script> <script>
Win10.onReady(function () { Macui.onReady(function () {
//设置壁纸 //设置壁纸
Win10.setBgUrl({ Macui.setBgUrl({
main: './img/wallpapers/main.jpg', main: './img/wallpapers/main.jpg',
mobile: './img/wallpapers/mobile.jpg', mobile: './img/wallpapers/mobile.jpg',
}); });
Win10.setAnimated([ Macui.setAnimated([
'animated flip', 'animated flip',
'animated bounceIn', 'animated bounceIn',
], 0.01); ], 0.01);
setTimeout(function () { setTimeout(function () {
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () { Macui.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
Win10.enableFullScreen(); Macui.enableFullScreen();
}) })
}, 1500); }, 1500);
@ -127,7 +143,7 @@
title: '最新资讯', title: '最新资讯',
area: ['300px', '380px'], area: ['300px', '380px'],
shade: 0, shade: 0,
skin: 'win10-open-iframe', skin: 'mac-open-iframe',
offset: 'rb', offset: 'rb',
content: 'broadcast.html' content: 'broadcast.html'
}) })

595
js/index.js
View File

File diff suppressed because it is too large Load Diff

2
js/index.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
js/login.js
View File

@ -1,5 +1,4 @@
$(document).ready(function() { $(document).ready(function() {
var animating = false, var animating = false,
submitPhase1 = 1100, submitPhase1 = 1100,
submitPhase2 = 400, submitPhase2 = 400,
@ -9,13 +8,13 @@ $(document).ready(function() {
function ripple(elem, e) { function ripple(elem, e) {
$(".ripple").remove(); $(".ripple").remove();
var elTop = elem.offset().top, let elTop = elem.offset().top,
elLeft = elem.offset().left, elLeft = elem.offset().left,
x = e.pageX - elLeft, x = e.pageX - elLeft,
y = e.pageY - elTop; y = e.pageY - elTop;
var $ripple = $("<div class='ripple'></div>"); let ripple = $("<div class='ripple'></div>");
$ripple.css({top: y, left: x}); ripple.css({top: y, left: x});
elem.append($ripple); elem.append(ripple);
}; };
$(document).on("click", ".login__submit", function(e) { $(document).on("click", ".login__submit", function(e) {
@ -44,7 +43,7 @@ $(document).ready(function() {
if (animating) return; if (animating) return;
$(".ripple").remove(); $(".ripple").remove();
animating = true; animating = true;
var that = this; let that = this;
$(that).addClass("clicked"); $(that).addClass("clicked");
setTimeout(function() { setTimeout(function() {
$app.removeClass("active"); $app.removeClass("active");

14
js/win10.child.js → js/mac.child.js
View File

@ -2,21 +2,21 @@
* Created by Yuri2 on 2017/7/31. * Created by Yuri2 on 2017/7/31.
*/ */
//此处代码适合在子页面使用 //此处代码适合在子页面使用
window.Win10_parent=parent.Win10; //获取父级Win10对象的句柄 window.Macui_parent=parent.Macui; //获取父级Macui对象的句柄
window.Win10_child={ window.Macui_child={
close:function () { close:function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
Win10_parent._closeWin(index); Macui_parent._closeWin(index);
}, },
newMsg: function (title, content,handle_click){ newMsg: function (title, content,handle_click){
Win10_parent.newMsg(title, content,handle_click) Macui_parent.newMsg(title, content,handle_click)
}, },
openUrl: function (url, title,max){ openUrl: function (url, title,max){
var click_lock_name=Math.random(); var click_lock_name=Math.random();
Win10_parent._iframe_click_lock_children[click_lock_name]=true; Macui_parent._iframe_click_lock_children[click_lock_name]=true;
var index=Win10_parent.openUrl(url, title,max); var index=Macui_parent.openUrl(url, title,max);
setTimeout(function () { setTimeout(function () {
delete Win10_parent._iframe_click_lock_children[click_lock_name]; delete Macui_parent._iframe_click_lock_children[click_lock_name];
},1000); },1000);
return index; return index;
} }

10
plugins/shortcut-drawer/shortcut-drawer.css
View File

@ -1,4 +1,4 @@
.win10-drawer-box{ .mac-drawer-box{
height:0; height:0;
overflow: hidden; overflow: hidden;
} }
@ -20,11 +20,9 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
margin: 0 auto;
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 5px; margin: 5px auto;
margin-top: 5px;
text-align: center; text-align: center;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
@ -40,7 +38,7 @@
text-align: center; text-align: center;
line-height: 18px; line-height: 18px;
margin-bottom: 5px; margin-bottom: 5px;
height: 36px; /*height: 36px;*/
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
display:-webkit-box; display:-webkit-box;
@ -60,7 +58,7 @@
font-size: 20px; font-size: 20px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0 0;
border: 0; border: 0;
} }
.drawer.layui-layer{ .drawer.layui-layer{

41
plugins/shortcut-drawer/shortcut-drawer.js
View File

@ -1,9 +1,9 @@
//该插件提供桌面图标二级分类的支持 //该插件提供桌面图标二级分类的支持
Win10.onReady(function () { Macui.onReady(function () {
//注册打开事件 //注册打开事件
(function () { (function () {
// 注册事件委派 打开url窗口 // 注册事件委派 打开url窗口
$('body').on('click', '.shortcut-drawer.win10-open-window', function () { $('body').on('click', '.shortcut-drawer.mac-open-window', function () {
//>> 获取当前点击的对象 //>> 获取当前点击的对象
$this = $(this); $this = $(this);
//>> 判断url地址是否为空 如果为空 不予处理 //>> 判断url地址是否为空 如果为空 不予处理
@ -36,27 +36,26 @@ Win10.onReady(function () {
} }
} }
//>> 调用win10打开url方法 //>> 调用win10打开url方法
Win10.openUrl($this.data('url'), icon, title, areaAndOffset); Macui.openUrl($this.data('url'), icon, title, areaAndOffset);
} }
}) })
})(), })();
$('body').on('click', '.mac-drawer', function () {
$('body').on('click', '.win10-drawer', function () { var content = $(this).find('.mac-drawer-box').html();
var content = $(this).find('.win10-drawer-box').html(); var title = $(this).children('.title').html();
var title = $(this).children('.title').html(); var index = layer.open({
var index = layer.open({ type: 1,
type: 1, shadeClose: true,
shadeClose: true, skin: 'drawer',
skin: 'drawer', area: Macui.isSmallScreen() ? "80%" : "60%",
area: [Win10.isSmallScreen() ? "80%" : "60%", "50%"], closeBtn: 0,
closeBtn: 0, title: title,
title: title, content: content,
content: content, });
}); var layero = Macui.getLayeroByIndex(index);
var layero = Win10.getLayeroByIndex(index); layero.find('.shortcut-drawer').click(function () {
layero.find('.shortcut-drawer').click(function () { layer.close(index);
layer.close(index);
})
}) })
})
}); });

2
plugins/shortcut-drawer/shortcut-drawer.min.css vendored
View File

@ -1 +1 @@
.win10-drawer-box{height:0;overflow:hidden}.shortcut-drawer{width:80px;overflow:hidden;cursor:pointer;padding:0;transition:all .5s;display:inline-block}.shortcut-drawer:hover{background-color:rgba(255,255,255,.11)}.shortcut-drawer>.icon{width:50px;height:50px;overflow:hidden;margin:0 auto;color:#fff;box-sizing:border-box;margin-bottom:5px;margin-top:5px;text-align:center;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;font-size:37px;line-height:50px}.shortcut-drawer .title{color:#fff;font-size:12px;text-align:center;line-height:18px;margin-bottom:5px;height:36px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.drawer.layui-layer{border-radius:.5em;overflow:auto;background:0 0}.drawer.layui-layer>.layui-layer-title{background:0 0;text-align:center;padding:0;color:#fff;font-size:20px;height:30px;line-height:30px;border-radius:4px 4px 0 0;border:0}.drawer.layui-layer{box-shadow:none}.drawer.layui-layer>.layui-layer-content{background-color:rgba(255,255,255,.5);padding:1em;border-radius:1em}.drawer .black-green{background:#009688!important}.drawer .green{background:#5fb878!important}.drawer .black{background:#393d49!important}.drawer .blue{background:#1e9fff!important}.drawer .orange{background:#f7b824!important}.drawer .red{background:#ff5722!important}.drawer .dark{background:#2f4056!important}.drawer .purple{background:#b074e6!important} .mac-drawer-box{height:0;overflow:hidden}.shortcut-drawer{width:80px;overflow:hidden;cursor:pointer;padding:0;transition:all .5s;display:inline-block}.shortcut-drawer:hover{background-color:rgba(255,255,255,.11)}.shortcut-drawer>.icon{width:50px;height:50px;overflow:hidden;margin:0 auto;color:#fff;box-sizing:border-box;margin-bottom:5px;margin-top:5px;text-align:center;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;font-size:37px;line-height:50px}.shortcut-drawer .title{color:#fff;font-size:12px;text-align:center;line-height:18px;margin-bottom:5px;height:36px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.drawer.layui-layer{border-radius:.5em;overflow:auto;background:0 0}.drawer.layui-layer>.layui-layer-title{background:0 0;text-align:center;padding:0;color:#fff;font-size:20px;height:30px;line-height:30px;border-radius:4px 4px 0 0;border:0}.drawer.layui-layer{box-shadow:none}.drawer.layui-layer>.layui-layer-content{background-color:rgba(255,255,255,.5);padding:1em;border-radius:1em}.drawer .black-green{background:#009688!important}.drawer .green{background:#5fb878!important}.drawer .black{background:#393d49!important}.drawer .blue{background:#1e9fff!important}.drawer .orange{background:#f7b824!important}.drawer .red{background:#ff5722!important}.drawer .dark{background:#2f4056!important}.drawer .purple{background:#b074e6!important}

2
plugins/shortcut-drawer/shortcut-drawer.min.js vendored
View File

@ -1 +1 @@
Win10.onReady((function(){(function(){$("body").on("click",".shortcut-drawer.win10-open-window",(function(){if($this=$(this),""!==$this.data("url")){var title=$this.data("title")||"",areaAndOffset,icon,bg=$this.data("icon-bg")?$this.data("icon-bg"):"";$this.data("icon-image")&&(icon='<img class="icon '+bg+'" src="'+$this.data("icon-image")+'"/>'),$this.data("icon-font")&&(icon='<i class="fa fa-fw fa-'+$this.data("icon-font")+" icon "+bg+'"></i>'),title||1!==$this.children(".icon").length||1!==$this.children(".title").length||(title=$this.children(".title").html(),icon||(icon=$this.children(".icon").prop("outerHTML"))),$this.data("area-offset")&&(areaAndOffset=$this.data("area-offset"),-1!==areaAndOffset.indexOf(",")&&(areaAndOffset=eval(areaAndOsffset))),Win10.openUrl($this.data("url"),icon,title,areaAndOffset)}}))})(),$("body").on("click",".win10-drawer",(function(){var content=$(this).find(".win10-drawer-box").html(),title=$(this).children(".title").html(),index=layer.open({type:1,shadeClose:!0,skin:"drawer",area:[Win10.isSmallScreen()?"80%":"60%","50%"],closeBtn:0,title:title,content:content}),layero;Win10.getLayeroByIndex(index).find(".shortcut-drawer").click((function(){layer.close(index)}))}))})); Macui.onReady((function(){(function(){$("body").on("click",".shortcut-drawer.mac-open-window",(function(){if($this=$(this),""!==$this.data("url")){var title=$this.data("title")||"",areaAndOffset,icon,bg=$this.data("icon-bg")?$this.data("icon-bg"):"";$this.data("icon-image")&&(icon='<img class="icon '+bg+'" src="'+$this.data("icon-image")+'"/>'),$this.data("icon-font")&&(icon='<i class="fa fa-fw fa-'+$this.data("icon-font")+" icon "+bg+'"></i>'),title||1!==$this.children(".icon").length||1!==$this.children(".title").length||(title=$this.children(".title").html(),icon||(icon=$this.children(".icon").prop("outerHTML"))),$this.data("area-offset")&&(areaAndOffset=$this.data("area-offset"),-1!==areaAndOffset.indexOf(",")&&(areaAndOffset=eval(areaAndOsffset))),Macui.openUrl($this.data("url"),icon,title,areaAndOffset)}}))})(),$("body").on("click",".mac-drawer",(function(){var content=$(this).find(".mac-drawer-box").html(),title=$(this).children(".title").html(),index=layer.open({type:1,shadeClose:!0,skin:"drawer",area:[Macui.isSmallScreen()?"80%":"60%","50%"],closeBtn:0,title:title,content:content}),layero;Macui.getLayeroByIndex(index).find(".shortcut-drawer").click((function(){layer.close(index)}))}))}));

4
plugins/theme_switcher/README.txt
View File

@ -9,7 +9,7 @@
桌面图标的例子： 桌面图标的例子：
<div class="shortcut win10-open-window" data-url="./plugins/theme_switcher/theme_switcher.html"> <div class="shortcut mac-open-window" data-url="./plugins/theme_switcher/theme_switcher.html">
<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>
@ -17,7 +17,7 @@
目录结构 目录结构
win10-ui mac-ui
-plugins -plugins
-theme_switcher -theme_switcher
-css,js,html..... -css,js,html.....

2
plugins/theme_switcher/theme_switcher.html
View File

@ -5,7 +5,7 @@
<title>主题切换</title> <title>主题切换</title>
<link href="theme_switcher.css" rel="stylesheet"> <link href="theme_switcher.css" rel="stylesheet">
<script type="text/javascript" src="../../js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="../../js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../js/win10.child.js"></script> <script type="text/javascript" src="../../js/mac.child.js"></script>
<script type="text/javascript" src="./theme_switcher.js"></script> <script type="text/javascript" src="./theme_switcher.js"></script>
</head> </head>
<body> <body>

6
plugins/theme_switcher/theme_switcher.js
View File

@ -63,10 +63,10 @@ $(function () {
var theme_area=$("#theme_area"); var theme_area=$("#theme_area");
theme_area.on('click','.theme_setting',function () { theme_area.on('click','.theme_setting',function () {
var pic=$(this).data('pic'); var pic=$(this).data('pic');
if(!Win10_parent.isSmallScreen()){ if(!Macui_parent.isSmallScreen()){
Win10_parent.setBgUrl({main:pic}); Macui_parent.setBgUrl({main:pic});
}else{ }else{
Win10_parent.setBgUrl({mobile:pic}); Macui_parent.setBgUrl({mobile:pic});
} }
//此处你也许想用ajax把修改信息保存到服务器。。。 //此处你也许想用ajax把修改信息保存到服务器。。。