更新提交打开任务的样式和一些新的修改

修正safari浏览起错位的问题

css/index.css

@@ -960,43 +960,41 @@ body {
 
 .dock {
     width: 100%;
-    bottom: 0;
     position: absolute;
     left: 0;
+    bottom: 0;
     height: 60px;
     text-align: center;
     z-index: 1003;
 }
 
 .dock-container {
-    width: 100%;
+    height: 100%;
-    height: 60px;
-    flex-flow: row nowrap;
-    place-content: stretch center;
-    align-items: center;
     display:flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     align-content: stretch;
+    align-items: stretch;
     border-radius: 5px 5px 0 0;
     background-color: rgba(255, 255, 255, 0.45); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
     padding: 0 5px;
     margin: 0 auto;
+    position:absolute;
 }
 
 .dock a.dock-item {
-    display: block;
+    width: 100%;
-    font: bold 12px Arial, Helvetica, sans-serif;
-    width: 60px;
-    color: #fff;
-    bottom: 0;
-    position: absolute;
-    text-align: center;
-    text-decoration: none;
     align-self: auto;
     flex-basis: auto;
     flex-grow: 0;
+    flex-shrink: 1;
+    color: #fff;
+    font: bold 12px Arial, Helvetica, sans-serif;
+    text-align: center;
+    text-decoration: none;
+    bottom: 0;
+    position: absolute;
 }
 
 .dock-item span {
@@ -1252,12 +1250,14 @@ body {
         width: 100% !important;
         border-radius: 0;
         padding: 0;
+        left:0 !important;
     }
 
     #dock a.dock-item {
         width: 100%;
         float: left;
         position: static;
+        padding: 5px 0;
     }
 
     #dock .dock-item img {

demo.html

@@ -141,15 +141,7 @@
                 <a class="dock-item" onclick="Macui.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"><span>finder</span><img src="./img/icon/finder.png" alt="finder"></a>
                 <a class="dock-item launchpad" href="#"><span>launchpad</span><img src="./img/icon/launchpad.png" alt="launchpad" /></a>
 				<a class="dock-item" onclick="Macui.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')"><span>safari</span><img src="./img/icon/safari.png" alt="safari"></a>
-                <a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
+                <a class="dock-item" id="trashicon"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
-                <a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
-                <a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
-                <a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
-                <a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
-                <a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
-                <a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
-                <a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
-                <a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
             </div>
         </div>
 		<div id="launchpad" class="backgroud_blur hidden">

index.html

@@ -11,7 +11,7 @@
     <link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
     <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/animate.css/4.1.1/animate.min.css">
     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="./css/index.min.css">
+    <link rel="stylesheet" href="./css/index.css">
     <link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
 </head>
 
@@ -107,17 +107,8 @@
                 <a class="dock-item"
                     onclick="Macui.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
                     <span>safari</span><img src="./img/icon/safari.png"></a>
-                <a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png"
+
-                        alt="appstore" /></a>
+                <a class="dock-item" id="trashicon" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png"
-                <a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png"
-                        alt="gamecenter" /></a>
-                <a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
-                <a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
-                <a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
-                <a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
-                <a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
-                <a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
-                <a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png"
                         alt="trashicon" /></a>
             </div>
         </div>
@@ -154,7 +145,7 @@
     src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script>
 <script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/layer/3.5.1/layer.min.js"></script>
 <script type="text/javascript" src="./js/interface.min.js"></script>
-<script type="text/javascript" src="./js/index.min.js"></script>
+<script type="text/javascript" src="./js/index.js"></script>
 <script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
 <script>
     Macui.onReady(function () {

js/index.js

@@ -10,6 +10,7 @@ window.Macui = {
     },
     _wallpaperBlur: true, //壁纸模糊（影响性能）
     _countTask: 0,
+    _maxTask:12,
     _newMsgCount: 0,
     _animated_classes: [],
     _animated_liveness: 0,
@@ -203,7 +204,7 @@ window.Macui = {
         let max_index = 0,
             max_z = 0,
             btn = null;
-        $("#mac_btn_group_middle .btn.show").each(function () {
+        $(".dock-container .dock-item.show").each(function () {
             let index = $(this).attr('index');
             let layero = Macui.getLayeroByIndex(index);
             let z = layero.css('z-index');
@@ -214,7 +215,7 @@ window.Macui = {
             }
         });
         this._settop(max_index);
-        $("#mac_btn_group_middle .btn").removeClass('active');
+        $(".dock-container .dock-item").removeClass('active');
         if (btn) {
             btn.addClass('active');
         }
@@ -264,7 +265,7 @@ window.Macui = {
         layer.close(index);
         Macui._checkTop();
         Macui._countTask--; //回退countTask数
-        Macui._renderBar();
+        Macui.renderDocks();
     },
     _fixWindowsHeightAndWidth: function () {
         //此处代码修正全屏切换引起的子窗体尺寸超出屏幕
@@ -357,7 +358,6 @@ window.Macui = {
             }, 500)
         });
         $("#mac .launchpad").click(function () {
-            console.log($(this))
             if ($("#launchpad").hasClass("hidden")) {
                 Macui.renderLaunchpad();
                 Macui.menuClose();
@@ -471,12 +471,15 @@ window.Macui = {
         $("#mac-shortcuts").removeClass('shortcuts-hidden'); //显示图标
         Macui._showShortcut(); //显示图标
         Macui.renderDocks(); //渲染DOCK
+        //初始化任务数量
+        this._maxTask = parseInt((document.body.clientWidth - 10) / 60)
         //窗口改大小，重新渲染
         $(window).resize(function () {
             Macui.renderShortcuts();
             Macui._checkBgUrls();
             if (!Macui.isSmallScreen()) Macui._fixWindowsHeightAndWidth(); //2017年11月14日修改，加入了if条件
             Macui.renderDocks();
+            this._maxTask = parseInt((parseInt(document.body.clientWidth) - 10) / 60)
         });
         //打广告
         setTimeout(function () {
@@ -1095,7 +1098,7 @@ window.Macui = {
         })
     },
     openUrl: function (url, icon, title, areaAndOffset) {
-        if (this._countTask > 12) {
+        if ($(".dock-container").children('.dock-item').length > this._maxTask) {
             layer.msg("您打开的太多了，歇会儿吧~");
             return false;
         } else {
@@ -1136,6 +1139,7 @@ window.Macui = {
             type: 2,
             shadeClose: true,
             shade: false,
+            move:'.mac-open-iframe',
             maxmin: true, //开启最大化最小化按钮
             title: icon + title,
             content: url,
@@ -1147,7 +1151,7 @@ window.Macui = {
                 $("#mac_" + index).remove();
                 Macui._checkTop();
                 Macui._countTask--; //回退countTask数
-                Macui._renderBar();
+                Macui.renderDocks();
             },
             min: function (layero) {
                 layero.hide();
@@ -1160,15 +1164,15 @@ window.Macui = {
                 layero_opened.css('top', 24);
             },
         });
-        $('#mac_btn_group_middle .btn.active').removeClass('active');
+        $('.dock-container .btn.active').removeClass('active');
-        let btn = $('<div id="mac_' + index + '" index="' + index +
+        let btn = $(
-            '" class="btn show active"><div class="btn_title">' + icon + '</div></div>');
+            '<a class="dock-item" id="mac_' + index + '" onClick="Macui.openUrl(\'' + url + '\',\'' + icon.replace(/'/g, "\\'") + '\',\'' + title + '\')"><span>' + title + '</span>' + icon + '</a>'
+        )
         let layero_opened = Macui.getLayeroByIndex(index);
         layero_opened.css('z-index', Macui._countTask + 813);
         Macui._settop(layero_opened);
         //重新定义菜单布局
-        layero_opened.find('.layui-layer-setwin').prepend('<a class="mac-btn-refresh" index="' + index +
+        layero_opened.find('.layui-layer-setwin').prepend('<a class="mac-btn-refresh" index="' + index + '" href="#"></a>');
-            '" href="#"></a>');
         //菜单排列倒序
         layero_opened.find(".layui-layer-setwin>a").each(function () {
             $(this).prependTo(layero_opened.find(".layui-layer-setwin"));
@@ -1185,10 +1189,14 @@ window.Macui = {
                         height - 55);
                 }
             }, 300);
-
         });
-        $("#mac_btn_group_middle").append(btn);
+        //回收站存在则插入回收站之前不存在则直接追加
-        Macui._renderBar();
+        if ($("#trashicon")){
+            btn.insertBefore($("#trashicon"))
+        }else{
+            $("#dock .dock-container").append(btn);
+        }
+        Macui.renderDocks();
         btn.click(function () {
             let index = $(this).attr('index');
             let layero = Macui.getLayeroByIndex(index);
@@ -1211,20 +1219,19 @@ window.Macui = {
                     Macui._checkTop();
                     layero.hide();
                 } else {
-                    $('#mac_btn_group_middle .btn.active').removeClass('active');
+                    $('.dock-container .dock-item.active').removeClass('active');
                     $(this).addClass('active');
                     Macui._settop(layero);
                 }
             } else {
                 $(this).addClass('show');
-                $('#mac_btn_group_middle .btn.active').removeClass('active');
+                $('.dock-container .dock-item.active').removeClass('active');
                 $(this).addClass('active');
                 Macui._settop(layero);
                 layero.show();
             }
         });
 
-
         Macui._iframeOnClick.track(layero_opened.find('iframe:first')[0], function () {
             if (Object.getOwnPropertyNames(Macui._iframe_click_lock_children).length === 0) {
                 Macui._settop(layero_opened);
@@ -1242,7 +1249,7 @@ window.Macui = {
         $(".mac-open-iframe").remove();
         $("#mac_btn_group_middle").html("");
         Macui._countTask = 0;
-        Macui._renderBar();
+        Macui.renderDocks();
     },
     setAnimated: function (animated_classes, animated_liveness) {
         this._animated_classes = animated_classes;