macUI/demo.html

180 lines
9.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>mac桌面</title>
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
<link href="./css/animate.css" rel="stylesheet">
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="./css/macdefault.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/interface.js"></script>
<script type="text/javascript" src="./component/layer-v3.1.1/layer/layer.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>
<script>
Win10.onReady(function () {
//设置壁纸
Win10.setBgUrl({
main:'./img/wallpapers/main.jpg',
mobile:'./img/wallpapers/mobile.jpg',
});
Win10.setAnimated([
'animated flip',
'animated bounceIn',
], 0.01);
setTimeout(function () {
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
Win10.enableFullScreen();
});
Win10.newMsg('最新资讯', '最新资讯信息',function () {
layer.open({
type: 2,
title: '最新资讯',
area: ['300px', '380px'],
shade:0,
skin:'win10-open-iframe',
offset: 'rb',
content: './broadcast.html'
});
});
}, 1500);
setTimeout(function () {
layer.open({
type: 2,
title: '最新资讯',
area: ['300px', '380px'],
shade:0,
skin:'win10-open-iframe',
offset: 'rb',
content: 'broadcast.html'
})
},2000);
});
</script>
</head>
<body>
<div id="win10">
<div class="desktop">
<div id="win10-shortcuts" class="shortcuts-hidden">
<div class="shortcut" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>UI官网')">
<img class="icon" src="./img/icon/computer.png"/>
<div class="title">UI官网</div>
</div>
<div class="shortcut" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/trashicon.png\'/>回收站')">
<img class="icon" src="./img/icon/trashicon.png"/>
<div class="title">回收站</div>
</div>
<div class="shortcut" onclick="Win10.openUrl('win10ui.yuri2.cn/src/doc.php','<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="window.open('https://github.com/yuri2peter/win10-ui')">
<img class="icon" src="./img/icon/icloud.png"/>
<div class="title">iCloud</div>
</div>
<div class="shortcut" onclick="Win10.openUrl('https://www.oschina.net/p/win10-ui','<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')">
<img class="icon" src="./img/icon/prefapp.png"/>
<div class="title">设置</div>
</div>
<div class="shortcut" ondblclick='Win10.openUrl("./login.html","<i class=\"fa fa-user icon black-green\"></i>登录页")'>
<i class="fa fa-user icon black-green"></i>
<div class="title">登录页(双击)</div>
</div>
<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>
<div class="title">切换壁纸</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 class="background blur"></div>
</div>
<div id="win10-menu" class="hidden">
<div class="list win10-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="Win10.newMsg('API测试','通过API可以发送消息至消息中心自定义标题与内容(点击我试试)',function() {alert('click')})">发送带回调的消息</div>
<div class="sub-item" onclick="Win10.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','图标代码生成器')">桌面图标代码生成器</div>
<div class="sub-item" onclick="Win10.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>
<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>
</div>
<div id="win10_command_center" class="hidden_right">
<div class="title">
<h4 style="float: left">消息中心 </h4>
<span id="win10_btn_command_center_clean_all">全部清除</span>
</div>
<div class="msgs"></div>
</div>
<div id="win10_task_bar">
<div id="win10_btn_group_left" class="btn_group">
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
<div class="btn" id="win10-btn-browser"><span class="fa fa-safari"></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">
<!--0:00<br/>-->
<!--1993/8/13-->
</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>
</div>
<!--bottom dock -->
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><span>finder</span><img src="./img/icon/finder.png" alt="finder" /></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>
</body>
</html>