diff --git a/broadcast.html b/broadcast.html index c925c32..b65f4b6 100644 --- a/broadcast.html +++ b/broadcast.html @@ -32,7 +32,7 @@ -

YLUI已出炉

+

MACUI已出炉

编辑日期 2018/06/20

MAC-UI华丽上线

diff --git a/css/default.css b/css/default.css deleted file mode 100644 index f1fc4f7..0000000 --- a/css/default.css +++ /dev/null @@ -1,779 +0,0 @@ -html { - height: 100%; -} - -body { - padding: 0; - margin: 0; - height: 100%; - overflow: hidden; -} - -#win10 *{ - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none; -} - -#win10-login{ - background: black no-repeat fixed; - width: 100%; - height: 100%; - background-size: 100% 100%; - position: fixed; - z-index: -1; - top:0; - left:0; -} - -#win10 { - width: 100%; - height: 100%; - background: black no-repeat fixed; - background-size: 100% 100%; - position: relative; - /*padding-top: 20px;*/ -} - -#win10 *{ - scrollbar-arrow-color: #5e6a5c;); /*图6,三角箭头的颜色*/ - scrollbar-face-color: #5e6a5c; /*图5,立体滚动条的颜色*/ - scrollbar-3dlight-color: #5e6a5c; /*图1,立体滚动条亮边的颜色*/ - scrollbar-highlight-color: #5e6a5c; /*图2,滚动条空白部分的颜色*/ - scrollbar-shadow-color: #5e6a5c; /*图3,立体滚动条阴影的颜色*/ - scrollbar-darkshadow-color: #5e6a5c; /*图4,立体滚动条强阴影的颜色*/ - scrollbar-track-color: rgba(74, 84, 78, 0.41); /*图7,立体滚动条背景颜色*/ - scrollbar-base-color:#5e6a5c; /*滚动条的基本颜色*/ -} - -#win10 hr { height:0px; border-top:1px solid #999; border-right:0px; border-bottom:0px; border-left:0px; } - -#win10 .desktop { - width: 100%; - height: 100%; -} - -#win10_task_bar { - width: 100%; - position: fixed; - bottom: 0; - height: 40px; - background-color: rgba(19, 23, 28, 0.9); - z-index: 19930813; -} - -#win10 .btn_group { - height: 100%; -} - -#win10 .btn_group .btn { - float: left; - color: white; - text-align: center; - line-height: 40px; - height: 100%; - text-overflow:ellipsis; - overflow: hidden; - transition: background-color 0.3s; -} - -#win10 .btn_group .btn:hover { - background-color: rgba(106, 105, 100, 0.71); - cursor: pointer; -} - -#win10_btn_group_left{ - float: left; - overflow: auto; - max-width:200px; -} - -#win10_btn_group_middle{ - float: left; - width:calc(100% - 240px); - overflow: auto; -} -#win10_btn_group_middle .btn_close{ - position: absolute; - right: 0; - width: 20px; - text-align: center; - color: transparent; -} -#win10_btn_group_middle .btn:hover .btn_close{ - color: rgba(131, 168, 157, 0.71); -} -#win10_btn_group_middle .btn:hover .btn_close:hover{ - color: white; -} - -#win10_btn_group_middle .btn_title{ - float: left; - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - text-align: left; - white-space: nowrap; -} - -#win10_btn_group_middle::-webkit-scrollbar { - width: 2px; -} - -#win10_btn_group_middle::-webkit-scrollbar-track { - background-color: #808080; -} - -#win10_btn_group_middle::-webkit-scrollbar-thumb { - background-color: rgba(30, 39, 34, 0.41); -} - -#win10_btn_group_right{ - float: right; - max-width:200px; - overflow: auto; -} - -#win10_btn_group_left .btn { - height: 100%; - width: 48px; - overflow: hidden; - font-size: 20px; -} - -#win10_btn_group_right .btn { - height: 100%; - min-width: 4px; - padding: 0 10px; - font-size: 12px ; -} - -#win10_btn_show_desktop { - border-left: grey 1px solid; - width: 4px; - margin-left: 3px; - padding: 0 !important -} - -#win10_btn_time { - font-size: 12px; - line-height: 20px !important -} -#win10-menu { - position: fixed; - bottom: 41px; - background-color: rgba(19,23,28,0.81); - height: 60%; - width: 75%; - max-width: 880px; - overflow: auto; - padding-left:10px; - z-index: 1000; - overflow-y: hidden; - transition: bottom 0.5s ; -} - -#win10-menu.hidden { - bottom:-70%; -} - -#win10-menu .blocks::-webkit-scrollbar,.list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -#win10-menu .blocks::-webkit-scrollbar-track,.list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track { - background-color: rgba(74, 84, 78, 0.41); -} - -#win10-menu .blocks::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb { - background-color: #6a6a6a; -} - -#win10-menu .blocks::-webkit-scrollbar-button ,.list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button { - /*background-color: #6a6a6a;*/ -} - -#win10-menu .list,.blocks{ - float: left; - width: 180px; - height:100%; - overflow: auto; - -webkit-animation-duration: 0.5s; - animation-duration: 0.5s; -} - -#win10-menu .list{ - width:240px; - padding:0 10px; - padding-top: 5px; - font-size: 12px; - height: 100%; -} - -#win10-menu .list .item.has-sub-down::after{ - font: normal normal normal 14px/1 FontAwesome; - content:"\f107"; - line-height: inherit; - float: right; -} - -#win10-menu .list .item.has-sub-up::after{ - font: normal normal normal 14px/1 FontAwesome; - content:"\f106"; - line-height: inherit; - float: right; -} - -#win10-menu .list .item,.sub-item{ - color:white; - margin: 1px 0; - line-height: 40px; - padding: 0 10px; - text-overflow: ellipsis; - overflow: hidden; - transition: background-color 0.3s; - position: relative; - width: calc(100% - 20px); -} - -#win10-menu .list .item>.icon,#win10-menu .list .sub-item>.icon,.sub-item>.icon{ - line-height: 36px; - font-size: 22px; - float: left; - margin-right: 0.5em; - width: 36px; - position: relative; - top:2px; - background-color: grey; - -} - -#win10-menu .list .sub-item{ - padding-left:30px; - width: calc(100% - 40px); -} - -#win10-menu .list .item:hover,.sub-item:hover{ - background-color: rgba(72,72,72,0.58); - cursor: pointer; -} - -#win10-menu .blocks{ - max-width: 650px; - width:calc(100% - 260px); -} - -#win10-menu-switcher{ - position: absolute; - height: 100%; - border-left: 1px solid grey; - top: 0; - right: 0; - display: none; - width: 30px; - cursor: pointer; -} - -#win10-menu-switcher:active{ - background-color: rgba(92, 109, 92, 0.81); -} - -#win10-menu .menu_group { - float: left; - width: 300px; - color: white; - position: relative; - overflow: hidden; - margin-bottom: 20px; -} - -#win10-menu .menu_group .title { - padding: 5px; - padding-top: 12px; - font-size: 13px; -} - -#win10-menu .menu_group:hover .title::after{ - font: normal normal normal 14px/1 FontAwesome; - content:"\f0c9"; - line-height: inherit; - float: right; - margin-right: 17px; - color: grey; -} - -#win10-menu .menu_group .block { - padding: 0; - background-color: transparent; - float: left; - box-sizing: border-box; - border: 2px solid transparent; - overflow: hidden; - position: absolute; - top: 40px; - left: 0; - cursor: default; - font-size: 16px; -} - -#win10-menu .menu_group .block .content { - background-color: rgba(0, 196, 255, 0.55); - width: calc(100% + 4px); - height: calc(100% + 4px); - position: absolute; - left: -2px;top: -2px; - overflow: hidden; - transition: left 0.5s; -} - -#win10-menu .menu_group .block:hover .content.cover{ - left: calc(-100% - 4px); -} - -#win10-menu .menu_group .block .content.detail{ - left: calc(100% + 4px); -} -#win10-menu .menu_group .block:hover .content.detail{ - left: -2px; -} - -#win10-menu .menu_group .block:hover { - border: 2px solid white; -} - -#win10 #win10-shortcuts { - height: calc(100% - 40px); - position: absolute; - left: 0;top: 0; - z-index: 100; -} - -#win10 #win10-shortcuts.shortcuts-hidden .shortcut{display: none} - -#win10 #win10-shortcuts .shortcut { - width: 80px; - overflow: hidden; - cursor: pointer; - padding: 0; - position: absolute; - transition: all 0.5s; -} - -#win10 #win10-shortcuts .shortcut:hover { - background-color: rgba(255, 255, 255, 0.11); -} - -#win10 #win10-shortcuts .shortcut>.icon { - width: 50px; - height: 50px; - overflow: hidden; - margin: 0 auto; - color: white; - box-sizing: border-box; - margin-bottom: 5px; - margin-top: 5px; - text-align: center; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - display: block; - font-size: 37px; - line-height: 50px; -} - -#win10-shortcuts .shortcut .title { - color: white; - font-size: 12px; - text-align: center; - line-height: 18px; - margin-bottom: 5px; -} - -#win10_command_center { - position: fixed; - right: 0; - bottom: 41px; - width: 350px; - background-color: rgba(19,23,28,0.81); - height: calc(100% - 42px); - transition: all 0.5s; - overflow-x: hidden; - overflow-y: auto; - color: white; - box-sizing: border-box; - z-index: 1000; -} - -#win10_command_center.hidden_right { - right: -350px; -} - -#win10_command_center > .title{ - position: absolute; - top: 0; - left: 0; - width: 100%; - padding-left: 10px; - transition: background-color 0.5s; -} - -#win10_command_center > .title:hover{ - background-color: rgba(255, 255, 255, 0.19); -} - -#win10_btn_group_right #win10_btn_command{ - font-size: 20px; -} -#win10_btn_command .msgNof{ - position: fixed; - right: 0; - bottom: 20px; - border: 1px solid red; - background-color: red; - color: white; - border-radius: 3px; -} -#win10_btn_command_center_clean_all{ - color: grey; - text-align: right; - font-size:12px; - float: right; - margin-top:40px; - margin-right:24px; - transition: color 0.5s; -} - -#win10_btn_command_center_clean_all:hover{ - cursor: pointer; - color:white; -} - -#win10_command_center .msgs{ - position: absolute; - top:60px; - left: 0; - width: 100%; - overflow: hidden; - /*padding: 10px;*/ -} - -#win10_command_center .btn_close_msg{ - line-height: inherit; - transition: color 0.5s ; -} - -#win10_command_center .msgs .msg{ - width: calc(100% - 20px); - min-height: 40px; - padding:10px; - margin-top: 4px; - transition: background-color 0.5s; - position: relative; -} - -#win10_command_center .msgs .msg.animated{ - -webkit-animation-duration: 0.5s; - 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{ - color: white; -} -#win10_command_center .msgs .msg:hover>.btn_close_msg{ - color: grey; -} - -#win10_command_center .msgs .msg:hover>.content{ - color: white; -} - -#win10_command_center .msgs .msg>.title{ - color: #c7c7c7; - font-size: 14px; - line-height: 28px; -} - -#win10_command_center .msgs .msg>.btn_close_msg{ - cursor: pointer; - color: transparent; - padding: 3px; - position: absolute; - top: 11px; - right: 11px; -} - -#win10_command_center .msgs .msg>.btn_close_msg:hover{ - color: white; -} - -#win10_command_center .msgs .msg>.content{ - font-size: 12px; - color: #9b9b9b; - padding-bottom: 5px; -} - -#win10_btn_group_middle .btn{ - float: left; - box-sizing: border-box; - height: inherit; - max-width: 140px; - border-bottom:4px solid #707070; - line-height: 40px; - color: white; - text-align: center; - font-size: 12px; - word-break: keep-all; - padding: 0 10px; - margin-right: 1px; - position: relative; -} - -#win10_btn_group_middle .btn.active{ - background-color: #3B3D3F; -} - -#win10_btn_group_middle .btn:hover{ - cursor: pointer; -} - -.win10-open-iframe{ - background-color: transparent; - border: 1px solid #323232; -} - -.win10-open-iframe .layui-layer-content{ - background-color: white; - max-height: calc(100% - 42px); -} - -.win10-open-iframe .layui-layer-title{ - box-sizing: border-box; - background-color: rgba(49, 49, 50, 0.94); - padding-right: 160px; - color: white; -} -.win10-open-iframe.hide{ - display: none; -} -.win10-btn_refresh{ - float: right; -} -#win10 .img-loader{ - display: none; -} - -.win10-btn-refresh>span,.win10-btn-change-url>span{ - font-size: 16px !important; - color: rgb(255, 255, 255); -} - -.win10-open-iframe .layui-layer-min cite{display: none;} -.win10-open-iframe .layui-layer-max:hover{background-image:none} -.win10-open-iframe .layui-layer-max,.layui-layer-maxmin{background:none} -.win10-open-iframe .layui-layer-setwin a.layui-layer-close1:hover{ - background:red; - color: #fff ; - opacity: 1; -} - -.win10-open-iframe .layui-layer-min::before{ - content:"\f2d1"; - color: white; - font: normal normal normal 14px/1 FontAwesome; -} - -.win10-open-iframe .layui-layer-max::before{ - content:"\f2d0"; - color: white; - font: normal normal normal 14px/1 FontAwesome; -} - -.win10-open-iframe .layui-layer-maxmin.layui-layer-max::before{ - content:"\f2d2"; - color: white; - font: normal normal normal 14px/1 FontAwesome; -} - -.win10-open-iframe .layui-layer-close::before{ - content:"\f2d3"; - color: #fff; - font: normal normal normal 14px/1 FontAwesome; -} - -.win10-open-iframe .layui-layer-min,.layui-layer-close,.layui-layer-max{ - text-decoration: none; -} - -.win10-layer-open-browser textarea{ - margin: 20px; - outline: none; - resize: none; -} -/*右键菜单*/ -#win10 .win10-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgb(255, 255, 255); border: #CCC 1px solid; display: block; border-radius: 5px; z-index: 99999999; } -#win10 .win10-context-menu ul { margin: 0px; padding: 0px; } -#win10 .win10-context-menu ul li {transition: background-color 0.5s;cursor: default;padding: 0px 1em; list-style: none; line-height: 30px; height: 30px; margin: 3px 0; font-size: 13px; } -#win10 .win10-context-menu ul li:hover { background-color: #DDD; } -#win10 .win10-context-menu ul li a {text-decoration: none; display: block; height: 100%; color: #333; outline: none; } -#win10 .win10-context-menu ul hr { margin: 0; height: 0px; border: 0px; border-bottom: rgb(233,233,233) 1px solid;border-top: none } - -/*块级按钮*/ -.win10-open-iframe .layui-layer-ico{background-image:none;} -.win10-open-iframe .layui-layer-setwin { - position: absolute; - right: 0px; - top: 0px; - font-size: 0; - line-height: 40px; - height: 40px; - background-color: rgba(49, 49, 50, 0.94); -} -.win10-open-iframe .layui-layer-setwin a { - position: relative; - width: 30px; - height: 40px; - font-size: 13px; - text-align: center; - overflow: hidden; -} -.win10-open-iframe .layui-layer-setwin a:hover { - background: #5d5d5d; -} -.win10-open-iframe .layui-layer-title .icon ,#win10_btn_group_middle .btn_title .icon{ - font-size: 15px; - padding: 1px; - width: 20px; - height: 20px; - line-height: 20px; - display: inline-block; - border-radius: 3px; - text-align: center; - margin-right: 0.5em; -} -.win10-open-iframe .layui-layer-title img.icon,#win10_btn_group_middle .btn_title img.icon{ - width: 20px; - position: relative; - top:5px ; - margin-right: 0.5em; -} - -#win10-menu>.list>.sub-item img.icon,#win10-menu>.list>.item img.icon{ - width: 36px; - height:36px; - position: relative; - top:2px ; - margin-right: 0.5em; -} - -/*桌面舞台样式*/ -#win10-desktop-scene{ - width: 100%; - height: calc(100% - 40px); - position: absolute; - left: 0; - top: 0; - z-index: 0; - background-color: transparent; -} - -/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/ -.win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;} -.win10-open-iframe .green,#win10 .green{background:#5FB878!important;} -.win10-open-iframe .black,#win10 .black{background:#393D49!important;} -.win10-open-iframe .blue,#win10 .blue{background:#1E9FFF!important;} -.win10-open-iframe .orange,#win10 .orange{background:#F7B824!important;} -.win10-open-iframe .red,#win10 .red{background:#FF5722!important;} -.win10-open-iframe .dark,#win10 .dark{background:#2F4056!important;} -.win10-open-iframe .purple,#win10 .purple{background:#b074e6!important;} - - -@media screen and (max-width:768px){ - #win10-menu{ - width:calc(100% - 10px); - height: calc(100% - 42px); - } - #win10-menu.hidden{ - bottom: -100% ; - } - #win10_command_center{ - width: 100%; - } - #win10_command_center.hidden_right { - right: -100%; - } - .layui-layer-setwin .layui-layer-max{ - display: none; - } - #win10_btn_group_left .btn { - height: 100%; - width: 40px; - overflow: hidden; - font-size: 16px; - } - #win10_btn_group_right .btn { - height: 100%; - min-width: 4px; - padding: 0 10px; - font-size: 16px!important; - } - #win10_btn_show_desktop { - border-left: grey 1px solid; - width: 30px; - margin-left: 3px; - padding: 0 !important - } - #win10_btn_group_left{ - max-width:100px; - } - #win10_btn_group_middle{ - width:calc(100% - 160px); - } - #win10_btn_group_middle .btn{ - padding: 0 3px; - } - #win10_btn_group_right{ - max-width:150px; - } - #win10-menu .list{ - padding-left: 2px; - position: absolute; - width: calc(100% - 31px); - left: 0; - top: 0; - - } - #win10-menu .blocks{ - overflow-x: hidden; - position: absolute; - width:calc(100% - 31px); - left: 0; - top: 0; - } - - #win10-menu .menu_group { - width: 90%; - float: none; - margin: 0 auto; - clear: both; - } - - #win10_btn_time{display: none} - #win10-menu-switcher{ - display: block; - } - #win10-menu>.win10-menu-hidden{ - display: none; - } - #win10_btn_group_middle .btn_close{ - display: none; - } - .win10-open-iframe .layui-layer-setwin a { - width: 32px; - } -} \ No newline at end of file diff --git a/css/macdefault.css b/css/index.css similarity index 100% rename from css/macdefault.css rename to css/index.css diff --git a/demo.html b/demo.html index a39cf86..3a162e3 100644 --- a/demo.html +++ b/demo.html @@ -9,7 +9,7 @@ - + diff --git a/index.html b/index.html index 2627058..fba4909 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + diff --git a/js/mac.js b/js/mac.js index 0b0cedc..503589d 100644 --- a/js/mac.js +++ b/js/mac.js @@ -777,7 +777,7 @@ window.Win10 = { menuOpen: function () { $("#win10-menu").addClass('opened'); $("#win10-menu").removeClass('hidden'); - this._hideShortcut(); + //this._hideShortcut(); //不关闭 $(".win10-open-iframe").addClass('hide'); }, menuToggle: function () { @@ -794,7 +794,7 @@ window.Win10 = { }, commandCenterOpen: function () { $("#win10_command_center").removeClass('hidden_right'); - this._hideShortcut(); + //this._hideShortcut(); $(".win10-open-iframe").addClass('hide'); $("#win10-msg-nof").removeClass('on-new-msg fa-commenting-o'); }, diff --git a/js/win10.js b/js/win10.js deleted file mode 100644 index 21eaa5e..0000000 --- a/js/win10.js +++ /dev/null @@ -1,924 +0,0 @@ -/** - * Created by Yuri2 on 2017/7/10. - */ -window.Win10 = { - _version:'v1.1.2.4', - _debug:true, - _bgs:{ - main:'', - mobile:'', - }, - _countTask: 0, - _newMsgCount:0, - _animated_classes:[], - _animated_liveness:0, - _switchMenuTooHurry:false, - _lang:'unknown', - _iframeOnClick :{ - resolution: 200, - iframes: [], - interval: null, - Iframe: function() { - this.element = arguments[0]; - this.cb = arguments[1]; - this.hasTracked = false; - }, - track: function(element, cb) { - this.iframes.push(new this.Iframe(element, cb)); - if (!this.interval) { - var _this = this; - this.interval = setInterval(function() { _this.checkClick(); }, this.resolution); - } - }, - checkClick: function() { - if (document.activeElement) { - var activeElement = document.activeElement; - for (var i in this.iframes) { - var eid=undefined; - if((eid=this.iframes[i].element.id) && !document.getElementById(eid)){ - delete this.iframes[i]; - continue; - } - if (activeElement === this.iframes[i].element) { // user is in this Iframe - if (this.iframes[i].hasTracked === false) { - this.iframes[i].cb.apply(window, []); - this.iframes[i].hasTracked = true; - } - } else { - this.iframes[i].hasTracked = false; - } - } - } - } - }, - _iframe_click_lock_children:{}, - _renderBar:function () { - //调整任务栏项目的宽度 - if(this._countTask<=0){return;} //防止除以0 - var btns=$("#win10_btn_group_middle>.btn"); - btns.css('width',('calc('+(1/this._countTask*100)+'% - 1px )')) - }, - _handleReady:[], - _hideShortcut:function () { - var that=$("#win10 #win10-shortcuts .shortcut"); - that.removeClass('animated flipInX'); - that.addClass('animated flipOutX'); - }, - _showShortcut:function () { - var that=$("#win10 #win10-shortcuts .shortcut"); - that.removeClass('animated flipOutX'); - that.addClass('animated flipInX'); - }, - _checkBgUrls:function () { - var loaders=$('#win10>.img-loader'); - var flag=false; - if(Win10.isSmallScreen()){ - if(Win10._bgs.mobile){ - loaders.each(function () { - var loader=$(this); - if(loader.attr('src')===Win10._bgs.mobile && loader.hasClass('loaded')){ - Win10._setBackgroundImg(Win10._bgs.mobile); - flag=true; - } - }); - if(!flag){ - //没找到加载完毕的图片 - var img=$(''); - $('#win10').append(img); - Win10._onImgComplete(img[0],function () { - img.addClass('loaded'); - Win10._setBackgroundImg(Win10._bgs.mobile); - }) - } - } - }else{ - if(Win10._bgs.main){ - loaders.each(function () { - var loader=$(this); - if(loader.attr('src')===Win10._bgs.main && loader.hasClass('loaded')){ - Win10._setBackgroundImg(Win10._bgs.main); - flag=true; - } - }); - if(!flag){ - //没找到加载完毕的图片 - var img=$(''); - $('#win10').append(img); - Win10._onImgComplete(img[0],function () { - img.addClass('loaded'); - Win10._setBackgroundImg(Win10._bgs.main); - }) - } - } - } - - }, - _startAnimate:function () { - setInterval(function () { - var classes_lenth=Win10._animated_classes.length; - var animated_liveness=Win10._animated_liveness; - if(animated_liveness===0 || classes_lenth===0 || !$("#win10-menu").hasClass('opened')){return;} - $('#win10-menu>.blocks>.menu_group>.block').each(function () { - if(!$(this).hasClass('onAnimate') && Math.random()<=animated_liveness){ - var that=$(this); - var class_animate = Win10._animated_classes[Math.floor((Math.random()*classes_lenth))]; - that.addClass('onAnimate'); - setTimeout(function () { - that.addClass(class_animate); - setTimeout(function () { - that.removeClass('onAnimate'); - that.removeClass(class_animate); - },3000); - },Math.random()*2*1000) - } - }) - },1000); - }, - _onImgComplete:function (img, callback) { - if(!img){return;} - var timer = setInterval(function() { - if (img.complete) { - callback(img); - clearInterval(timer); - } - }, 50) - }, - _setBackgroundImg:function (img) { - $('#win10').css('background-image','url('+img+')') - }, - _settop:function (layero) { - if(!isNaN(layero)){ - layero=this.getLayeroByIndex(layero); - } - //置顶窗口 - var max_zindex=0; - $(".win10-open-iframe").each(function () { - z=parseInt($(this).css('z-index')); - $(this).css('z-index',z-1); - if(z>max_zindex){max_zindex=z;} - }); - layero.css('z-index',max_zindex+1); - }, - _checkTop:function () { - var max_index=0,max_z=0,btn=null; - $("#win10_btn_group_middle .btn.show").each(function () { - var index=$(this).attr('index'); - var layero=Win10.getLayeroByIndex(index); - var z=layero.css('z-index'); - if(z>max_z){ - max_index=index; - max_z=z; - btn=$(this); - } - }); - this._settop(max_index); - $("#win10_btn_group_middle .btn").removeClass('active'); - if(btn){ - btn.addClass('active'); - } - }, - _renderContextMenu:function (x,y,menu,trigger) { - this._removeContextMenu(); - if(menu===true){return;} - var dom = $("
"); - $('#win10').append(dom); - var ul=dom.find('ul'); - for(var i=0;i')); - continue; - } - if(typeof(item)==='string'){ - ul.append($('
  • '+item+'
    • ')); - continue; - } - if(typeof(item)==='object'){ - var sub=$('
  • '+item[0]+'
    • '); - ul.append(sub); - sub.click(trigger,item[1]); - continue; - } - } - //修正坐标 - if(x+150>document.body.clientWidth){x-=150} - if(y+dom.height()>document.body.clientHeight){y-=dom.height()} - dom.css({ - top:y, - left:x, - }); - }, - _removeContextMenu:function () { - $('.win10-context-menu').remove(); - }, - _closeWin:function (index) { - $("#win10_" + index).remove(); - layer.close(index); - Win10._checkTop(); - Win10._countTask--;//回退countTask数 - Win10._renderBar(); - }, - _fixWindowsHeightAndWidth:function(){ - //此处代码修正全屏切换引起的子窗体尺寸超出屏幕 - var opens=$('.win10-open-iframe'); - var clientHeight=document.body.clientHeight; - opens.each(function () { - var layero_opened=$(this); - var height=layero_opened.css('height'); - height=parseInt(height.replace('px','')); - if (height+40>=clientHeight){ - layero_opened.css('height',clientHeight-40); - layero_opened.find('.layui-layer-content').css('height',clientHeight-83); - layero_opened.find('.layui-layer-content iframe').css('height',clientHeight-83); - } - }) - }, - - /** - * 原 win10_bind_open_windows 子窗口事件自动绑定插件 - * @author:vG - * @修订:Yuri2 - * @version:2.0.1 - * 说明: 所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定 - */ - _bind_open_windows:function () { - // 注册事件委派 打开url窗口 - $('#win10').on('click', '.win10-open-window', function() { - //>> 获取当前点击的对象 - $this = $(this); - //>> 判断url地址是否为空 如果为空 不予处理 - if($this.data('url') !== "") { - //>> 获取弹窗标题 - var title = $this.data('title')||'', - areaAndOffset; - //>> 判断是否有标题图片 - var bg=$this.data('icon-bg')?$this.data('icon-bg'):''; - if($this.data('icon-image')) { - //>> 加入到标题中 - title = '' + title; - } - if($this.data('icon-font')) { - //>> 加入到标题中 - title = '' + title; - } - if(!title && $this.children('.icon').length===1 && $this.children('.title').length===1){ - title = $this.children('.icon').prop("outerHTML")+$this.children('.title').html(); - } - //>> 判断是否需要 设置 区域宽度高度 - if($this.data('area-offset')) { - areaAndOffset = $this.data('area-offset'); - //>> 判断是否有分隔符 - if(areaAndOffset.indexOf(',')!==-1){ - areaAndOffset = eval(areaAndOffset); - } - } - //>> 调用win10打开url方法 - Win10.openUrl($this.data('url'), title, areaAndOffset); - } - }) - }, - _init:function () { - - //获取语言 - this._lang=(navigator.language || navigator.browserLanguage).toLowerCase(); - - $("#win10_btn_win").click(function () { - Win10.commandCenterClose(); - Win10.menuToggle(); - }); - $("#win10_btn_command").click(function () { - Win10.menuClose(); - Win10.commandCenterToggle(); - }); - $("#win10 .desktop").click(function () { - Win10.menuClose(); - Win10.commandCenterClose(); - }); - $('#win10').on('click',".msg .btn_close_msg", function () { - var msg = $(this).parent(); - $(msg).addClass('animated slideOutRight'); - setTimeout(function () { - msg.remove() - }, 500) - }); - $('#win10_btn_command_center_clean_all').click(function () { - var msgs=$('#win10_command_center .msg'); - msgs.addClass('animated slideOutRight'); - setTimeout(function () { - msgs.remove() - }, 1500); - setTimeout(function () { - Win10.commandCenterClose(); - }, 1000); - }); - $("#win10_btn_show_desktop").click(function () { - $("#win10 .desktop").click(); - Win10.hideWins(); - }); - $("#win10-menu-switcher").click(function () { - if(Win10._switchMenuTooHurry){return;} - Win10._switchMenuTooHurry=true; - var class_name='win10-menu-hidden'; - var list=$("#win10-menu>.list"); - var blocks=$("#win10-menu>.blocks"); - var toggleSlide=function (obj) { - if(obj.hasClass(class_name)){ - obj.addClass('animated slideInLeft'); - obj.removeClass('animated slideOutLeft'); - obj.removeClass(class_name); - }else{ - setTimeout(function () { - obj.addClass(class_name); - },450); - obj.addClass('animated slideOutLeft'); - obj.removeClass('animated slideInLeft'); - } - }; - toggleSlide(list); - toggleSlide(blocks); - setTimeout(function () { - Win10._switchMenuTooHurry=false; - },520) - }); - $("#win10_btn_group_middle").click(function () { - $("#win10 .desktop").click(); - }); - $(document).on('click', '.win10-btn-refresh', function () { - var index = $(this).attr('index'); - var iframe = Win10.getLayeroByIndex(index).find('iframe'); - iframe.attr('src', iframe.attr('src')); - }); - $(document).on('click', '.win10-btn-change-url', function () { - var index = $(this).attr('index'); - var iframe = Win10.getLayeroByIndex(index).find('iframe'); - layer.prompt({ - title: Win10.lang('编辑网址','Edit URL'), - formType: 2, - skin:'win10-layer-open-browser', - value: iframe.attr('src'), - area: ['500px', '200px'], - zIndex:99999999999 - }, function (value, i) { - layer.close(i); - layer.msg(Win10.lang('请稍候...','Hold on please...'),{time:1500},function () { - iframe.attr('src', value); - }); - }); - }); - $(document).on('mousedown','.win10-open-iframe',function () { - var layero=$(this); - Win10._settop(layero); - Win10._checkTop(); - }); - $('#win10_btn_group_middle').on('click','.btn_close',function () { - var index = $(this).parent().attr('index') ; - Win10._closeWin(index); - }); - $('#win10-menu .list').on('click','.item',function () { - var e=$(this); - if(e.hasClass('has-sub-down')){ - $('#win10-menu .list .item.has-sub-up').toggleClass('has-sub-down').toggleClass('has-sub-up'); - $("#win10-menu .list .sub-item").slideUp(); - } - if(e.next().hasClass('sub-item')){ - e.toggleClass('has-sub-down').toggleClass('has-sub-up'); - } - while (e.next().hasClass('sub-item')){ - e.next().slideToggle(); - e=e.next(); - } - }); - $("#win10-btn-browser").click(function () { - // var area = ['100%', (document.body.clientHeight - 40) + 'px']; - // var offset = ['0', '0']; - layer.prompt({ - title: Win10.lang('访问网址','Visit URL'), - formType: 2, - value: '', - skin:'win10-layer-open-browser', - area: ['300px', '150px'], - zIndex:99999999999 - }, function (value, i) { - layer.close(i); - layer.msg(Win10.lang('请稍候...','Hold on please...'),{time:1500},function () { - Win10.openUrl(value,value); - }); - }); - }); - setInterval(function () { - var myDate = new Date(); - var year=myDate.getFullYear(); - 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(hours+':'+mins+'
    '+year+'/'+month+'/'+date); - },1000); - //离开前警告 - document.body.onbeforeunload = function(event){ - 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._startAnimate();//动画处理 - Win10.renderShortcuts();//渲染图标 - $("#win10-shortcuts").removeClass('shortcuts-hidden');//显示图标 - Win10._showShortcut();//显示图标 - Win10.renderMenuBlocks();//渲染磁贴 - //窗口改大小，重新渲染 - $(window).resize(function() { - Win10.renderShortcuts(); - Win10._checkBgUrls(); - if(!Win10.isSmallScreen()) Win10._fixWindowsHeightAndWidth(); //2017年11月14日修改，加入了if条件 - }); - //细节 - $(document).on('focus',".win10-layer-open-browser textarea",function () { - $(this).attr('spellcheck','false'); - }); - $(document).on('keyup',".win10-layer-open-browser textarea",function (e) { - if(e.keyCode===13){ - $(this).parent().parent().find('.layui-layer-btn0').click(); - } - }); - //打广告 - setTimeout(function () { - 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); - //点击清空右键菜单 - $(document).click(function (event) { - if(!event.button) - Win10._removeContextMenu(); - }); - //禁用右键的右键 - $(document).on('contextmenu','.win10-context-menu',function (e) { - e.preventDefault(); - e.stopPropagation(); - }); - //设置默认右键菜单 - Win10.setContextMenu('#win10',true); - Win10.setContextMenu('#win10>.desktop',[ - [' 收藏本页',function () { - var url = window.location; - var title = document.title; - var ua = navigator.userAgent.toLowerCase(); - if (ua.indexOf("360se") > -1) { - layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!')); - } - else if (ua.indexOf("msie 8") > -1) { - window.external.AddToFavoritesBar(url, title); //IE8 - } - else if (document.all) { - try{ - window.external.addFavorite(url, title); - }catch(e){ - layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!')); - } - } - else if (window.sidebar) { - window.sidebar.addPanel(title, url, ""); - } - else { - layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!')); - } - }], - [' '+Win10.lang('进入全屏','Enable Full Screen'),function () {Win10.enableFullScreen()}], - [' '+Win10.lang('退出全屏','Disable Full Screen'),function () {Win10.disableFullScreen()}], - '|', - [' '+Win10.lang('关于','About Us'),function () {Win10.aboutUs()}], - ]); - Win10.setContextMenu('#win10_btn_group_middle',[ - [' '+Win10.lang('全部显示','Show All Windows'),function () {Win10.showWins()}], - [' '+Win10.lang('全部隐藏','Hide All Windows'),function () {Win10.hideWins()}], - [' '+Win10.lang('全部关闭','Close All Windows'),function () {Win10.closeAll()}], - ]); - - //处理消息图标闪烁 - setInterval(function () { - var btn=$("#win10-msg-nof.on-new-msg"); - if(btn.length>0){ - btn.toggleClass('fa-commenting-o'); - } - },600); - - //绑定快捷键 - $("body").keyup(function (e) { - if (e.ctrlKey) - { - switch (e.keyCode){ - case 37://left - $("#win10_btn_win").click(); - break; - case 38://up - Win10.showWins(); - break; - case 39://right - $("#win10_btn_command").click(); - break; - case 40://down - Win10.hideWins(); - break; - } - } - }); - - /** - * WIN10-UI v1.1.2.2 桌面舞台支持补丁 - * WIN10-UI v1.1.2.2之后的版本不需要此补丁 - * @usage 直接引用即可（需要jquery） - * @author Yuri2 - */ - if($("#win10-desktop-scene").length<1) { - $("#win10-shortcuts").css({ - position: 'absolute', - left: 0, - top: 0, - 'z-index': 100, - }); - $("#win10 .desktop").append("
    ") - } - - //属性绑定 - Win10._bind_open_windows(); - }, - setBgUrl:function (bgs) { - this._bgs=bgs; - this._checkBgUrls(); - }, - menuClose: function () { - $("#win10-menu").removeClass('opened'); - $("#win10-menu").addClass('hidden'); - this._showShortcut(); - $(".win10-open-iframe").removeClass('hide'); - }, - menuOpen: function () { - $("#win10-menu").addClass('opened'); - $("#win10-menu").removeClass('hidden'); - this._hideShortcut(); - $(".win10-open-iframe").addClass('hide'); - }, - menuToggle: function () { - if(!$("#win10-menu").hasClass('opened')){ - this.menuOpen(); - }else{ - this.menuClose(); - } - }, - commandCenterClose: function () { - $("#win10_command_center").addClass('hidden_right'); - this._showShortcut(); - $(".win10-open-iframe").removeClass('hide'); - }, - commandCenterOpen: function () { - $("#win10_command_center").removeClass('hidden_right'); - this._hideShortcut(); - $(".win10-open-iframe").addClass('hide'); - $("#win10-msg-nof").removeClass('on-new-msg fa-commenting-o'); - }, - renderShortcuts:function () { - var h=parseInt($("#win10 #win10-shortcuts")[0].offsetHeight/100); - var x=0,y=0; - $("#win10 #win10-shortcuts .shortcut").each(function () { - $(this).css({ - left:x*82+10, - top:y*100+10, - }); - y++; - if(y>=h){ - y=0; - x++; - } - }); - }, - renderMenuBlocks:function () { - var cell_width=44; - var groups=$("#win10-menu .menu_group"); - groups.each(function () { - var group=$(this); - var blocks=group.children('.block'); - var max_height=0; - blocks.each(function () { - var that=$(this); - var loc=that.attr('loc').split(','); - var size=that.attr('size').split(','); - var top=(loc[1]-1)*cell_width+40; - var height=size[1]*cell_width; - var full_height=top+height; - if (full_height>max_height){max_height=full_height} - that.css({ - top:top, - left:(loc[0]-1)*cell_width, - width:size[0]*cell_width, - height:height, - }) - - }); - group.css('height',max_height); - }); - }, - commandCenterToggle: function () { - if($("#win10_command_center").hasClass('hidden_right')){ - this.commandCenterOpen(); - }else{ - this.commandCenterClose(); - } - }, - newMsg: function (title, content,handle_click) { - var e = $('
    ' + - '
    ' + title +'
    '+ - '
    ' + content + '
    ' + - '' + - '
    '); - $("#win10_command_center .msgs").prepend(e); - e.find('.content:first,.title:first').click(function () { - if(handle_click){ - handle_click(e); - } - }); - layer.tips(Win10.lang('新消息:','New message:')+title, '#win10_btn_command', { - tips: [1, '#3c6a4a'], - time: 3000 - }); - if($("#win10_command_center").hasClass('hidden_right')){ - $("#win10-msg-nof").addClass('on-new-msg'); - } - }, - getLayeroByIndex: function (index) { - return $('#' + 'layui-layer' + index) - }, - isSmallScreen: function (size) { - if (!size) { - size = 768 - } - var width = document.body.clientWidth; - return width < size; - }, - enableFullScreen: function () { - var docElm = document.documentElement; - //W3C - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } - //FireFox - else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } - //Chrome等 - else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } - //IE11 - else if (docElm.msRequestFullscreen) { - document.body.msRequestFullscreen(); - } - }, - disableFullScreen: function () { - if (document.exitFullscreen) { - document.exitFullscreen(); - } - else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } - else if (document.webkitCancelFullScreen) { - document.webkitCancelFullScreen(); - } - else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - }, - buildList:function () { - $("#win10-menu .list .sub-item").slideUp(); - $("#win10-menu .list .item").each(function () { - if($(this).next().hasClass('sub-item')){ - $(this).addClass('has-sub-down'); - $(this).removeClass('has-sub-up'); - } - }) - }, - openUrl: function (url, title,areaAndOffset) { - if(this._countTask>12){ - layer.msg("您打开的太多了，歇会儿吧~"); - return false; - }else{ - this._countTask++; - } - if(!url){url='404'} - url=url.replace(/(^\s*)|(\s*$)/g, ""); - var preg=/^(https?:\/\/|\.\.?\/|\/\/?)/; - if(!preg.test(url)){ - url='http://'+url; - } - if (!url) { - url = '//yuri2.cn'; - } - if (!title) { - title = url; - } - var area,offset; - if (this.isSmallScreen() || areaAndOffset==='max') { - area = ['100%', (document.body.clientHeight - 40) + 'px']; - offset = ['0', '0']; - }else if(typeof areaAndOffset ==='object'){ - area=areaAndOffset[0]; - offset=areaAndOffset[1]; - }else { - area = ['80%', '80%']; - var topset, leftset; - topset = parseInt($(window).height()); - topset = (topset - (topset * 0.8)) / 2 - 41; - leftset = parseInt($(window).width()); - leftset = (leftset - (leftset * 0.8)) / 2 - 120; - offset = [Math.round((this._countTask % 10 * 20) + topset) + 'px', Math.round((this._countTask % 10 * 20 + 100) + leftset) + 'px']; - } - var index = layer.open({ - type: 2, - shadeClose: true, - shade: false, - maxmin: true, //开启最大化最小化按钮 - title: title, - content: url, - area: area, - offset: offset, - isOutAnim: false, - skin:'win10-open-iframe', - cancel: function (index, layero) { - $("#win10_" + index).remove(); - Win10._checkTop(); - Win10._countTask--;//回退countTask数 - Win10._renderBar(); - }, - min: function (layero) { - layero.hide(); - $("#win10_" + index).removeClass('show'); - Win10._checkTop(); - return false; - }, - full:function (layero) { - layero.find('.layui-layer-min').css('display','inline-block'); - }, - }); - $('#win10_btn_group_middle .btn.active').removeClass('active'); - var btn = $('
    ' + title + '
    '); - var layero_opened=Win10.getLayeroByIndex(index); - layero_opened.css('z-index',Win10._countTask+813); - Win10._settop(layero_opened); - layero_opened.find('.layui-layer-setwin').prepend(''); - layero_opened.find('.layui-layer-setwin .layui-layer-max').click(function () { - setTimeout(function () { - var height=layero_opened.css('height'); - height=parseInt(height.replace('px','')); - if (height>=document.body.clientHeight){ - layero_opened.css('height',height-40); - layero_opened.find('.layui-layer-content').css('height',height-83); - layero_opened.find('.layui-layer-content iframe').css('height',height-83); - } - },300); - - }); - $("#win10_btn_group_middle").append(btn); - Win10._renderBar(); - btn.click(function () { - var index = $(this).attr('index'); - var layero = Win10.getLayeroByIndex(index); - var settop=function () { - //置顶窗口 - var max_zindex=0; - $(".win10-open-iframe").each(function () { - z=parseInt($(this).css('z-index')); - $(this).css('z-index',z-1); - if(z>max_zindex){max_zindex=z;} - }); - layero.css('z-index',max_zindex+1); - }; - if ($(this).hasClass('show')) { - if($(this).hasClass('active')){ - $(this).removeClass('active'); - $(this).removeClass('show'); - Win10._checkTop(); - layero.hide(); - }else{ - $('#win10_btn_group_middle .btn.active').removeClass('active'); - $(this).addClass('active'); - Win10._settop(layero); - } - } else { - $(this).addClass('show'); - $('#win10_btn_group_middle .btn.active').removeClass('active'); - $(this).addClass('active'); - Win10._settop(layero); - layero.show(); - } - }); - - - Win10._iframeOnClick.track(layero_opened.find('iframe:first')[0], function() { - if(Object.getOwnPropertyNames(Win10._iframe_click_lock_children).length===0){ - Win10._settop(layero_opened); - Win10._checkTop(); - }else{ - console.log('click locked'); - } - }); - - this.menuClose(); - this.commandCenterClose(); - return index; - }, - closeAll: function() { - $(".win10-open-iframe").remove(); - $("#win10_btn_group_middle").html(""); - Win10._countTask = 0; - Win10._renderBar(); - }, - setAnimated:function (animated_classes,animated_liveness) { - this._animated_classes=animated_classes; - this._animated_liveness=animated_liveness; - }, - exit:function () { - layer.confirm(Win10.lang('确认要关闭本页吗?','Are you sure you want to close this page?'), {icon: 3, title:Win10.lang('提示','Prompt')}, function(index){ - document.body.onbeforeunload = function(){}; - window.location.href="about:blank"; - window.close(); - layer.close(index); - layer.alert(Win10.lang('哎呀,好像失败了呢。','Ops...There seems to be a little problem.'), { - skin: 'layui-layer-lan' - ,closeBtn: 0 - }); - }); - - }, - lang:function (cn,en) { - return this._lang==='zh-cn'||this._lang==='zh-tw'?cn:en; - }, - aboutUs: function() { - //关于我们 - layer.open({ - type: 1, - closeBtn: 1, //不显示关闭按钮 - anim: 2, - skin: 'layui-layer-molv', - title: 'WIN10-UI '+this._version, - shadeClose: true, //开启遮罩关闭 - area: ['320px', '200px'], //宽高 - content: '
    ' + - '

    支持组件:layer、jquery、animated.css、font-awesome

    ' + - '

    尤里2号©版权所有

    ' + - '

    作者邮箱:yuri2peter@qq.com

    ' + - '
    ' - }); - }, - setContextMenu:function (jq_dom, menu) { - if(typeof (jq_dom)==='string'){ - jq_dom=$(jq_dom); - } - jq_dom.unbind('contextmenu'); - jq_dom.on('contextmenu', function(e) { - if(menu){ - Win10._renderContextMenu(e.clientX,e.clientY,menu,this); - if (e.cancelable) { - // 判断默认行为是否已经被禁用 - if (!e.defaultPrevented) { - e.preventDefault(); - } - } - e.stopPropagation(); - } - }); - }, - hideWins:function () { - $('#win10_btn_group_middle>.btn.show').each(function () { - var index = $(this).attr('index'); - var layero = Win10.getLayeroByIndex(index); - $(this).removeClass('show'); - $(this).removeClass('active'); - layero.hide(); - }) - }, - showWins:function () { - $('#win10_btn_group_middle>.btn').each(function () { - var index = $(this).attr('index'); - var layero = Win10.getLayeroByIndex(index); - $(this).addClass('show'); - layero.show(); - }); - Win10._checkTop(); - }, - getDesktopScene:function () { - return $("#win10-desktop-scene"); - }, - onReady:function (handle) { - Win10._handleReady.push(handle); - } -}; - - -$(function () { - Win10._init(); - for(var i in Win10._handleReady){ - var handle=Win10._handleReady[i]; - handle(); - } -}); \ No newline at end of file