mirror of https://github.com/1099438829/macUI.git
新版本
This commit is contained in:
parent
20a99b3a4a
commit
411ddd7a0f
|
|
@ -2,6 +2,9 @@
|
||||||
body,a,h1,h2,h3,h4,h5,h6,p,div,em,ul,li {
|
body,a,h1,h2,h3,h4,h5,h6,p,div,em,ul,li {
|
||||||
font-family: PingFangSC-Ultralight, 'microsoft yahei';
|
font-family: PingFangSC-Ultralight, 'microsoft yahei';
|
||||||
}
|
}
|
||||||
|
* {
|
||||||
|
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||||
|
}
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -47,7 +50,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#win10 *{
|
#win10 *{
|
||||||
scrollbar-arrow-color: #5e6a5c;); /*图6,三角箭头的颜色*/
|
scrollbar-arrow-color: #5e6a5c; /*图6,三角箭头的颜色*/
|
||||||
scrollbar-face-color: #5e6a5c; /*图5,立体滚动条的颜色*/
|
scrollbar-face-color: #5e6a5c; /*图5,立体滚动条的颜色*/
|
||||||
scrollbar-3dlight-color: #5e6a5c; /*图1,立体滚动条亮边的颜色*/
|
scrollbar-3dlight-color: #5e6a5c; /*图1,立体滚动条亮边的颜色*/
|
||||||
scrollbar-highlight-color: #5e6a5c; /*图2,滚动条空白部分的颜色*/
|
scrollbar-highlight-color: #5e6a5c; /*图2,滚动条空白部分的颜色*/
|
||||||
|
|
@ -71,7 +74,10 @@ body {
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height:30px;
|
line-height:30px;
|
||||||
background-color: rgba(255, 255, 255, 0.75);
|
/* IE9+ */
|
||||||
|
background-color: rgba(255,255,255,0.4);
|
||||||
|
/* IE6-IE8 */
|
||||||
|
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#68FFFFFF,endColorStr=#68FFFFFF);
|
||||||
z-index: 19930813;
|
z-index: 19930813;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -181,7 +187,7 @@ body {
|
||||||
#win10-menu {
|
#win10-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
background-color: rgba(255,255,255,0.75);
|
background-color: rgba(255,255,255,0.55);
|
||||||
height:auto;
|
height:auto;
|
||||||
width: 12.5%;
|
width: 12.5%;
|
||||||
max-width: 880px;
|
max-width: 880px;
|
||||||
|
|
@ -321,9 +327,6 @@ body {
|
||||||
color: grey;
|
color: grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#win10 #win10-shortcuts {
|
#win10 #win10-shortcuts {
|
||||||
height: calc(100% - 40px);
|
height: calc(100% - 40px);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -375,7 +378,7 @@ body {
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
background-color: rgba(255,255,255,0.7);
|
background-color: rgba(255,255,255,0.55);
|
||||||
height: calc(100% - 30px);
|
height: calc(100% - 30px);
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
@ -761,31 +764,49 @@ body {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------尾部--------------------*/
|
/*--------------尾部--------------------*/
|
||||||
#footer{
|
|
||||||
height: 60px;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer .dock{
|
.dock {
|
||||||
/*width: 72%; */
|
width: 100%;
|
||||||
height: 100%;
|
bottom: 0px;
|
||||||
line-height: 60px;
|
position: absolute;
|
||||||
display: inline-block;
|
left: 0px;
|
||||||
|
height: 65px;
|
||||||
|
text-align: center;
|
||||||
|
z-index:1000;
|
||||||
|
}
|
||||||
|
.dock-container {
|
||||||
|
position: absolute;
|
||||||
|
height: 60px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: rgba(255,255,255,0.45) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
|
background-color: rgba(255,255,255,0.45) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
|
||||||
-webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
padding:0 20px;
|
||||||
-moz-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
|
||||||
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
|
||||||
-webkit-border-top-left-radius: 6px;
|
|
||||||
-webkit-border-top-right-radius: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dock a.dock-item {
|
||||||
|
display: block;
|
||||||
|
font: bold 12px Arial, Helvetica, sans-serif;
|
||||||
|
width: 60px;
|
||||||
|
color: #fff;
|
||||||
|
bottom: 0px;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.dock-item span {
|
||||||
|
display: none;
|
||||||
|
padding:3px 0px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(0,0,0,0.45);
|
||||||
|
}
|
||||||
|
.dock-item img {
|
||||||
|
border: none;
|
||||||
|
margin: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
|
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
|
||||||
#footer .dock{
|
.dock{
|
||||||
/*width: 72%; */
|
/*width: 72%; */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
|
|
@ -796,57 +817,11 @@ body {
|
||||||
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
|
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
|
||||||
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
|
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
|
||||||
}
|
}
|
||||||
.demo ul{
|
.dock ul{
|
||||||
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
|
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#footer .dock ul{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer .dock img{
|
|
||||||
z-index:222;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer .dock ul li{
|
|
||||||
float: left;
|
|
||||||
margin: 5px 10px;
|
|
||||||
/*过渡的时间 效果*/
|
|
||||||
-webkit-transition: 0.15s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer .dock ul li:hover{
|
|
||||||
/*参照*/
|
|
||||||
-webkit-transform-origin:bottom center;
|
|
||||||
/*形变*/
|
|
||||||
-webkit-transform:scale(1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer .dock .dock-tips{
|
|
||||||
color:white;
|
|
||||||
font-size:0.4em;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: rgba(0,0,0,0.5);
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
display: none;
|
|
||||||
padding:0px 10px;
|
|
||||||
margin-top: -30px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#footer .dock .dock-tips .arrow{
|
|
||||||
opacity: 0.5;
|
|
||||||
border-left:5px solid transparent;
|
|
||||||
border-right:5px solid transparent;
|
|
||||||
border-top:5px solid #000;
|
|
||||||
border-bottom:5px solid transparent;
|
|
||||||
width:0;
|
|
||||||
height:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/
|
/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/
|
||||||
.win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;}
|
.win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;}
|
||||||
|
|
@ -940,11 +915,8 @@ body {
|
||||||
.win10-open-iframe .layui-layer-setwin a {
|
.win10-open-iframe .layui-layer-setwin a {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
#footer{
|
|
||||||
bottom:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer .dock{
|
.dock{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
73
demo.html
73
demo.html
|
|
@ -6,17 +6,13 @@
|
||||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||||
<title>mac桌面</title>
|
<title>mac桌面</title>
|
||||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
||||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
|
||||||
<link href="./css/animate.css" rel="stylesheet">
|
<link href="./css/animate.css" rel="stylesheet">
|
||||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
|
||||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||||
<link href="./css/macdefault.css" rel="stylesheet">
|
<link href="./css/macdefault.css" rel="stylesheet">
|
||||||
|
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/interface.js"></script>
|
||||||
|
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||||
<script type="text/javascript" src="./js/mac.js"></script>
|
<script type="text/javascript" src="./js/mac.js"></script>
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
<script>
|
||||||
Win10.onReady(function () {
|
Win10.onReady(function () {
|
||||||
|
|
||||||
|
|
@ -45,36 +41,9 @@
|
||||||
offset: 'rb',
|
offset: 'rb',
|
||||||
content: 'broadcast.html'
|
content: 'broadcast.html'
|
||||||
})
|
})
|
||||||
},2000)
|
},2000);
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//dock特效 感谢安震110
|
|
||||||
$(function () {
|
|
||||||
dock();
|
|
||||||
});
|
|
||||||
$(window).resize(function() {
|
|
||||||
dock();
|
|
||||||
});
|
|
||||||
dock=function(){
|
|
||||||
var width=document.body.clientWidth;
|
|
||||||
if(width>768){
|
|
||||||
$("#footer .dock li a img").hover(
|
|
||||||
function(){
|
|
||||||
$(this).parent('a').prev().css('display','flex');
|
|
||||||
},
|
|
||||||
function(){
|
|
||||||
$(this).parent('a').prev().css('display','none');
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}else{
|
|
||||||
$("#footer .dock li a img").hover(function(){
|
|
||||||
$(this).parent('a').prev().css('display','none');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -153,27 +122,19 @@
|
||||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<!--bottom dock -->
|
||||||
<div class="dock">
|
<div class="dock" id="dock">
|
||||||
<ul>
|
<div class="dock-container">
|
||||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <img src="./img/icon/finder.png"></a></li>
|
<a class="dock-item" href="#"><span>finder</span><img src="./img/icon/finder.png" alt="finder" /></a>
|
||||||
<li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>我的电脑')"> <img src="./img/icon/computer.png"></a></li>
|
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||||
<li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li>
|
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
||||||
<li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li>
|
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
||||||
<li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
|
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||||
<li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
|
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||||
<li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
|
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
||||||
<li><span class="dock-tips">iTunes<span class="arrow"></span></span><a href="#"> <img src="./img/icon/iTunes.png"></a></li>
|
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
||||||
<li><span class="dock-tips">imusic<span class="arrow"></span></span><a href="#"> <img src="./img/icon/imusic.png"></a></li>
|
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
||||||
<li><span class="dock-tips">preview<span class="arrow"></span></span><a href="#"> <img src="./img/icon/preview.png"></a></li>
|
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
|
||||||
<li><span class="dock-tips">mail<span class="arrow"></span></span><a href="#"> <img src="./img/icon/mail.png"></a></li>
|
|
||||||
<li><span class="dock-tips">notes.png<span class="arrow"></span></span><a href="#"> <img src="./img/icon/notes.png"></a></li>
|
|
||||||
<li><span class="dock-tips">messages<span class="arrow"></span></span><a href="#"> <img src="./img/icon/messages.png"></a></li>
|
|
||||||
<li><span class="dock-tips">maps<span class="arrow"></span></span><a href="#"> <img src="./img/icon/maps.png"></a></li>
|
|
||||||
<li><span class="dock-tips">ibooks<span class="arrow"></span></span><a href="#"> <img src="./img/icon/ibooks.png"></a></li>
|
|
||||||
<li><span class="dock-tips">facetime<span class="arrow"></span></span><a href="#"> <img src="./img/icon/facetime.png"></a></li>
|
|
||||||
<li><span class="dock-tips">launchpad<span class="arrow"></span></span><a href="#"> <img src="./img/icon/launchpad.png"></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
80
index.html
80
index.html
|
|
@ -6,11 +6,12 @@
|
||||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||||
<title>mac桌面</title>
|
<title>mac桌面</title>
|
||||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
||||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
|
||||||
<link href="./css/animate.css" rel="stylesheet">
|
<link href="./css/animate.css" rel="stylesheet">
|
||||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
|
||||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||||
<link href="./css/macdefault.css" rel="stylesheet">
|
<link href="./css/macdefault.css" rel="stylesheet">
|
||||||
|
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||||
|
<script type="text/javascript" src="./js/interface.js"></script>
|
||||||
|
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||||
<script type="text/javascript" src="./js/mac.js"></script>
|
<script type="text/javascript" src="./js/mac.js"></script>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
|
|
@ -30,32 +31,24 @@
|
||||||
'animated flip',
|
'animated flip',
|
||||||
'animated bounceIn',
|
'animated bounceIn',
|
||||||
], 0.01);
|
], 0.01);
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
Win10.newMsg('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>')
|
||||||
|
}, 2500);
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
layer.open({
|
||||||
|
type: 2,
|
||||||
|
title: '最新资讯',
|
||||||
|
area: ['300px', '380px'],
|
||||||
|
shade:0,
|
||||||
|
skin:'win10-open-iframe',
|
||||||
|
offset: 'rb',
|
||||||
|
content: 'broadcast.html'
|
||||||
|
})
|
||||||
|
},2000);
|
||||||
});
|
});
|
||||||
//dock特效 感谢安震110
|
|
||||||
$(function () {
|
|
||||||
dock();
|
|
||||||
});
|
|
||||||
$(window).resize(function() {
|
|
||||||
dock();
|
|
||||||
});
|
|
||||||
dock=function(){
|
|
||||||
var width=document.body.clientWidth;
|
|
||||||
console.log(width);
|
|
||||||
if(width>768){
|
|
||||||
$("#footer .dock li a img").hover(
|
|
||||||
function(){
|
|
||||||
$(this).parent('a').prev().css('display','flex');
|
|
||||||
},
|
|
||||||
function(){
|
|
||||||
$(this).parent('a').prev().css('display','none');
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}else{
|
|
||||||
$("#footer .dock li a img").hover(function(){
|
|
||||||
$(this).parent('a').prev().css('display','none');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -113,27 +106,18 @@
|
||||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<div class="dock" id="dock">
|
||||||
<div class="dock">
|
<div class="dock-container">
|
||||||
<ul>
|
<a class="dock-item" href="#" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>UI官网')" ><span>finder</span><img src="./img/icon/finder.png" alt="finder" /></a>
|
||||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <img src="./img/icon/finder.png"></a></li>
|
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||||
<li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>我的电脑')"> <img src="./img/icon/computer.png"></a></li>
|
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
||||||
<li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li>
|
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
||||||
<li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li>
|
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||||
<li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
|
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||||
<li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
|
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
||||||
<li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
|
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
||||||
<li><span class="dock-tips">iTunes<span class="arrow"></span></span><a href="#"> <img src="./img/icon/iTunes.png"></a></li>
|
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
||||||
<li><span class="dock-tips">imusic<span class="arrow"></span></span><a href="#"> <img src="./img/icon/imusic.png"></a></li>
|
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
|
||||||
<li><span class="dock-tips">preview<span class="arrow"></span></span><a href="#"> <img src="./img/icon/preview.png"></a></li>
|
|
||||||
<li><span class="dock-tips">mail<span class="arrow"></span></span><a href="#"> <img src="./img/icon/mail.png"></a></li>
|
|
||||||
<li><span class="dock-tips">notes.png<span class="arrow"></span></span><a href="#"> <img src="./img/icon/notes.png"></a></li>
|
|
||||||
<li><span class="dock-tips">messages<span class="arrow"></span></span><a href="#"> <img src="./img/icon/messages.png"></a></li>
|
|
||||||
<li><span class="dock-tips">maps<span class="arrow"></span></span><a href="#"> <img src="./img/icon/maps.png"></a></li>
|
|
||||||
<li><span class="dock-tips">ibooks<span class="arrow"></span></span><a href="#"> <img src="./img/icon/ibooks.png"></a></li>
|
|
||||||
<li><span class="dock-tips">facetime<span class="arrow"></span></span><a href="#"> <img src="./img/icon/facetime.png"></a></li>
|
|
||||||
<li><span class="dock-tips">launchpad<span class="arrow"></span></span><a href="#"> <img src="./img/icon/launchpad.png"></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,717 @@
|
||||||
|
/*
|
||||||
|
* Interface elements for jQuery - http://interface.eyecon.ro
|
||||||
|
*
|
||||||
|
* Copyright (c) 2006 Stefan Petre
|
||||||
|
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||||
|
* and GPL (GPL-LICENSE.txt) licenses.
|
||||||
|
*/
|
||||||
|
jQuery.iUtil = {
|
||||||
|
getPosition: function(e) {
|
||||||
|
var x = 0;
|
||||||
|
var y = 0;
|
||||||
|
var restoreStyle = false;
|
||||||
|
var es = e.style;
|
||||||
|
if (jQuery(e).css('display') == 'none') {
|
||||||
|
oldVisibility = es.visibility;
|
||||||
|
oldPosition = es.position;
|
||||||
|
es.visibility = 'hidden';
|
||||||
|
es.display = 'block';
|
||||||
|
es.position = 'absolute';
|
||||||
|
restoreStyle = true
|
||||||
|
}
|
||||||
|
var el = e;
|
||||||
|
while (el) {
|
||||||
|
x += el.offsetLeft + (el.currentStyle && !jQuery.browser.opera ? parseInt(el.currentStyle.borderLeftWidth) || 0: 0);
|
||||||
|
y += el.offsetTop + (el.currentStyle && !jQuery.browser.opera ? parseInt(el.currentStyle.borderTopWidth) || 0: 0);
|
||||||
|
el = el.offsetParent
|
||||||
|
}
|
||||||
|
el = e;
|
||||||
|
while (el && el.tagName && el.tagName.toLowerCase() != 'body') {
|
||||||
|
x -= el.scrollLeft || 0;
|
||||||
|
y -= el.scrollTop || 0;
|
||||||
|
el = el.parentNode
|
||||||
|
}
|
||||||
|
if (restoreStyle) {
|
||||||
|
es.display = 'none';
|
||||||
|
es.position = oldPosition;
|
||||||
|
es.visibility = oldVisibility
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
x: x,
|
||||||
|
y: y
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getPositionLite: function(el) {
|
||||||
|
var x = 0,
|
||||||
|
y = 0;
|
||||||
|
while (el) {
|
||||||
|
x += el.offsetLeft || 0;
|
||||||
|
y += el.offsetTop || 0;
|
||||||
|
el = el.offsetParent
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
x: x,
|
||||||
|
y: y
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSize: function(e) {
|
||||||
|
var w = jQuery.css(e, 'width');
|
||||||
|
var h = jQuery.css(e, 'height');
|
||||||
|
var wb = 0;
|
||||||
|
var hb = 0;
|
||||||
|
var es = e.style;
|
||||||
|
if (jQuery(e).css('display') != 'none') {
|
||||||
|
wb = e.offsetWidth;
|
||||||
|
hb = e.offsetHeight
|
||||||
|
} else {
|
||||||
|
oldVisibility = es.visibility;
|
||||||
|
oldPosition = es.position;
|
||||||
|
es.visibility = 'hidden';
|
||||||
|
es.display = 'block';
|
||||||
|
es.position = 'absolute';
|
||||||
|
wb = e.offsetWidth;
|
||||||
|
hb = e.offsetHeight;
|
||||||
|
es.display = 'none';
|
||||||
|
es.position = oldPosition;
|
||||||
|
es.visibility = oldVisibility
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
w: w,
|
||||||
|
h: h,
|
||||||
|
wb: wb,
|
||||||
|
hb: hb
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSizeLite: function(el) {
|
||||||
|
return {
|
||||||
|
wb: el.offsetWidth || 0,
|
||||||
|
hb: el.offsetHeight || 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getClient: function(e) {
|
||||||
|
var h,
|
||||||
|
w,
|
||||||
|
de;
|
||||||
|
if (e) {
|
||||||
|
w = e.clientWidth;
|
||||||
|
h = e.clientHeight
|
||||||
|
} else {
|
||||||
|
de = document.documentElement;
|
||||||
|
w = window.innerWidth || self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
|
||||||
|
h = window.innerHeight || self.innerHeight || (de && de.clientHeight) || document.body.clientHeight
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
w: w,
|
||||||
|
h: h
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getScroll: function(e) {
|
||||||
|
var t,
|
||||||
|
l,
|
||||||
|
w,
|
||||||
|
h,
|
||||||
|
iw,
|
||||||
|
ih;
|
||||||
|
if (e && e.nodeName.toLowerCase() != 'body') {
|
||||||
|
t = e.scrollTop;
|
||||||
|
l = e.scrollLeft;
|
||||||
|
w = e.scrollWidth;
|
||||||
|
h = e.scrollHeight;
|
||||||
|
iw = 0;
|
||||||
|
ih = 0
|
||||||
|
} else {
|
||||||
|
if (document.documentElement && document.documentElement.scrollTop) {
|
||||||
|
t = document.documentElement.scrollTop;
|
||||||
|
l = document.documentElement.scrollLeft;
|
||||||
|
w = document.documentElement.scrollWidth;
|
||||||
|
h = document.documentElement.scrollHeight
|
||||||
|
} else if (document.body) {
|
||||||
|
t = document.body.scrollTop;
|
||||||
|
l = document.body.scrollLeft;
|
||||||
|
w = document.body.scrollWidth;
|
||||||
|
h = document.body.scrollHeight
|
||||||
|
}
|
||||||
|
iw = self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
|
||||||
|
ih = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
t: t,
|
||||||
|
l: l,
|
||||||
|
w: w,
|
||||||
|
h: h,
|
||||||
|
iw: iw,
|
||||||
|
ih: ih
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getMargins: function(e, toInteger) {
|
||||||
|
var el = jQuery(e);
|
||||||
|
var t = el.css('marginTop') || '';
|
||||||
|
var r = el.css('marginRight') || '';
|
||||||
|
var b = el.css('marginBottom') || '';
|
||||||
|
var l = el.css('marginLeft') || '';
|
||||||
|
if (toInteger) return {
|
||||||
|
t: parseInt(t) || 0,
|
||||||
|
r: parseInt(r) || 0,
|
||||||
|
b: parseInt(b) || 0,
|
||||||
|
l: parseInt(l)
|
||||||
|
};
|
||||||
|
else return {
|
||||||
|
t: t,
|
||||||
|
r: r,
|
||||||
|
b: b,
|
||||||
|
l: l
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getPadding: function(e, toInteger) {
|
||||||
|
var el = jQuery(e);
|
||||||
|
var t = el.css('paddingTop') || '';
|
||||||
|
var r = el.css('paddingRight') || '';
|
||||||
|
var b = el.css('paddingBottom') || '';
|
||||||
|
var l = el.css('paddingLeft') || '';
|
||||||
|
if (toInteger) return {
|
||||||
|
t: parseInt(t) || 0,
|
||||||
|
r: parseInt(r) || 0,
|
||||||
|
b: parseInt(b) || 0,
|
||||||
|
l: parseInt(l)
|
||||||
|
};
|
||||||
|
else return {
|
||||||
|
t: t,
|
||||||
|
r: r,
|
||||||
|
b: b,
|
||||||
|
l: l
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getBorder: function(e, toInteger) {
|
||||||
|
var el = jQuery(e);
|
||||||
|
var t = el.css('borderTopWidth') || '';
|
||||||
|
var r = el.css('borderRightWidth') || '';
|
||||||
|
var b = el.css('borderBottomWidth') || '';
|
||||||
|
var l = el.css('borderLeftWidth') || '';
|
||||||
|
if (toInteger) return {
|
||||||
|
t: parseInt(t) || 0,
|
||||||
|
r: parseInt(r) || 0,
|
||||||
|
b: parseInt(b) || 0,
|
||||||
|
l: parseInt(l) || 0
|
||||||
|
};
|
||||||
|
else return {
|
||||||
|
t: t,
|
||||||
|
r: r,
|
||||||
|
b: b,
|
||||||
|
l: l
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getPointer: function(event) {
|
||||||
|
var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)) || 0;
|
||||||
|
var y = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)) || 0;
|
||||||
|
return {
|
||||||
|
x: x,
|
||||||
|
y: y
|
||||||
|
}
|
||||||
|
},
|
||||||
|
traverseDOM: function(nodeEl, func) {
|
||||||
|
func(nodeEl);
|
||||||
|
nodeEl = nodeEl.firstChild;
|
||||||
|
while (nodeEl) {
|
||||||
|
jQuery.iUtil.traverseDOM(nodeEl, func);
|
||||||
|
nodeEl = nodeEl.nextSibling
|
||||||
|
}
|
||||||
|
},
|
||||||
|
purgeEvents: function(nodeEl) {
|
||||||
|
jQuery.iUtil.traverseDOM(nodeEl,
|
||||||
|
function(el) {
|
||||||
|
for (var attr in el) {
|
||||||
|
if (typeof el[attr] === 'function') {
|
||||||
|
el[attr] = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
centerEl: function(el, axis) {
|
||||||
|
var clientScroll = $.iUtil.getScroll();
|
||||||
|
var windowSize = $.iUtil.getSize(el);
|
||||||
|
if (!axis || axis == 'vertically') $(el).css({
|
||||||
|
top: clientScroll.t + ((Math.max(clientScroll.h, clientScroll.ih) - clientScroll.t - windowSize.hb) / 2) + 'px'
|
||||||
|
});
|
||||||
|
if (!axis || axis == 'horizontally') $(el).css({
|
||||||
|
left: clientScroll.l + ((Math.max(clientScroll.w, clientScroll.iw) - clientScroll.l - windowSize.wb) / 2) + 'px'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fixPNG: function(el, emptyGIF) {
|
||||||
|
var images = $('img[@src*="png"]', el || document),
|
||||||
|
png;
|
||||||
|
images.each(function() {
|
||||||
|
png = this.src;
|
||||||
|
this.src = emptyGIF;
|
||||||
|
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + png + "')"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}; [].indexOf || (Array.prototype.indexOf = function(v, n) {
|
||||||
|
n = (n == null) ? 0: n;
|
||||||
|
var m = this.length;
|
||||||
|
for (var i = n; i < m; i++) if (this[i] == v) return i;
|
||||||
|
return - 1
|
||||||
|
});
|
||||||
|
jQuery.fxCheckTag = function(e) {
|
||||||
|
if (/^tr$|^td$|^tbody$|^caption$|^thead$|^tfoot$|^col$|^colgroup$|^th$|^body$|^header$|^script$|^frame$|^frameset$|^option$|^optgroup$|^meta$/i.test(e.nodeName)) return false;
|
||||||
|
else return true
|
||||||
|
};
|
||||||
|
jQuery.fx.destroyWrapper = function(e, old) {
|
||||||
|
var c = e.firstChild;
|
||||||
|
var cs = c.style;
|
||||||
|
cs.position = old.position;
|
||||||
|
cs.marginTop = old.margins.t;
|
||||||
|
cs.marginLeft = old.margins.l;
|
||||||
|
cs.marginBottom = old.margins.b;
|
||||||
|
cs.marginRight = old.margins.r;
|
||||||
|
cs.top = old.top + 'px';
|
||||||
|
cs.left = old.left + 'px';
|
||||||
|
e.parentNode.insertBefore(c, e);
|
||||||
|
e.parentNode.removeChild(e)
|
||||||
|
};
|
||||||
|
jQuery.fx.buildWrapper = function(e) {
|
||||||
|
if (!jQuery.fxCheckTag(e)) return false;
|
||||||
|
var t = jQuery(e);
|
||||||
|
var es = e.style;
|
||||||
|
var restoreStyle = false;
|
||||||
|
var oldStyle = {};
|
||||||
|
oldStyle.position = t.css('position');
|
||||||
|
if (t.css('display') == 'none') {
|
||||||
|
oldVisibility = t.css('visibility');
|
||||||
|
es.visibility = 'hidden';
|
||||||
|
es.display = '';
|
||||||
|
restoreStyle = true
|
||||||
|
}
|
||||||
|
oldStyle.sizes = jQuery.iUtil.getSize(e);
|
||||||
|
oldStyle.margins = jQuery.iUtil.getMargins(e);
|
||||||
|
var oldFloat = e.currentStyle ? e.currentStyle.styleFloat: t.css('float');
|
||||||
|
oldStyle.top = parseInt(t.css('top')) || 0;
|
||||||
|
oldStyle.left = parseInt(t.css('left')) || 0;
|
||||||
|
var wid = 'w_' + parseInt(Math.random() * 10000);
|
||||||
|
var wr = document.createElement(/^img$|^br$|^input$|^hr$|^select$|^textarea$|^object$|^iframe$|^button$|^form$|^table$|^ul$|^dl$|^ol$/i.test(e.nodeName) ? 'div': e.nodeName);
|
||||||
|
jQuery.attr(wr, 'id', wid);
|
||||||
|
wr.className = 'fxWrapper';
|
||||||
|
var wrs = wr.style;
|
||||||
|
var top = 0;
|
||||||
|
var left = 0;
|
||||||
|
if (oldStyle.position == 'relative' || oldStyle.position == 'absolute') {
|
||||||
|
top = oldStyle.top;
|
||||||
|
left = oldStyle.left
|
||||||
|
}
|
||||||
|
wrs.display = 'none';
|
||||||
|
wrs.top = top + 'px';
|
||||||
|
wrs.left = left + 'px';
|
||||||
|
wrs.position = oldStyle.position != 'relative' && oldStyle.position != 'absolute' ? 'relative': oldStyle.position;
|
||||||
|
wrs.overflow = 'hidden';
|
||||||
|
wrs.height = oldStyle.sizes.hb + 'px';
|
||||||
|
wrs.width = oldStyle.sizes.wb + 'px';
|
||||||
|
wrs.marginTop = oldStyle.margins.t;
|
||||||
|
wrs.marginRight = oldStyle.margins.r;
|
||||||
|
wrs.marginBottom = oldStyle.margins.b;
|
||||||
|
wrs.marginLeft = oldStyle.margins.l;
|
||||||
|
if (jQuery.browser.msie) {
|
||||||
|
wrs.styleFloat = oldFloat
|
||||||
|
} else {
|
||||||
|
wrs.cssFloat = oldFloat
|
||||||
|
}
|
||||||
|
e.parentNode.insertBefore(wr, e);
|
||||||
|
es.marginTop = '0px';
|
||||||
|
es.marginRight = '0px';
|
||||||
|
es.marginBottom = '0px';
|
||||||
|
es.marginLeft = '0px';
|
||||||
|
es.position = 'absolute';
|
||||||
|
es.listStyle = 'none';
|
||||||
|
es.top = '0px';
|
||||||
|
es.left = '0px';
|
||||||
|
if (restoreStyle) {
|
||||||
|
es.display = 'none';
|
||||||
|
es.visibility = oldVisibility
|
||||||
|
}
|
||||||
|
wr.appendChild(e);
|
||||||
|
wrs.display = 'block';
|
||||||
|
return {
|
||||||
|
oldStyle: oldStyle,
|
||||||
|
wrapper: jQuery(wr)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
jQuery.fx.namedColors = {
|
||||||
|
aqua: [0, 255, 255],
|
||||||
|
azure: [240, 255, 255],
|
||||||
|
beige: [245, 245, 220],
|
||||||
|
black: [0, 0, 0],
|
||||||
|
blue: [0, 0, 255],
|
||||||
|
brown: [165, 42, 42],
|
||||||
|
cyan: [0, 255, 255],
|
||||||
|
darkblue: [0, 0, 139],
|
||||||
|
darkcyan: [0, 139, 139],
|
||||||
|
darkgrey: [169, 169, 169],
|
||||||
|
darkgreen: [0, 100, 0],
|
||||||
|
darkkhaki: [189, 183, 107],
|
||||||
|
darkmagenta: [139, 0, 139],
|
||||||
|
darkolivegreen: [85, 107, 47],
|
||||||
|
darkorange: [255, 140, 0],
|
||||||
|
darkorchid: [153, 50, 204],
|
||||||
|
darkred: [139, 0, 0],
|
||||||
|
darksalmon: [233, 150, 122],
|
||||||
|
darkviolet: [148, 0, 211],
|
||||||
|
fuchsia: [255, 0, 255],
|
||||||
|
gold: [255, 215, 0],
|
||||||
|
green: [0, 128, 0],
|
||||||
|
indigo: [75, 0, 130],
|
||||||
|
khaki: [240, 230, 140],
|
||||||
|
lightblue: [173, 216, 230],
|
||||||
|
lightcyan: [224, 255, 255],
|
||||||
|
lightgreen: [144, 238, 144],
|
||||||
|
lightgrey: [211, 211, 211],
|
||||||
|
lightpink: [255, 182, 193],
|
||||||
|
lightyellow: [255, 255, 224],
|
||||||
|
lime: [0, 255, 0],
|
||||||
|
magenta: [255, 0, 255],
|
||||||
|
maroon: [128, 0, 0],
|
||||||
|
navy: [0, 0, 128],
|
||||||
|
olive: [128, 128, 0],
|
||||||
|
orange: [255, 165, 0],
|
||||||
|
pink: [255, 192, 203],
|
||||||
|
purple: [128, 0, 128],
|
||||||
|
red: [255, 0, 0],
|
||||||
|
silver: [192, 192, 192],
|
||||||
|
white: [255, 255, 255],
|
||||||
|
yellow: [255, 255, 0]
|
||||||
|
};
|
||||||
|
jQuery.fx.parseColor = function(color, notColor) {
|
||||||
|
if (jQuery.fx.namedColors[color]) return {
|
||||||
|
r: jQuery.fx.namedColors[color][0],
|
||||||
|
g: jQuery.fx.namedColors[color][1],
|
||||||
|
b: jQuery.fx.namedColors[color][2]
|
||||||
|
};
|
||||||
|
else if (result = /^rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)$/.exec(color)) return {
|
||||||
|
r: parseInt(result[1]),
|
||||||
|
g: parseInt(result[2]),
|
||||||
|
b: parseInt(result[3])
|
||||||
|
};
|
||||||
|
else if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)$/.exec(color)) return {
|
||||||
|
r: parseFloat(result[1]) * 2.55,
|
||||||
|
g: parseFloat(result[2]) * 2.55,
|
||||||
|
b: parseFloat(result[3]) * 2.55
|
||||||
|
};
|
||||||
|
else if (result = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/.exec(color)) return {
|
||||||
|
r: parseInt("0x" + result[1] + result[1]),
|
||||||
|
g: parseInt("0x" + result[2] + result[2]),
|
||||||
|
b: parseInt("0x" + result[3] + result[3])
|
||||||
|
};
|
||||||
|
else if (result = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec(color)) return {
|
||||||
|
r: parseInt("0x" + result[1]),
|
||||||
|
g: parseInt("0x" + result[2]),
|
||||||
|
b: parseInt("0x" + result[3])
|
||||||
|
};
|
||||||
|
else return notColor == true ? false: {
|
||||||
|
r: 255,
|
||||||
|
g: 255,
|
||||||
|
b: 255
|
||||||
|
}
|
||||||
|
};
|
||||||
|
jQuery.fx.cssProps = {
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderLeftWidth: 1,
|
||||||
|
borderRightWidth: 1,
|
||||||
|
borderTopWidth: 1,
|
||||||
|
bottom: 1,
|
||||||
|
fontSize: 1,
|
||||||
|
height: 1,
|
||||||
|
left: 1,
|
||||||
|
letterSpacing: 1,
|
||||||
|
lineHeight: 1,
|
||||||
|
marginBottom: 1,
|
||||||
|
marginLeft: 1,
|
||||||
|
marginRight: 1,
|
||||||
|
marginTop: 1,
|
||||||
|
maxHeight: 1,
|
||||||
|
maxWidth: 1,
|
||||||
|
minHeight: 1,
|
||||||
|
minWidth: 1,
|
||||||
|
opacity: 1,
|
||||||
|
outlineOffset: 1,
|
||||||
|
outlineWidth: 1,
|
||||||
|
paddingBottom: 1,
|
||||||
|
paddingLeft: 1,
|
||||||
|
paddingRight: 1,
|
||||||
|
paddingTop: 1,
|
||||||
|
right: 1,
|
||||||
|
textIndent: 1,
|
||||||
|
top: 1,
|
||||||
|
width: 1,
|
||||||
|
zIndex: 1
|
||||||
|
};
|
||||||
|
jQuery.fx.colorCssProps = {
|
||||||
|
backgroundColor: 1,
|
||||||
|
borderBottomColor: 1,
|
||||||
|
borderLeftColor: 1,
|
||||||
|
borderRightColor: 1,
|
||||||
|
borderTopColor: 1,
|
||||||
|
color: 1,
|
||||||
|
outlineColor: 1
|
||||||
|
};
|
||||||
|
jQuery.fx.cssSides = ['Top', 'Right', 'Bottom', 'Left'];
|
||||||
|
jQuery.fx.cssSidesEnd = {
|
||||||
|
'borderWidth': ['border', 'Width'],
|
||||||
|
'borderColor': ['border', 'Color'],
|
||||||
|
'margin': ['margin', ''],
|
||||||
|
'padding': ['padding', '']
|
||||||
|
};
|
||||||
|
jQuery.fn.extend({
|
||||||
|
animate: function(prop, speed, easing, callback) {
|
||||||
|
return this.queue(function() {
|
||||||
|
var opt = jQuery.speed(speed, easing, callback);
|
||||||
|
var e = new jQuery.fxe(this, opt, prop)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
pause: function(speed, callback) {
|
||||||
|
return this.queue(function() {
|
||||||
|
var opt = jQuery.speed(speed, callback);
|
||||||
|
var e = new jQuery.pause(this, opt)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
stop: function(step) {
|
||||||
|
return this.each(function() {
|
||||||
|
if (this.animationHandler) jQuery.stopAnim(this, step)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
stopAll: function(step) {
|
||||||
|
return this.each(function() {
|
||||||
|
if (this.animationHandler) jQuery.stopAnim(this, step);
|
||||||
|
if (this.queue && this.queue['fx']) this.queue.fx = []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
jQuery.extend({
|
||||||
|
pause: function(elem, options) {
|
||||||
|
var z = this,
|
||||||
|
values;
|
||||||
|
z.step = function() {
|
||||||
|
if (jQuery.isFunction(options.complete)) options.complete.apply(elem)
|
||||||
|
};
|
||||||
|
z.timer = setInterval(function() {
|
||||||
|
z.step()
|
||||||
|
},
|
||||||
|
options.duration);
|
||||||
|
elem.animationHandler = z
|
||||||
|
},
|
||||||
|
easing: {
|
||||||
|
linear: function(p, n, firstNum, delta, duration) {
|
||||||
|
return (( - Math.cos(p * Math.PI) / 2) + 0.5) * delta + firstNum
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fxe: function(elem, options, prop) {
|
||||||
|
var z = this,
|
||||||
|
values;
|
||||||
|
var y = elem.style;
|
||||||
|
var oldOverflow = jQuery.css(elem, "overflow");
|
||||||
|
var oldDisplay = jQuery.css(elem, "display");
|
||||||
|
var props = {};
|
||||||
|
z.startTime = (new Date()).getTime();
|
||||||
|
options.easing = options.easing && jQuery.easing[options.easing] ? options.easing: 'linear';
|
||||||
|
z.getValues = function(tp, vp) {
|
||||||
|
if (jQuery.fx.cssProps[tp]) {
|
||||||
|
if (vp == 'show' || vp == 'hide' || vp == 'toggle') {
|
||||||
|
if (!elem.orig) elem.orig = {};
|
||||||
|
var r = parseFloat(jQuery.css(elem, tp));
|
||||||
|
elem.orig[tp] = r && r > -10000 ? r: (parseFloat(jQuery.css(elem, tp)) || 0);
|
||||||
|
vp = vp == 'toggle' ? (oldDisplay == 'none' ? 'show': 'hide') : vp;
|
||||||
|
options[vp] = true;
|
||||||
|
props[tp] = vp == 'show' ? [0, elem.orig[tp]] : [elem.orig[tp], 0];
|
||||||
|
if (tp != 'opacity') y[tp] = props[tp][0] + (tp != 'zIndex' && tp != 'fontWeight' ? 'px': '');
|
||||||
|
else jQuery.attr(y, "opacity", props[tp][0])
|
||||||
|
} else {
|
||||||
|
props[tp] = [parseFloat(jQuery.css(elem, tp)), parseFloat(vp) || 0]
|
||||||
|
}
|
||||||
|
} else if (jQuery.fx.colorCssProps[tp]) props[tp] = [jQuery.fx.parseColor(jQuery.css(elem, tp)), jQuery.fx.parseColor(vp)];
|
||||||
|
else if (/^margin$|padding$|border$|borderColor$|borderWidth$/i.test(tp)) {
|
||||||
|
var m = vp.replace(/\s+/g, ' ').replace(/rgb\s*\(\s*/g, 'rgb(').replace(/\s*,\s*/g, ',').replace(/\s*\)/g, ')').match(/([^\s]+)/g);
|
||||||
|
switch (tp) {
|
||||||
|
case 'margin':
|
||||||
|
case 'padding':
|
||||||
|
case 'borderWidth':
|
||||||
|
case 'borderColor':
|
||||||
|
m[3] = m[3] || m[1] || m[0];
|
||||||
|
m[2] = m[2] || m[0];
|
||||||
|
m[1] = m[1] || m[0];
|
||||||
|
for (var i = 0; i < jQuery.fx.cssSides.length; i++) {
|
||||||
|
var nmp = jQuery.fx.cssSidesEnd[tp][0] + jQuery.fx.cssSides[i] + jQuery.fx.cssSidesEnd[tp][1];
|
||||||
|
props[nmp] = tp == 'borderColor' ? [jQuery.fx.parseColor(jQuery.css(elem, nmp)), jQuery.fx.parseColor(m[i])] : [parseFloat(jQuery.css(elem, nmp)), parseFloat(m[i])]
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'border':
|
||||||
|
for (var i = 0; i < m.length; i++) {
|
||||||
|
var floatVal = parseFloat(m[i]);
|
||||||
|
var sideEnd = !isNaN(floatVal) ? 'Width': (!/transparent|none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset/i.test(m[i]) ? 'Color': false);
|
||||||
|
if (sideEnd) {
|
||||||
|
for (var j = 0; j < jQuery.fx.cssSides.length; j++) {
|
||||||
|
nmp = 'border' + jQuery.fx.cssSides[j] + sideEnd;
|
||||||
|
props[nmp] = sideEnd == 'Color' ? [jQuery.fx.parseColor(jQuery.css(elem, nmp)), jQuery.fx.parseColor(m[i])] : [parseFloat(jQuery.css(elem, nmp)), floatVal]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
y['borderStyle'] = m[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
y[tp] = vp
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
};
|
||||||
|
for (p in prop) {
|
||||||
|
if (p == 'style') {
|
||||||
|
var newStyles = jQuery.parseStyle(prop[p]);
|
||||||
|
for (np in newStyles) {
|
||||||
|
this.getValues(np, newStyles[np])
|
||||||
|
}
|
||||||
|
} else if (p == 'className') {
|
||||||
|
if (document.styleSheets) for (var i = 0; i < document.styleSheets.length; i++) {
|
||||||
|
var cssRules = document.styleSheets[i].cssRules || document.styleSheets[i].rules || null;
|
||||||
|
if (cssRules) {
|
||||||
|
for (var j = 0; j < cssRules.length; j++) {
|
||||||
|
if (cssRules[j].selectorText == '.' + prop[p]) {
|
||||||
|
var rule = new RegExp('\.' + prop[p] + ' {');
|
||||||
|
var styles = cssRules[j].style.cssText;
|
||||||
|
var newStyles = jQuery.parseStyle(styles.replace(rule, '').replace(/}/g, ''));
|
||||||
|
for (np in newStyles) {
|
||||||
|
this.getValues(np, newStyles[np])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.getValues(p, prop[p])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
y.display = oldDisplay == 'none' ? 'block': oldDisplay;
|
||||||
|
y.overflow = 'hidden';
|
||||||
|
z.step = function() {
|
||||||
|
var t = (new Date()).getTime();
|
||||||
|
if (t > options.duration + z.startTime) {
|
||||||
|
clearInterval(z.timer);
|
||||||
|
z.timer = null;
|
||||||
|
for (p in props) {
|
||||||
|
if (p == "opacity") jQuery.attr(y, "opacity", props[p][1]);
|
||||||
|
else if (typeof props[p][1] == 'object') y[p] = 'rgb(' + props[p][1].r + ',' + props[p][1].g + ',' + props[p][1].b + ')';
|
||||||
|
else y[p] = props[p][1] + (p != 'zIndex' && p != 'fontWeight' ? 'px': '')
|
||||||
|
}
|
||||||
|
if (options.hide || options.show) for (var p in elem.orig) if (p == "opacity") jQuery.attr(y, p, elem.orig[p]);
|
||||||
|
else y[p] = "";
|
||||||
|
y.display = options.hide ? 'none': (oldDisplay != 'none' ? oldDisplay: 'block');
|
||||||
|
y.overflow = oldOverflow;
|
||||||
|
elem.animationHandler = null;
|
||||||
|
if (jQuery.isFunction(options.complete)) options.complete.apply(elem)
|
||||||
|
} else {
|
||||||
|
var n = t - this.startTime;
|
||||||
|
var pr = n / options.duration;
|
||||||
|
for (p in props) {
|
||||||
|
if (typeof props[p][1] == 'object') {
|
||||||
|
y[p] = 'rgb(' + parseInt(jQuery.easing[options.easing](pr, n, props[p][0].r, (props[p][1].r - props[p][0].r), options.duration)) + ',' + parseInt(jQuery.easing[options.easing](pr, n, props[p][0].g, (props[p][1].g - props[p][0].g), options.duration)) + ',' + parseInt(jQuery.easing[options.easing](pr, n, props[p][0].b, (props[p][1].b - props[p][0].b), options.duration)) + ')'
|
||||||
|
} else {
|
||||||
|
var pValue = jQuery.easing[options.easing](pr, n, props[p][0], (props[p][1] - props[p][0]), options.duration);
|
||||||
|
if (p == "opacity") jQuery.attr(y, "opacity", pValue);
|
||||||
|
else y[p] = pValue + (p != 'zIndex' && p != 'fontWeight' ? 'px': '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
z.timer = setInterval(function() {
|
||||||
|
z.step()
|
||||||
|
},
|
||||||
|
13);
|
||||||
|
elem.animationHandler = z
|
||||||
|
},
|
||||||
|
stopAnim: function(elem, step) {
|
||||||
|
if (step) elem.animationHandler.startTime -= 100000000;
|
||||||
|
else {
|
||||||
|
window.clearInterval(elem.animationHandler.timer);
|
||||||
|
elem.animationHandler = null;
|
||||||
|
jQuery.dequeue(elem, "fx")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
jQuery.parseStyle = function(styles) {
|
||||||
|
var newStyles = {};
|
||||||
|
if (typeof styles == 'string') {
|
||||||
|
styles = styles.toLowerCase().split(';');
|
||||||
|
for (var i = 0; i < styles.length; i++) {
|
||||||
|
rule = styles[i].split(':');
|
||||||
|
if (rule.length == 2) {
|
||||||
|
newStyles[jQuery.trim(rule[0].replace(/\-(\w)/g,
|
||||||
|
function(m, c) {
|
||||||
|
return c.toUpperCase()
|
||||||
|
}))] = jQuery.trim(rule[1])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return newStyles
|
||||||
|
};
|
||||||
|
jQuery.iFisheye = {
|
||||||
|
build: function(options) {
|
||||||
|
return this.each(function() {
|
||||||
|
var el = this;
|
||||||
|
el.fisheyeCfg = {
|
||||||
|
items: jQuery(options.items, this),
|
||||||
|
container: jQuery(options.container, this),
|
||||||
|
pos: jQuery.iUtil.getPosition(this),
|
||||||
|
itemWidth: options.itemWidth,
|
||||||
|
itemsText: options.itemsText,
|
||||||
|
proximity: options.proximity,
|
||||||
|
valign: options.valign,
|
||||||
|
halign: options.halign,
|
||||||
|
maxWidth: options.maxWidth
|
||||||
|
};
|
||||||
|
jQuery.iFisheye.positionContainer(el, 0);
|
||||||
|
jQuery(window).bind('resize',
|
||||||
|
function() {
|
||||||
|
el.fisheyeCfg.pos = jQuery.iUtil.getPosition(el);
|
||||||
|
jQuery.iFisheye.positionContainer(el, 0);
|
||||||
|
jQuery.iFisheye.positionItems(el)
|
||||||
|
});
|
||||||
|
jQuery.iFisheye.positionItems(el);
|
||||||
|
el.fisheyeCfg.items.bind('mouseover',
|
||||||
|
function() {
|
||||||
|
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'block'
|
||||||
|
}).bind('mouseout',
|
||||||
|
function() {
|
||||||
|
jQuery(el.fisheyeCfg.itemsText, this).get(0).style.display = 'none'
|
||||||
|
});
|
||||||
|
jQuery(document).bind('mousemove',
|
||||||
|
function(e) {
|
||||||
|
var pointer = jQuery.iUtil.getPointer(e);
|
||||||
|
var toAdd = 0;
|
||||||
|
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center') var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - el.fisheyeCfg.itemWidth / 2;
|
||||||
|
else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right') var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
|
||||||
|
else var posx = pointer.x - el.fisheyeCfg.pos.x;
|
||||||
|
var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight / 2, 2);
|
||||||
|
el.fisheyeCfg.items.each(function(nr) {
|
||||||
|
distance = Math.sqrt(Math.pow(posx - nr * el.fisheyeCfg.itemWidth, 2) + posy);
|
||||||
|
distance -= el.fisheyeCfg.itemWidth / 2;
|
||||||
|
distance = distance < 0 ? 0: distance;
|
||||||
|
distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity: distance;
|
||||||
|
distance = el.fisheyeCfg.proximity - distance;
|
||||||
|
extraWidth = el.fisheyeCfg.maxWidth * distance / el.fisheyeCfg.proximity;
|
||||||
|
this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
|
||||||
|
this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
|
||||||
|
toAdd += extraWidth
|
||||||
|
});
|
||||||
|
jQuery.iFisheye.positionContainer(el, toAdd)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
positionContainer: function(el, toAdd) {
|
||||||
|
if (el.fisheyeCfg.halign) if (el.fisheyeCfg.halign == 'center') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) / 2 - toAdd / 2 + 'px';
|
||||||
|
else if (el.fisheyeCfg.halign == 'left') el.fisheyeCfg.container.get(0).style.left = -toAdd / el.fisheyeCfg.items.size() + 'px';
|
||||||
|
else if (el.fisheyeCfg.halign == 'right') el.fisheyeCfg.container.get(0).style.left = (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size()) - toAdd / 2 + 'px';
|
||||||
|
el.fisheyeCfg.container.get(0).style.width = el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size() + toAdd + 'px'
|
||||||
|
},
|
||||||
|
positionItems: function(el) {
|
||||||
|
el.fisheyeCfg.items.each(function(nr) {
|
||||||
|
this.style.width = el.fisheyeCfg.itemWidth + 'px';
|
||||||
|
this.style.left = el.fisheyeCfg.itemWidth * nr + 'px'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
jQuery.fn.Fisheye = jQuery.iFisheye.build;
|
||||||
52
js/mac.js
52
js/mac.js
|
|
@ -2,7 +2,7 @@
|
||||||
* Created by Yuri2 on 2017/7/10.
|
* Created by Yuri2 on 2017/7/10.
|
||||||
*/
|
*/
|
||||||
window.Win10 = {
|
window.Win10 = {
|
||||||
_version:'v1.1.2.3',
|
_version:'v1.1.2.4',
|
||||||
_debug:true,
|
_debug:true,
|
||||||
_bgs:{
|
_bgs:{
|
||||||
main:'',
|
main:'',
|
||||||
|
|
@ -177,6 +177,7 @@ window.Win10 = {
|
||||||
btn.addClass('active');
|
btn.addClass('active');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
//渲染右键
|
||||||
_renderContextMenu:function (x,y,menu,trigger) {
|
_renderContextMenu:function (x,y,menu,trigger) {
|
||||||
this._removeContextMenu();
|
this._removeContextMenu();
|
||||||
if(menu===true){return;}
|
if(menu===true){return;}
|
||||||
|
|
@ -360,9 +361,11 @@ window.Win10 = {
|
||||||
zIndex:99999999999
|
zIndex:99999999999
|
||||||
}, function (value, i) {
|
}, function (value, i) {
|
||||||
layer.close(i);
|
layer.close(i);
|
||||||
|
layer.msg(Win10.lang('请稍候...','Hold on please...'),{time:1500},function () {
|
||||||
iframe.attr('src', value);
|
iframe.attr('src', value);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
$(document).on('mousedown','.win10-open-iframe',function () {
|
$(document).on('mousedown','.win10-open-iframe',function () {
|
||||||
var layero=$(this);
|
var layero=$(this);
|
||||||
Win10._settop(layero);
|
Win10._settop(layero);
|
||||||
|
|
@ -378,7 +381,9 @@ window.Win10 = {
|
||||||
$('#win10-menu .list .item.has-sub-up').toggleClass('has-sub-down').toggleClass('has-sub-up');
|
$('#win10-menu .list .item.has-sub-up').toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||||
$("#win10-menu .list .sub-item").slideUp();
|
$("#win10-menu .list .sub-item").slideUp();
|
||||||
}
|
}
|
||||||
|
if(e.next().hasClass('sub-item')){
|
||||||
e.toggleClass('has-sub-down').toggleClass('has-sub-up');
|
e.toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||||
|
}
|
||||||
while (e.next().hasClass('sub-item')){
|
while (e.next().hasClass('sub-item')){
|
||||||
e.next().slideToggle();
|
e.next().slideToggle();
|
||||||
e=e.next();
|
e=e.next();
|
||||||
|
|
@ -404,13 +409,6 @@ window.Win10 = {
|
||||||
setInterval(function () {
|
setInterval(function () {
|
||||||
//重新写mac时间
|
//重新写mac时间
|
||||||
var myDate = new Date();
|
var myDate = new Date();
|
||||||
/* var year=myDate.getFullYear();
|
|
||||||
var week=myDate.getDay();
|
|
||||||
var month=myDate.getMonth()+1;
|
|
||||||
var date=myDate.getDate();
|
|
||||||
var hours=myDate.getHours();
|
|
||||||
var mins=myDate.getMinutes();if (mins<10){mins='0'+mins} */
|
|
||||||
//$("#win10_btn_time").html(year+'/'+month+'/'+date+hours+':'+mins);
|
|
||||||
var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[myDate.getDay()];
|
var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[myDate.getDay()];
|
||||||
var hour=myDate.getHours();
|
var hour=myDate.getHours();
|
||||||
var mins=myDate.getMinutes();if (mins<10){mins='0'+mins}
|
var mins=myDate.getMinutes();if (mins<10){mins='0'+mins}
|
||||||
|
|
@ -430,8 +428,13 @@ window.Win10 = {
|
||||||
$("#win10_btn_time").html(week+hours+':'+mins);
|
$("#win10_btn_time").html(week+hours+':'+mins);
|
||||||
},1000);
|
},1000);
|
||||||
//离开前警告
|
//离开前警告
|
||||||
document.body.onbeforeunload = function(){
|
document.body.onbeforeunload = function(event){
|
||||||
window.event.returnValue = Win10.lang( '系统可能不会保存您所做的更改','The system may not save the changes you have made.');
|
var rel = Win10.lang( '系统可能不会保存您所做的更改','The system may not save the changes you have made.');
|
||||||
|
if(!window.event){
|
||||||
|
event.returnValue=rel;
|
||||||
|
}else{
|
||||||
|
window.event.returnValue=rel;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
Win10.buildList();//预处理左侧菜单
|
Win10.buildList();//预处理左侧菜单
|
||||||
Win10._startAnimate();//动画处理
|
Win10._startAnimate();//动画处理
|
||||||
|
|
@ -443,7 +446,7 @@ window.Win10 = {
|
||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
Win10.renderShortcuts();
|
Win10.renderShortcuts();
|
||||||
Win10._checkBgUrls();
|
Win10._checkBgUrls();
|
||||||
Win10._fixWindowsHeightAndWidth();
|
if(!Win10.isSmallScreen()) Win10._fixWindowsHeightAndWidth(); //2017年11月14日修改，加入了if条件
|
||||||
Win10.renderDocks();
|
Win10.renderDocks();
|
||||||
});
|
});
|
||||||
//细节
|
//细节
|
||||||
|
|
@ -460,7 +463,8 @@ window.Win10 = {
|
||||||
console.log(Win10.lang('本页由Win10-UI强力驱动\n更多信息：http://win10ui.yuri2.cn \nWin10-UI,轻松打造别具一格的后台界面 ','The page is strongly driven by Win10-UI.\nFor more info: http://win10ui.yuri2.cn.\n Win10-UI, easy to create a unique background interface.'))
|
console.log(Win10.lang('本页由Win10-UI强力驱动\n更多信息：http://win10ui.yuri2.cn \nWin10-UI,轻松打造别具一格的后台界面 ','The page is strongly driven by Win10-UI.\nFor more info: http://win10ui.yuri2.cn.\n Win10-UI, easy to create a unique background interface.'))
|
||||||
},2000);
|
},2000);
|
||||||
//点击清空右键菜单
|
//点击清空右键菜单
|
||||||
$(document).click(function () {
|
$(document).click(function (event) {
|
||||||
|
if(!event.button)
|
||||||
Win10._removeContextMenu();
|
Win10._removeContextMenu();
|
||||||
});
|
});
|
||||||
//禁用右键的右键
|
//禁用右键的右键
|
||||||
|
|
@ -602,16 +606,31 @@ window.Win10 = {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
//渲染DOCK
|
||||||
renderDocks:function () {
|
renderDocks:function () {
|
||||||
var cell_width=74;
|
$('#dock').Fisheye(
|
||||||
|
{
|
||||||
|
maxWidth: 70,
|
||||||
|
items: 'a',
|
||||||
|
itemsText: 'span',
|
||||||
|
container: '.dock-container',
|
||||||
|
itemWidth: 50,
|
||||||
|
proximity: 80,
|
||||||
|
alignment : 'left',
|
||||||
|
valign: 'bottom',
|
||||||
|
halign : 'center'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
var cell_width=50;
|
||||||
var width=document.body.clientWidth ;
|
var width=document.body.clientWidth ;
|
||||||
var docks=$("#footer .dock li");
|
var docks=$(".dock .dock-container a");
|
||||||
var max_num=parseInt(width/cell_width)-1;
|
var max_num=parseInt(width/cell_width)-1;
|
||||||
for (var i = 0; i < docks.length; i++) {
|
for (var i = 0; i < docks.length; i++) {
|
||||||
if (i>max_num) {
|
if (i>max_num) {
|
||||||
docks.eq(i).css('display','none');
|
docks.eq(i).hide();
|
||||||
}else{
|
}else{
|
||||||
docks.eq(i).css('display','list-item');
|
docks.eq(i).show();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -763,7 +782,6 @@ window.Win10 = {
|
||||||
layero_opened.css('z-index',Win10._countTask+813);
|
layero_opened.css('z-index',Win10._countTask+813);
|
||||||
Win10._settop(layero_opened);
|
Win10._settop(layero_opened);
|
||||||
//重新定义菜单布局
|
//重新定义菜单布局
|
||||||
//layero_opened.find('.layui-layer-setwin').prepend('<a class="win10-btn-change-url" index="' + index + '" href="#"><span class="fa fa-chain"></span></a><a class="win10-btn-refresh" index="' + index + '" href="#"><span class="fa fa-refresh"></span></a>');
|
|
||||||
layero_opened.find('.layui-layer-setwin').prepend('<a class="win10-btn-refresh" index="' + index + '" href="#"></a>');
|
layero_opened.find('.layui-layer-setwin').prepend('<a class="win10-btn-refresh" index="' + index + '" href="#"></a>');
|
||||||
layero_opened.find('.layui-layer-setwin .layui-layer-max').click(function () {
|
layero_opened.find('.layui-layer-setwin .layui-layer-max').click(function () {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
|
|
|
||||||
18
js/win10.js
18
js/win10.js
|
|
@ -2,7 +2,7 @@
|
||||||
* Created by Yuri2 on 2017/7/10.
|
* Created by Yuri2 on 2017/7/10.
|
||||||
*/
|
*/
|
||||||
window.Win10 = {
|
window.Win10 = {
|
||||||
_version:'v1.1.2.3',
|
_version:'v1.1.2.4',
|
||||||
_debug:true,
|
_debug:true,
|
||||||
_bgs:{
|
_bgs:{
|
||||||
main:'',
|
main:'',
|
||||||
|
|
@ -380,7 +380,9 @@ window.Win10 = {
|
||||||
$('#win10-menu .list .item.has-sub-up').toggleClass('has-sub-down').toggleClass('has-sub-up');
|
$('#win10-menu .list .item.has-sub-up').toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||||
$("#win10-menu .list .sub-item").slideUp();
|
$("#win10-menu .list .sub-item").slideUp();
|
||||||
}
|
}
|
||||||
|
if(e.next().hasClass('sub-item')){
|
||||||
e.toggleClass('has-sub-down').toggleClass('has-sub-up');
|
e.toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||||
|
}
|
||||||
while (e.next().hasClass('sub-item')){
|
while (e.next().hasClass('sub-item')){
|
||||||
e.next().slideToggle();
|
e.next().slideToggle();
|
||||||
e=e.next();
|
e=e.next();
|
||||||
|
|
@ -413,8 +415,13 @@ window.Win10 = {
|
||||||
$("#win10_btn_time").html(hours+':'+mins+'<br/>'+year+'/'+month+'/'+date);
|
$("#win10_btn_time").html(hours+':'+mins+'<br/>'+year+'/'+month+'/'+date);
|
||||||
},1000);
|
},1000);
|
||||||
//离开前警告
|
//离开前警告
|
||||||
document.body.onbeforeunload = function(){
|
document.body.onbeforeunload = function(event){
|
||||||
window.event.returnValue = Win10.lang( '系统可能不会保存您所做的更改','The system may not save the changes you have made.');
|
var rel = Win10.lang( '系统可能不会保存您所做的更改','The system may not save the changes you have made.');
|
||||||
|
if(!window.event){
|
||||||
|
event.returnValue=rel;
|
||||||
|
}else{
|
||||||
|
window.event.returnValue=rel;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
Win10.buildList();//预处理左侧菜单
|
Win10.buildList();//预处理左侧菜单
|
||||||
Win10._startAnimate();//动画处理
|
Win10._startAnimate();//动画处理
|
||||||
|
|
@ -426,7 +433,7 @@ window.Win10 = {
|
||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
Win10.renderShortcuts();
|
Win10.renderShortcuts();
|
||||||
Win10._checkBgUrls();
|
Win10._checkBgUrls();
|
||||||
Win10._fixWindowsHeightAndWidth();
|
if(!Win10.isSmallScreen()) Win10._fixWindowsHeightAndWidth(); //2017年11月14日修改，加入了if条件
|
||||||
});
|
});
|
||||||
//细节
|
//细节
|
||||||
$(document).on('focus',".win10-layer-open-browser textarea",function () {
|
$(document).on('focus',".win10-layer-open-browser textarea",function () {
|
||||||
|
|
@ -442,7 +449,8 @@ window.Win10 = {
|
||||||
console.log(Win10.lang('本页由Win10-UI强力驱动\n更多信息：http://win10ui.yuri2.cn \nWin10-UI,轻松打造别具一格的后台界面 ','The page is strongly driven by Win10-UI.\nFor more info: http://win10ui.yuri2.cn.\n Win10-UI, easy to create a unique background interface.'))
|
console.log(Win10.lang('本页由Win10-UI强力驱动\n更多信息：http://win10ui.yuri2.cn \nWin10-UI,轻松打造别具一格的后台界面 ','The page is strongly driven by Win10-UI.\nFor more info: http://win10ui.yuri2.cn.\n Win10-UI, easy to create a unique background interface.'))
|
||||||
},2000);
|
},2000);
|
||||||
//点击清空右键菜单
|
//点击清空右键菜单
|
||||||
$(document).click(function () {
|
$(document).click(function (event) {
|
||||||
|
if(!event.button)
|
||||||
Win10._removeContextMenu();
|
Win10._removeContextMenu();
|
||||||
});
|
});
|
||||||
//禁用右键的右键
|
//禁用右键的右键
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
/**
|
||||||
|
* 背景图片切换
|
||||||
|
* 创意：宝通
|
||||||
|
* 润色：Yuri2
|
||||||
|
* */
|
||||||
|
|
||||||
|
使用说明，将theme_switcher.html 作为子页
|
||||||
|
比如放在桌面图标或者开始菜单中
|
||||||
|
|
||||||
|
|
||||||
|
桌面图标的例子：
|
||||||
|
<div class="shortcut win10-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>
|
||||||
|
|
||||||
|
|
||||||
|
目录结构
|
||||||
|
|
||||||
|
win10-ui
|
||||||
|
-plugins
|
||||||
|
-theme_switcher
|
||||||
|
-css,js,html.....
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 844 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 473 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 339 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -0,0 +1,96 @@
|
||||||
|
/*themesetting*/
|
||||||
|
#theme_body {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_area {
|
||||||
|
z-index: 999;
|
||||||
|
padding: 10px 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_area a {
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.wallpaper_settingButton, a.theme_setting, div.theme_upload {
|
||||||
|
display: inline;
|
||||||
|
float: left;
|
||||||
|
margin: 5px 8px 5px 8px;
|
||||||
|
width: 180px;
|
||||||
|
height: 140px;
|
||||||
|
cursor: pointer;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-khtml-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
a.theme_setting {
|
||||||
|
background: #cbe7fc;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.theme_setting:hover {
|
||||||
|
background: #75c1f9
|
||||||
|
}
|
||||||
|
|
||||||
|
div.themeSetting_hover {
|
||||||
|
background: #75c1f9
|
||||||
|
}
|
||||||
|
|
||||||
|
div.theme_select, a.theme_select {
|
||||||
|
background: #75c1f9
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_icon {
|
||||||
|
margin: 5px auto;
|
||||||
|
padding-top: 3px;
|
||||||
|
width: 140px;
|
||||||
|
height: 100px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-khtml-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_icon img{
|
||||||
|
width: 140px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_text {
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_text a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_text a:link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.theme_upload {
|
||||||
|
background: #e9e9e9;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.theme_upload:hover{
|
||||||
|
background: #75c1f9
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h10 {
|
||||||
|
clear: both;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*end*/
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<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="./theme_switcher.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--主题设置-->
|
||||||
|
<div id="theme_body">
|
||||||
|
<div id="theme_area" class="theme_area">
|
||||||
|
<!--主题图片-->
|
||||||
|
<div id="btn-upload" class="theme_upload">
|
||||||
|
<div class="theme_icon" style="background-image: url(./bg/uploadbg.png);background-size:100% 100%;">
|
||||||
|
<form action="#" method="post" enctype="multipart/form-data">
|
||||||
|
<input style="opacity: 0;display: block;width:100%;height:100px;" type="file">
|
||||||
|
<input type="submit" class="theme_text" value="自定义上传">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h10"></div>
|
||||||
|
</div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
//此处预定义了背景数据，其实可以用ajax获取
|
||||||
|
var themes = [
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg1.jpg",
|
||||||
|
"thumb": "./bg/bg1_small.jpg",
|
||||||
|
"title": "win10"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg2.jpg",
|
||||||
|
"thumb": "./bg/bg2_small.jpg",
|
||||||
|
"title": "梦幻光影"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg3.jpg",
|
||||||
|
"thumb": "./bg/bg3_small.jpg",
|
||||||
|
"title": "扬帆起航"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg4.jpg",
|
||||||
|
"thumb": "./bg/bg4_small.jpg",
|
||||||
|
"title": "乡土气息"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg5.jpg",
|
||||||
|
"thumb": "./bg/bg5_small.jpg",
|
||||||
|
"title": "绿色清新"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg6.jpg",
|
||||||
|
"thumb": "./bg/bg6_small.jpg",
|
||||||
|
"title": "Win8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg7.jpg",
|
||||||
|
"thumb": "./bg/bg7_small.jpg",
|
||||||
|
"title": "蓝色海岸"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg8.jpg",
|
||||||
|
"thumb": "./bg/bg8_small.jpg",
|
||||||
|
"title": "冰天雪地"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg9.jpg",
|
||||||
|
"thumb": "./bg/bg9_small.jpg",
|
||||||
|
"title": "繁花满树"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg10.jpg",
|
||||||
|
"thumb": "./bg/bg10_small.jpg",
|
||||||
|
"title": "精灵小鸟"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg11.jpg",
|
||||||
|
"thumb": "./bg/bg11_small.jpg",
|
||||||
|
"title": "炫酷跑车"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg12.jpg",
|
||||||
|
"thumb": "./bg/bg12_small.jpg",
|
||||||
|
"title": "中国风"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg13.jpg",
|
||||||
|
"thumb": "./bg/bg13_small.jpg",
|
||||||
|
"title": "Winxp"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg14.jpg",
|
||||||
|
"thumb": "./bg/bg14_small.jpg",
|
||||||
|
"title": "淡雅唯美"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pic": "./plugins/theme_switcher/bg/bg15.jpg",
|
||||||
|
"thumb": "./bg/bg15_small.jpg",
|
||||||
|
"title": "Win7"
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
var theme_area=$("#theme_area");
|
||||||
|
theme_area.on('click','.theme_setting',function () {
|
||||||
|
var pic=$(this).data('pic');
|
||||||
|
Win10_parent.setBgUrl({main:pic});
|
||||||
|
|
||||||
|
//此处你也许想用ajax把修改信息保存到服务器。。。
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
themes.forEach(function (t) {
|
||||||
|
var theme=$("<a href=\"javascript:;\" data-pic=\""+t.pic+"\" class=\"theme_setting \">\n" +
|
||||||
|
" <div class=\"theme_icon\"><img src=\""+t.thumb+"\"></div>\n" +
|
||||||
|
" <div class=\"theme_text\">"+t.title+"</div>\n" +
|
||||||
|
" </a>");
|
||||||
|
theme_area.append(theme)
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue