mirror of https://github.com/1099438829/macUI.git
暂存版本，一个优化版本的，美化一堆样式
This commit is contained in:
昱墨
parent
705391034b
commit
8d42923198
56
README.md
56
README.md
|
|
@ -10,7 +10,7 @@ v1.1.2.5
|
|||
|
||||
> 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。
|
||||
> 更新方式：基本无须修改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中添加了自动修正的代码，所以不修改也会有正常的效果。但是这种修正代码将会在未来版本被取消，只作为临时使用。
|
||||
|
||||
## 预览
|
||||
|
|
@ -42,7 +42,7 @@ v1.1.2.5
|
|||
#### 如何自定义桌面图标？
|
||||
|
||||
```html
|
||||
<div id="win10-shortcuts">
|
||||
<div id="mac-shortcuts">
|
||||
<div class="shortcut" onclick="//do something...">
|
||||
<img src="图片地址" class="icon" />
|
||||
<div class="title">图标底部文字</div>
|
||||
|
|
@ -58,7 +58,7 @@ v1.1.2.5
|
|||
#### 如何自定义开始菜单列表?
|
||||
|
||||
```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="sub-item">二级菜单</div>
|
||||
|
|
@ -72,19 +72,19 @@ v1.1.2.5
|
|||
|
||||
|
||||
## API
|
||||
* 调用：Win10-ui的api应当在其初始化之后被调用
|
||||
* 调用：Macui-ui的api应当在其初始化之后被调用
|
||||
```html
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
//Win10-ui初始化完成后将执行此处代码
|
||||
Macui.onReady(function () {
|
||||
//Macui-ui初始化完成后将执行此处代码
|
||||
});
|
||||
</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']]``\)
|
||||
* onReady(handle) win10-ui初始化完毕后的回调
|
||||
* onReady(handle) mac-ui初始化完毕后的回调
|
||||
* menuOpen() 开始菜单打开
|
||||
* menuClose() 开始菜单关闭
|
||||
* 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'
|
||||
```html
|
||||
<div class="shortcut">
|
||||
<img class="icon" src="./img/icon/win10.png"/>
|
||||
<div class="title">Win10-UI官网</div>
|
||||
<img class="icon" src="./img/icon/mac.png"/>
|
||||
<div class="title">Macui-UI官网</div>
|
||||
</div>
|
||||
```
|
||||
>在桌面图标中，设置img.icon声明该图片是一个图标
|
||||
|
|
@ -129,14 +129,14 @@ v1.1.2.5
|
|||
```html
|
||||
<div class="shortcut">
|
||||
<i class="fa fa-camera-retro icon"></i>
|
||||
<div class="title">Win10-UI官网</div>
|
||||
<div class="title">Macui-UI官网</div>
|
||||
</div>
|
||||
```
|
||||
>在桌面图标中，用.icon声明一个字体图标（以font awesome为例）
|
||||
|
||||
```html
|
||||
Win10.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/win10.png\"/>Win10-UI官网");
|
||||
Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");
|
||||
Macui.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/mac.png\"/>Macui-UI官网");
|
||||
Macui.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");
|
||||
```
|
||||
>没错！你也可以在openUrl函数的title参数中插入图片图标或者字体图标！
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></
|
|||
#### 父子页沟通
|
||||
|
||||
* 要使用子页工具集，请先引入win10.child.js
|
||||
* 自由的使用Win10_child对象吧，目前包含close、newMsg、openUrl函数；也可以使用Win10_parent对象，将指向父页的Win10对象。
|
||||
* 自由的使用Macui_child对象吧，目前包含close、newMsg、openUrl函数；也可以使用Macui_parent对象，将指向父页的Macui对象。
|
||||
* 父页打开子窗口的函数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表示恢复默认菜单,[数组]表示自定义菜单)
|
||||
~~~js
|
||||
//典型用法(桌面菜单)
|
||||
Win10.setContextMenu('#win10>.desktop',[
|
||||
Macui.setContextMenu('#mac>.desktop',[
|
||||
'菜单标题', //单字符串，不带回调
|
||||
['进入全屏',function () {Win10.enableFullScreen()}], //菜单项+点击回调
|
||||
['退出全屏',function () {Win10.disableFullScreen()}],
|
||||
['进入全屏',function () {Macui.enableFullScreen()}], //菜单项+点击回调
|
||||
['退出全屏',function () {Macui.disableFullScreen()}],
|
||||
'|', //分隔符
|
||||
['关于',function () {Win10.aboutUs()}],
|
||||
['关于',function () {Macui.aboutUs()}],
|
||||
]);
|
||||
|
||||
//设置menu为true会起到禁用系统默认菜单的作用
|
||||
Win10.setContextMenu('#win10',true);
|
||||
Macui.setContextMenu('#mac',true);
|
||||
~~~
|
||||
> 点击回调函数可以声明一个参数e,将传入点击事件的对象。特别的，e.data是触发右键菜单的对象。
|
||||
|
||||
#### 桌面舞台
|
||||
|
||||
为了让广大开发者能更自由的定义自己的桌面，Win10-UI自v1.1.2.3版本起加入桌面舞台。
|
||||
桌面舞台是一个`id`为`win10-desktop-scene`的div，位于`#win10>.desktop`下。桌面舞台预定义了css，使其浮动于桌面图标的下方。
|
||||
为了让广大开发者能更自由的定义自己的桌面，Macui-UI自v1.1.2.3版本起加入桌面舞台。
|
||||
桌面舞台是一个`id`为`mac-desktop-scene`的div，位于`#mac>.desktop`下。桌面舞台预定义了css，使其浮动于桌面图标的下方。
|
||||
借助此特性，你甚至可以发挥想象力，制作出动态壁纸。
|
||||
> 使用`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手动绑定
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件`win10_bind_open_windows.js`。
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件`#mac_bind_open_windows.js`。
|
||||
|
||||
* 标签属性说明
|
||||
* data-title:窗口标题
|
||||
|
|
@ -230,7 +230,7 @@ Win10.setContextMenu('#win10',true);
|
|||
* 特别的，如果子节点有icon和title的css类，可以自动识别为图标和标题，无须设置data-title和data-icon-image(font)
|
||||
|
||||
~~~html
|
||||
<div class="shortcut win10-open-window"
|
||||
<div class="shortcut mac-open-window"
|
||||
data-url="http://www.baidu.com"
|
||||
data-title="我是百度"
|
||||
data-icon-image="https://www.baidu.com/img/bd_logo1.png"
|
||||
|
|
@ -244,7 +244,7 @@ Win10.setContextMenu('#win10',true);
|
|||
> 这是所有可选项都用上的完整写法。
|
||||
|
||||
~~~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>
|
||||
<div class="title">百度</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<style>
|
||||
* {
|
||||
color: gray;
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu,sans-serif
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -31,16 +31,16 @@
|
|||
<div class="btn" onclick="f3()">关闭子页</div>
|
||||
</body>
|
||||
<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>
|
||||
function f1() {
|
||||
Win10_child.newMsg('子页的问候', '这是从iframe页调用APi发送的消息哦');
|
||||
Macui_child.newMsg('子页的问候', '这是从iframe页调用APi发送的消息哦');
|
||||
}
|
||||
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() {
|
||||
Win10_child.close();
|
||||
Macui_child.close();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
384
css/index.css
384
css/index.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
94
demo.html
94
demo.html
|
|
@ -16,40 +16,40 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="win10">
|
||||
<div id="win10_task_bar" class="backgroud_blur">
|
||||
<div id="win10_btn_group_left" class="btn_group">
|
||||
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
<div id="mac">
|
||||
<div id="mac_task_bar" class="backgroud_blur">
|
||||
<div id="mac_btn_group_left" class="btn_group">
|
||||
<div id="mac_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_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="win10_btn_show_desktop"></div>
|
||||
<div id="mac_btn_group_middle" class="btn_group"></div>
|
||||
<div id="mac_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="mac_btn_time"></div>
|
||||
<div class="btn" id="mac_btn_command"><span id="mac-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="mac_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<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\'/>','OS官网')">
|
||||
onclick="Macui.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
|
||||
<img class="icon" src="./img/icon/computer.png" />
|
||||
<div class="title">OS官网</div>
|
||||
</div>
|
||||
<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" />
|
||||
<div class="title">Note</div>
|
||||
</div>
|
||||
<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" />
|
||||
<div class="title">GameCenter</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" />
|
||||
<div class="title">Calendar</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" />
|
||||
<div class="title">Calculator</div>
|
||||
</div>
|
||||
|
|
@ -58,12 +58,12 @@
|
|||
<div class="title">iCloud</div>
|
||||
</div>
|
||||
<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" />
|
||||
<div class="title">地图</div>
|
||||
</div>
|
||||
<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" />
|
||||
<div class="title">设置</div>
|
||||
</div>
|
||||
|
|
@ -72,26 +72,26 @@
|
|||
<i class="fa fa-user icon black-green"></i>
|
||||
<div class="title">登录页</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;">
|
||||
<img class="icon" src="./img/icon/DesktopScreenEffectsPref.png" />
|
||||
<div class="title">切换壁纸</div>
|
||||
</div>
|
||||
<div class="shortcut win10-drawer">
|
||||
<div class="shortcut mac-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png" />
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-drawer">
|
||||
<div class="mac-drawer-box">
|
||||
<div class="shortcut-drawer mac-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">
|
||||
<div class="mac-drawer-box">
|
||||
<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>
|
||||
</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>
|
||||
|
|
@ -105,41 +105,41 @@
|
|||
<div class="background blur"></div>
|
||||
</div>
|
||||
|
||||
<div id="win10-menu" class="hidden backgroud_blur">
|
||||
<div class="list win10-menu-hidden animated animated-slideOutLeft">
|
||||
<div id="mac-menu" class="hidden backgroud_blur">
|
||||
<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="sub-item" onclick="Win10.openUrl('./child.html','子页')">父子页沟通</div>
|
||||
<div class="sub-item" onclick="Win10.commandCenterOpen()">打开消息中心</div>
|
||||
<div class="sub-item" onclick="Macui.openUrl('./child.html','子页')">父子页沟通</div>
|
||||
<div class="sub-item" onclick="Macui.commandCenterOpen()">打开消息中心</div>
|
||||
<div class="sub-item"
|
||||
onclick="Win10.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})">
|
||||
onclick="Macui.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})">
|
||||
发送带回调的消息</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="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 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 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 class="item" onclick="Win10.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.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Macui.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</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="tab-today active">今天</div>
|
||||
<div class="tab-msg">通知</div>
|
||||
</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>
|
||||
<!--bottom dock -->
|
||||
<div class="dock" id="dock">
|
||||
<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="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/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/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>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>
|
||||
|
|
@ -159,29 +159,29 @@
|
|||
<script type="text/javascript" src="./js/index.min.js"></script>
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
Macui.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
Macui.setBgUrl({
|
||||
main: './img/wallpapers/main.jpg',
|
||||
mobile: './img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
Macui.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Win10.enableFullScreen();
|
||||
Macui.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Macui.enableFullScreen();
|
||||
});
|
||||
Win10.newMsg('最新资讯', '最新资讯信息', function () {
|
||||
Macui.newMsg('最新资讯', '最新资讯信息', function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
skin: 'mac-open-iframe',
|
||||
offset: 'rb',
|
||||
content: './broadcast.html'
|
||||
});
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
skin: 'mac-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
|
|
|
|||
98
index.html
98
index.html
|
|
@ -15,21 +15,21 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="win10">
|
||||
<div id="win10_task_bar" class="backgroud_blur">
|
||||
<div id="win10_btn_group_left" class="btn_group">
|
||||
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
<div id="mac">
|
||||
<div id="mac_task_bar" class="backgroud_blur">
|
||||
<div id="mac_btn_group_left" class="btn_group">
|
||||
<div id="mac_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_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="win10_btn_show_desktop"></div>
|
||||
<div id="mac_btn_group_middle" class="btn_group"></div>
|
||||
<div id="mac_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="mac_btn_time"></div>
|
||||
<div class="btn" id="mac_btn_command"><span id="mac-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="mac_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div id="win10-shortcuts" class="shortcuts-hidden">
|
||||
<div class="shortcut" onclick="Win10.openUrl('./index.html','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<div id="mac-shortcuts" class="shortcuts-hidden">
|
||||
<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"/>
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
|
|
@ -37,21 +37,37 @@
|
|||
<img class="icon" src="./img/icon/demo.png"/>
|
||||
<div class="title">查看DEMO</div>
|
||||
</div>
|
||||
<div class="shortcut win10-drawer">
|
||||
<div class="shortcut mac-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png"/>
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-drawer">
|
||||
<div class="mac-drawer-box">
|
||||
<div class="shortcut-drawer mac-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">
|
||||
<div class="mac-drawer-box">
|
||||
<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>
|
||||
</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>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
|
|
@ -64,35 +80,35 @@
|
|||
</div>
|
||||
<div class="background blur"></div>
|
||||
</div>
|
||||
<div id="win10-menu" class="hidden backgroud_blur">
|
||||
<div class="list win10-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=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
<div id="mac-menu" class="hidden backgroud_blur">
|
||||
<div class="list mac-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item" onclick="Macui.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
|
||||
<div class="item" onclick=" Macui.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</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="tab-today active">今天</div>
|
||||
<div class="tab-msg">通知</div>
|
||||
</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>
|
||||
<div class="dock" id="dock">
|
||||
<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" 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" 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" 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>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
||||
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
||||
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
||||
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
||||
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></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="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="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>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>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
||||
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
||||
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
||||
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,21 +119,21 @@
|
|||
<script type="text/javascript" src="./js/index.min.js"></script>
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
Macui.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
Macui.setBgUrl({
|
||||
main: './img/wallpapers/main.jpg',
|
||||
mobile: './img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
Macui.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Win10.enableFullScreen();
|
||||
Macui.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Macui.enableFullScreen();
|
||||
})
|
||||
}, 1500);
|
||||
|
||||
|
|
@ -127,7 +143,7 @@
|
|||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
skin: 'mac-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
|
|
|
|||
595
js/index.js
595
js/index.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
11
js/login.js
11
js/login.js
|
|
@ -1,5 +1,4 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
var animating = false,
|
||||
submitPhase1 = 1100,
|
||||
submitPhase2 = 400,
|
||||
|
|
@ -9,13 +8,13 @@ $(document).ready(function() {
|
|||
|
||||
function ripple(elem, e) {
|
||||
$(".ripple").remove();
|
||||
var elTop = elem.offset().top,
|
||||
let elTop = elem.offset().top,
|
||||
elLeft = elem.offset().left,
|
||||
x = e.pageX - elLeft,
|
||||
y = e.pageY - elTop;
|
||||
var $ripple = $("<div class='ripple'></div>");
|
||||
$ripple.css({top: y, left: x});
|
||||
elem.append($ripple);
|
||||
let ripple = $("<div class='ripple'></div>");
|
||||
ripple.css({top: y, left: x});
|
||||
elem.append(ripple);
|
||||
};
|
||||
|
||||
$(document).on("click", ".login__submit", function(e) {
|
||||
|
|
@ -44,7 +43,7 @@ $(document).ready(function() {
|
|||
if (animating) return;
|
||||
$(".ripple").remove();
|
||||
animating = true;
|
||||
var that = this;
|
||||
let that = this;
|
||||
$(that).addClass("clicked");
|
||||
setTimeout(function() {
|
||||
$app.removeClass("active");
|
||||
|
|
|
|||
|
|
@ -2,21 +2,21 @@
|
|||
* Created by Yuri2 on 2017/7/31.
|
||||
*/
|
||||
//此处代码适合在子页面使用
|
||||
window.Win10_parent=parent.Win10; //获取父级Win10对象的句柄
|
||||
window.Win10_child={
|
||||
window.Macui_parent=parent.Macui; //获取父级Macui对象的句柄
|
||||
window.Macui_child={
|
||||
close:function () {
|
||||
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||||
Win10_parent._closeWin(index);
|
||||
Macui_parent._closeWin(index);
|
||||
},
|
||||
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){
|
||||
var click_lock_name=Math.random();
|
||||
Win10_parent._iframe_click_lock_children[click_lock_name]=true;
|
||||
var index=Win10_parent.openUrl(url, title,max);
|
||||
Macui_parent._iframe_click_lock_children[click_lock_name]=true;
|
||||
var index=Macui_parent.openUrl(url, title,max);
|
||||
setTimeout(function () {
|
||||
delete Win10_parent._iframe_click_lock_children[click_lock_name];
|
||||
delete Macui_parent._iframe_click_lock_children[click_lock_name];
|
||||
},1000);
|
||||
return index;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.win10-drawer-box{
|
||||
.mac-drawer-box{
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -20,11 +20,9 @@
|
|||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
|
|
@ -40,7 +38,7 @@
|
|||
text-align: center;
|
||||
line-height: 18px;
|
||||
margin-bottom: 5px;
|
||||
height: 36px;
|
||||
/*height: 36px;*/
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
display:-webkit-box;
|
||||
|
|
@ -60,7 +58,7 @@
|
|||
font-size: 20px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: 0;
|
||||
}
|
||||
.drawer.layui-layer{
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
//该插件提供桌面图标二级分类的支持
|
||||
Win10.onReady(function () {
|
||||
Macui.onReady(function () {
|
||||
//注册打开事件
|
||||
(function () {
|
||||
// 注册事件委派 打开url窗口
|
||||
$('body').on('click', '.shortcut-drawer.win10-open-window', function () {
|
||||
$('body').on('click', '.shortcut-drawer.mac-open-window', function () {
|
||||
//>> 获取当前点击的对象
|
||||
$this = $(this);
|
||||
//>> 判断url地址是否为空 如果为空 不予处理
|
||||
|
|
@ -36,27 +36,26 @@ Win10.onReady(function () {
|
|||
}
|
||||
}
|
||||
//>> 调用win10打开url方法
|
||||
Win10.openUrl($this.data('url'), icon, title, areaAndOffset);
|
||||
Macui.openUrl($this.data('url'), icon, title, areaAndOffset);
|
||||
}
|
||||
})
|
||||
})(),
|
||||
})();
|
||||
|
||||
|
||||
$('body').on('click', '.win10-drawer', function () {
|
||||
var content = $(this).find('.win10-drawer-box').html();
|
||||
var title = $(this).children('.title').html();
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
shadeClose: true,
|
||||
skin: 'drawer',
|
||||
area: [Win10.isSmallScreen() ? "80%" : "60%", "50%"],
|
||||
closeBtn: 0,
|
||||
title: title,
|
||||
content: content,
|
||||
});
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
layero.find('.shortcut-drawer').click(function () {
|
||||
layer.close(index);
|
||||
})
|
||||
$('body').on('click', '.mac-drawer', function () {
|
||||
var content = $(this).find('.mac-drawer-box').html();
|
||||
var title = $(this).children('.title').html();
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
shadeClose: true,
|
||||
skin: 'drawer',
|
||||
area: Macui.isSmallScreen() ? "80%" : "60%",
|
||||
closeBtn: 0,
|
||||
title: title,
|
||||
content: content,
|
||||
});
|
||||
var layero = Macui.getLayeroByIndex(index);
|
||||
layero.find('.shortcut-drawer').click(function () {
|
||||
layer.close(index);
|
||||
})
|
||||
})
|
||||
});
|
||||
|
|
@ -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}
|
||||
|
|
@ -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)}))}))}));
|
||||
|
|
@ -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>
|
||||
<div class="title">切换壁纸</div>
|
||||
</div>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
目录结构
|
||||
|
||||
win10-ui
|
||||
mac-ui
|
||||
-plugins
|
||||
-theme_switcher
|
||||
-css,js,html.....
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<title>主题切换</title>
|
||||
<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/win10.child.js"></script>
|
||||
<script type="text/javascript" src="../../js/mac.child.js"></script>
|
||||
<script type="text/javascript" src="./theme_switcher.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -63,10 +63,10 @@ $(function () {
|
|||
var theme_area=$("#theme_area");
|
||||
theme_area.on('click','.theme_setting',function () {
|
||||
var pic=$(this).data('pic');
|
||||
if(!Win10_parent.isSmallScreen()){
|
||||
Win10_parent.setBgUrl({main:pic});
|
||||
if(!Macui_parent.isSmallScreen()){
|
||||
Macui_parent.setBgUrl({main:pic});
|
||||
}else{
|
||||
Win10_parent.setBgUrl({mobile:pic});
|
||||
Macui_parent.setBgUrl({mobile:pic});
|
||||
}
|
||||
//此处你也许想用ajax把修改信息保存到服务器。。。
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue