mirror of https://github.com/1099438829/macUI.git
消息中心点击效果的实现
This commit is contained in:
parent
b9e5514e9c
commit
80a3fe1268
|
|
@ -607,7 +607,6 @@ body {
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
padding:10px;
|
padding:10px;
|
||||||
margin-top: 4px;
|
|
||||||
transition: background-color 0.5s;
|
transition: background-color 0.5s;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -617,19 +616,12 @@ body {
|
||||||
animation-duration: 0.5s;
|
animation-duration: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#win10_command_center .msgs .msg:hover{
|
#win10_command_center .command-body .notice:hover .notice-body{
|
||||||
cursor: default;
|
|
||||||
background-color: rgba(255, 255, 255, 0.19);
|
|
||||||
}
|
|
||||||
#win10_command_center .msgs .msg:hover .title{
|
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
#win10_command_center .msgs .msg:hover>.btn_close_msg{
|
|
||||||
color: grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
#win10_command_center .msgs .msg:hover>.content{
|
#win10_command_center .command-body .notice:hover>.notice-header .btn_close_msg{
|
||||||
color: #333;
|
color: grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
#win10_command_center .msgs .msg>.title{
|
#win10_command_center .msgs .msg>.title{
|
||||||
|
|
@ -638,13 +630,14 @@ body {
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#win10_command_center .msgs .msg>.btn_close_msg{
|
#win10_command_center .command-body .notice .notice-header>.btn_close_msg{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
padding: 3px;
|
margin-right: 8px;
|
||||||
position: absolute;
|
font-size: 15px;
|
||||||
top: 11px;
|
display: inline-block;
|
||||||
right: 11px;
|
text-align: right;
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#win10_command_center .msgs .msg>.btn_close_msg:hover{
|
#win10_command_center .msgs .msg>.btn_close_msg:hover{
|
||||||
|
|
|
||||||
48
demo.html
48
demo.html
|
|
@ -33,7 +33,18 @@
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
|
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
|
||||||
Win10.enableFullScreen();
|
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);
|
}, 1500);
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
|
|
@ -106,12 +117,37 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="win10_command_center" class="hidden_right">
|
<div id="win10_command_center" class="hidden_right">
|
||||||
<div class="title">
|
<div class="command-header">
|
||||||
<h4 style="float: left">消息中心 </h4>
|
<div class="tab-today active">今天</div>
|
||||||
<span id="win10_btn_command_center_clean_all">全部清除</span>
|
<div class="tab-msg">通知</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="msgs"></div>
|
<div class="command-body today">
|
||||||
</div>
|
<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_task_bar">
|
||||||
<div id="win10_btn_group_left" class="btn_group">
|
<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="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||||
|
|
|
||||||
39
index.html
39
index.html
|
|
@ -98,46 +98,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
|
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
|
||||||
<div class="command-body msgs">
|
<div class="command-body msgs"></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>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="win10_task_bar">
|
<div id="win10_task_bar">
|
||||||
<div id="win10_btn_group_left" class="btn_group">
|
<div id="win10_btn_group_left" class="btn_group">
|
||||||
|
|
|
||||||
30
js/mac.js
30
js/mac.js
|
|
@ -295,14 +295,16 @@ window.Win10 = {
|
||||||
Win10.menuClose();
|
Win10.menuClose();
|
||||||
Win10.commandCenterClose();
|
Win10.commandCenterClose();
|
||||||
});
|
});
|
||||||
$('#win10').on('click',".msg .btn_close_msg", function () {
|
$('#win10').on('click',".notice .btn_close_msg", function () {
|
||||||
var msg = $(this).parent();
|
var msg = $(this).parents('.notice');
|
||||||
|
console.log(msg);
|
||||||
$(msg).addClass('animated slideOutRight');
|
$(msg).addClass('animated slideOutRight');
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
msg.remove()
|
msg.remove()
|
||||||
}, 500)
|
}, 500)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//消息界面切换
|
||||||
$('#win10_command_center').on('click',".command-header .tab-today", function () {
|
$('#win10_command_center').on('click',".command-header .tab-today", function () {
|
||||||
if (!$(this).hasClass('active')) {
|
if (!$(this).hasClass('active')) {
|
||||||
$('#win10_command_center .command-body.msgs').hide();
|
$('#win10_command_center .command-body.msgs').hide();
|
||||||
|
|
@ -310,7 +312,8 @@ window.Win10 = {
|
||||||
$(this).addClass('active').siblings('div').removeClass('active');
|
$(this).addClass('active').siblings('div').removeClass('active');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//消息界面切换
|
||||||
$('#win10_command_center').on('click',".command-header .tab-msg", function () {
|
$('#win10_command_center').on('click',".command-header .tab-msg", function () {
|
||||||
if (!$(this).hasClass('active')) {
|
if (!$(this).hasClass('active')) {
|
||||||
$('#win10_command_center .command-body.today').hide();
|
$('#win10_command_center .command-body.today').hide();
|
||||||
|
|
@ -654,12 +657,21 @@ window.Win10 = {
|
||||||
this.commandCenterClose();
|
this.commandCenterClose();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
newMsg: function (title, content,handle_click) {
|
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 e = $('<div class="msg">' +
|
var msg = '<div class="notice">' +
|
||||||
'<div class="title">' + title +'</div>'+
|
'<div class="notice-header">' +
|
||||||
'<div class="content">' + content + '</div>' +
|
'<span class="notice-header-icon">'+app_icon+'</span>' +
|
||||||
'<span class="btn_close_msg fa fa-close"></span>' +
|
'<span class="notice-header-title">'+app_name+'</span>';
|
||||||
'</div>');
|
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);
|
$("#win10_command_center .msgs").prepend(e);
|
||||||
e.find('.content:first,.title:first').click(function () {
|
e.find('.content:first,.title:first').click(function () {
|
||||||
if(handle_click){
|
if(handle_click){
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue