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

消息中心点击效果的实现

This commit is contained in:
muzi_ys 2019-01-06 23:24:06 +08:00
parent b9e5514e9c
commit 80a3fe1268
4 changed files with 73 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/macdefault.css
View File

@ -607,7 +607,6 @@ body {
width: calc(100% - 20px);
min-height: 40px;
padding:10px;
margin-top: 4px;
transition: background-color 0.5s;
position: relative;
}
@ -617,19 +616,12 @@ body {
animation-duration: 0.5s;
}
#win10_command_center .msgs .msg:hover{
cursor: default;
background-color: rgba(255, 255, 255, 0.19);
}
#win10_command_center .msgs .msg:hover .title{
#win10_command_center .command-body .notice:hover .notice-body{
color: #333;
}
#win10_command_center .msgs .msg:hover>.btn_close_msg{
color: grey;
}
#win10_command_center .msgs .msg:hover>.content{
color: #333;
#win10_command_center .command-body .notice:hover>.notice-header .btn_close_msg{
color: grey;
}
#win10_command_center .msgs .msg>.title{
@ -638,13 +630,14 @@ body {
line-height: 28px;
}
#win10_command_center .msgs .msg>.btn_close_msg{
#win10_command_center .command-body .notice .notice-header>.btn_close_msg{
cursor: pointer;
color: transparent;
padding: 3px;
position: absolute;
top: 11px;
right: 11px;
margin-right: 8px;
font-size: 15px;
display: inline-block;
text-align: right;
float: right;
}
#win10_command_center .msgs .msg>.btn_close_msg:hover{

46
demo.html
View File

@ -33,7 +33,18 @@
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 () {
@ -106,11 +117,36 @@
</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 class="command-header">
<div class="tab-today active">今天</div>
<div class="tab-msg">通知</div>
</div>
<div class="msgs"></div>
<div class="command-body today">
<div class="command-body-calendar">
<div class="command-body-calendar-date normal-date">1月6日 星期日</div>
<div class="command-body-calendar-date lunar-date">戊戌年十二月初一</div>
</div>
<div class="notice">
<div class="notice-header">
<span class="notice-header-icon"><img src="./img/icon/weather.png" class="notice-header-icon-img" /></span>
<span class="notice-header-title">天气 </span>
</div>
<div class="notice-body">
<div class="weather-item">
<div class="weather-city">
<span class="weather-city-time">下午3:54</span>
<span class="weather-city-text">广州市</span>
</div>
<div class="weather-type">
<img src="http://yun.rili.cn/wnl/img/cloud.png" alt="多云" />
</div>
<div class="weather-temperature">17</div>
</div>
</div>
</div>
</div>
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
<div class="command-body msgs"></div>
</div>
<div id="win10_task_bar">
<div id="win10_btn_group_left" class="btn_group">

39
index.html
View File

@ -98,46 +98,9 @@
</div>
</div>
</div>
<div class="notice">
<div class="notice-header">
<span class="notice-header-icon"><img src="./img/icon/weather.png" class="notice-header-icon-img" /></span>
<span class="notice-header-title">天气 </span>
</div>
<div class="notice-body">
<div class="weather-item">
<div class="weather-city">
<span class="weather-city-time">下午3:54</span>
<span class="weather-city-text">广州市</span>
</div>
<div class="weather-type">
<img src="http://yun.rili.cn/wnl/img/cloud.png" alt="多云" />
</div>
<div class="weather-temperature">17</div>
</div>
</div>
</div>
</div>
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
<div class="command-body msgs">
<div class="notice">
<div class="notice-header">
<span class="notice-header-icon"><img src="./img/icon/weather.png" class="notice-header-icon-img" /></span>
<span class="notice-header-title">天气 </span>
</div>
<div class="notice-body">
<div class="weather-item">
<div class="weather-city">
<span class="weather-city-time">下午3:54</span>
<span class="weather-city-text">广州市</span>
</div>
<div class="weather-type">
<img src="http://yun.rili.cn/wnl/img/cloud.png" alt="多云" />
</div>
<div class="weather-temperature">17</div>
</div>
</div>
</div>
</div>
<div class="command-body msgs"></div>
</div>
<div id="win10_task_bar">
<div id="win10_btn_group_left" class="btn_group">

28
js/mac.js
View File

@ -295,14 +295,16 @@ window.Win10 = {
Win10.menuClose();
Win10.commandCenterClose();
});
$('#win10').on('click',".msg .btn_close_msg", function () {
var msg = $(this).parent();
$('#win10').on('click',".notice .btn_close_msg", function () {
var msg = $(this).parents('.notice');
console.log(msg);
$(msg).addClass('animated slideOutRight');
setTimeout(function () {
msg.remove()
}, 500)
});
//消息界面切换
$('#win10_command_center').on('click',".command-header .tab-today", function () {
if (!$(this).hasClass('active')) {
$('#win10_command_center .command-body.msgs').hide();
@ -311,6 +313,7 @@ window.Win10 = {
}
});
//消息界面切换
$('#win10_command_center').on('click',".command-header .tab-msg", function () {
if (!$(this).hasClass('active')) {
$('#win10_command_center .command-body.today').hide();
@ -654,12 +657,21 @@ window.Win10 = {
this.commandCenterClose();
}
},
newMsg: function (title, content,handle_click) {
var e = $('<div class="msg">' +
'<div class="title">' + title +'</div>'+
'<div class="content">' + content + '</div>' +
'<span class="btn_close_msg fa fa-close"></span>' +
'</div>');
newMsg: function (title,content,handle_click,app_name='提示消息',app_icon='<img src="./img/icon/weather.png" class="notice-header-icon-img" />',is_del=true) {
var msg = '<div class="notice">' +
'<div class="notice-header">' +
'<span class="notice-header-icon">'+app_icon+'</span>' +
'<span class="notice-header-title">'+app_name+'</span>';
if (is_del) {
msg += '<span class="btn_close_msg fa fa-times-circle"></span>';
}
msg +='</div>' +
'<div class="notice-body">' +
'<div class="msg">' +
'<div class="title">' + title +'</div>'+
'<div class="content">' + content + '</div>' +
'</div></div></div>';
var e = $(msg);
$("#win10_command_center .msgs").prepend(e);
e.find('.content:first,.title:first').click(function () {
if(handle_click){