Главная Обзор Помощь
Регистрация Вход
root
/
UseStudio.Browers
Следить 2
В избранное 0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

解决地址栏的一些问题

kangna 8 лет назад
Родитель
8d538f0776
Сommit
e7553d3a0d
3 измененных файлов с 177 добавлено и 39 удалено
Единый вид Показать статистику Diff
  1. 9 25
      resources/app/browser.html
  2. 43 0
      resources/app/public/css/browser.css
  3. 125 14
      resources/app/public/js/browser.js

+ 9 - 25
resources/app/browser.html
Просмотреть файл 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>有思浏览器</title>
 
     <title>有思浏览器</title>
 
     <link rel="stylesheet" href="./public/css/browser.css">
 
     <link rel="stylesheet" href="./public/css/browser.css">
 
-    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <section style="-webkit-app-region: no-drag" class="bowerTop"></section>
 
 <section style="-webkit-app-region: no-drag" class="bowerTop"></section>
 
@@ -48,35 +48,19 @@
 
 </div>
 
 </div>
 
 <div class="Favorites" style="z-index: 1;">
 
 <div class="Favorites" style="z-index: 1;">
 
     <ul id="FavoritesUl">
 
     <ul id="FavoritesUl">
 
-        <li onclick="US_Browser.gotoLove('http://www.1473.cn/')">
 
-            <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
 
-            <p class="Webname" draggable="true">云端 - 1473.cn</p>
 
-        </li>
 
-        <li onclick="US_Browser.gotoLove('http://dafen.1473.cn/')">
 
-            <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
 
-            <p class="Webname" draggable="true">云评分官网</p>
 
-        </li>
 
-        <li onclick="US_Browser.gotoLove('http://task.1473.cn/')">
 
-            <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
 
-            <p class="Webname" draggable="true">有思任务系统</p>
 
-        </li>
 
+
 
     </ul>
 
     </ul>
 
     <div class="FavoritesMore"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
 
     <div class="FavoritesMore"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
 
 </div>
 
 </div>
 
 <ul class="MouseMenuMainer" style="right: 1px;top:81px;display: none">
 
 <ul class="MouseMenuMainer" style="right: 1px;top:81px;display: none">
 
-    <li onclick="US_Browser.gotoLove('http://www.1473.cn/')" class="FavoritesLI">
 
-        <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
 
-        <p class="Webname" draggable="true">云端 - 1473.cn</p>
 
-    </li>
 
-    <li onclick="US_Browser.gotoLove('http://www.1473.cn/')" class="FavoritesLI">
 
-        <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
 
-        <p class="Webname" draggable="true">云评分官网</p>
 
-    </li>
 
-    <li onclick="US_Browser.gotoLove('http://www.1473.cn/')" class="FavoritesLI">
 
-        <img class="tag_favicon" draggable="true" style="display: block;" src="./public/img/tray/logo.png">
 
-        <p class="Webname" draggable="true">有思任务系统</p>
 
-    </li>
 
+
 
 </ul>
 
 </ul>
 
+
 
+<ul id="US_BookmarkSet" class="US_BookmarkSet">
 
+    <li id="DelectBookmark">删除书签</li>
 
+    <!--<li class="MouseMenuMainStep"></li>-->
 
+</ul>
 
+
 
 <ul class="MouseMenuMain" id="webviewBrowserMenu">
 
 <ul class="MouseMenuMain" id="webviewBrowserMenu">
 
     <li class="US_OpenLinkInNew"  style="display: none">在新标签页中打开链接</li>
 
     <li class="US_OpenLinkInNew"  style="display: none">在新标签页中打开链接</li>
 
     <li class='US_OpenImgInNew' style="display: none">在新标签页中打开图片</li>
 
     <li class='US_OpenImgInNew' style="display: none">在新标签页中打开图片</li>

+ 43 - 0
resources/app/public/css/browser.css
Просмотреть файл 

@@ -125,6 +125,7 @@ button:hover {
 
     margin: 0 3px;
 
     margin: 0 3px;
 
     border-radius: 5px;
 
     border-radius: 5px;
 
     padding: 0 5px;
 
     padding: 0 5px;
 
+    background: -webkit-linear-gradient(left, white , #f1f1ff);
 
     -webkit-transition: all .3s;
 
     -webkit-transition: all .3s;
 
     -moz-transition: all .3s;
 
     -moz-transition: all .3s;
 
     -ms-transition: all .3s;
 
     -ms-transition: all .3s;
 
@@ -143,10 +144,13 @@ button:hover {
 
     margin: 3px 3px;
 
     margin: 3px 3px;
 
 }
 
 }
 
 .Favorites > ul > li p{
 
 .Favorites > ul > li p{
 
+    width: auto;
 
+    max-width: 81px;
 
     float: left;
 
     float: left;
 
     font-size: 12px;
 
     font-size: 12px;
 
     line-height: 25px;
 
     line-height: 25px;
 
     margin: 0 3px;
 
     margin: 0 3px;
 
+    overflow: hidden;
 
 }
 
 }
 
 .BrowerHead button{
 
 .BrowerHead button{
 
     float: left;
 
     float: left;
 
@@ -209,6 +213,7 @@ button:hover {
 
 #FavoritesUl {
 
 #FavoritesUl {
 
     overflow: hidden;
 
     overflow: hidden;
 
 }
 
 }
 
+
 
 .icon-ellipsis-verter{
 
 .icon-ellipsis-verter{
 
     color: #8c8c8c;
 
     color: #8c8c8c;
 
     font-weight: lighter;
 
     font-weight: lighter;
 
@@ -412,6 +417,38 @@ button.BrowwerAdd {
 
     cursor:pointer;
 
     cursor:pointer;
 
 }
 
 }
 
 
 
+.US_BookmarkSet {
 
+    position:absolute;
 
+    z-index:22;
 
+    width:auto;
 
+    height:auto;
 
+    display: none;
 
+    min-width:90pt;
 
+    background:#fff;
 
+    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
 
+    -moz-user-select:none;
 
+    -webkit-user-select:none;
 
+    -ms-user-select:none;
 
+    -khtml-user-select:none;
 
+    user-select:none;
 
+}
 
+.US_BookmarkSet li {
 
+    width: auto;
 
+    max-width: 400px;
 
+    font-size: 13px;
 
+    padding: 6px 18px;
 
+    color: #333;
 
+    text-align: left;
 
+    white-space: nowrap;
 
+    margin-bottom: 2px;
 
+}
 
+
 
+.US_BookmarkSet li:hover{
 
+    background-color:#eee;
 
+    color:#000;
 
+    cursor:pointer;
 
+}
 
+
 
 .MouseMenuMainer{
 
 .MouseMenuMainer{
 
     position:absolute;
 
     position:absolute;
 
     z-index:22;
 
     z-index:22;
 
@@ -729,6 +766,12 @@ button.BrowwerAdd {
 
     float: unset;
 
     float: unset;
 
 }
 
 }
 
 /* 首页end */
 
 /* 首页end */
 
+.column.over {
 
+    border: 1px dashed #000;
 
+}
 
+.column {
 
+    cursor: move;
 
+}
 
 .animated{-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
 
 .animated{-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
 
 .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
 
 .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
 
 @-webkit-keyframes fadeIn{from{opacity:0}
 
 @-webkit-keyframes fadeIn{from{opacity:0}

+ 125 - 14
resources/app/public/js/browser.js
Просмотреть файл 

@@ -574,23 +574,27 @@ US_Browser.HeadBind=function(){
 
             })
 
             })
 
             window.localStorage.setItem('arr', JSON.stringify(c))
 
             window.localStorage.setItem('arr', JSON.stringify(c))
 
         }
 
         }
 
-        $('#FavoritesUl')[0].innerHTML += `<li onclick="US_Browser.gotoLove('${US_Browser.SelecteWebview.src}')">
 
-            <img class="tag_favicon" draggable="true" style="display: block;" src=${$('.BrowerActive')[0].children[0].children[0].src}>
 
-            <p class="Webname" draggable="true">${US_Browser.SelecteWebview.getTitle()}</p>
 
-        </li>`
 
+        US_Browser.xuanrang(US_Browser.SelecteWebview.src, $('.BrowerActive')[0].children[0].children[0].src, US_Browser.SelecteWebview.getTitle())
 
         $('#LoveWebSize')[0].className = 'fa fa-heart'
 
         $('#LoveWebSize')[0].className = 'fa fa-heart'
 
+        US_Browser.drag()
 
     }
 
     }
 
     US_Browser.Loveitem = () => {
 
     US_Browser.Loveitem = () => {
 
-        if (window.localStorage.getItem('arr') === null){ return }
 
+        if (window.localStorage.getItem('arr') === null){
 
+            let data = [
 
+                    {
 
+                        "url":"http://www.1473.cn/",
 
+                        "icon":"./public/img/tray/logo.png",
 
+                        "title":"云端 - 1473.cn"
 
+                    }
 
+                ]
 
+            data.map((i, j) => {
 
+                US_Browser.xuanrang(i.url, i.icon, i.title)
 
+                window.localStorage.setItem('arr', `[{"url": "${i.url}","icon": "${i.icon}", "title": "${i.title}"}]`)
 
+            })
 
+            return
 
+        }
 
         JSON.parse(window.localStorage.getItem('arr')).map((i, j) => {
 
         JSON.parse(window.localStorage.getItem('arr')).map((i, j) => {
 
-            $('#FavoritesUl')[0].innerHTML += `<li onclick="US_Browser.gotoLove('${i.url}')">
 
-                <img class="tag_favicon" draggable="true" style="display: block;" src=${i.icon}>
 
-                <p class="Webname" draggable="true">${i.title}</p>
 
-            </li>`
 
-            $('.MouseMenuMainer')[0].innerHTML += `<li onclick="US_Browser.gotoLove('${i.url}')">
 
-                <img class="tag_favicon" draggable="true" style="display: block;" src=${i.icon}>
 
-                <p class="Webname" draggable="true">${i.title}</p>
 
-            </li>`
 
+            US_Browser.xuanrang(i.url, i.icon, i.title)
 
         })
 
         })
 
     }
 
     }
 
     US_Browser.IsLove = (msg) => {
 
     US_Browser.IsLove = (msg) => {
 
@@ -605,6 +609,20 @@ US_Browser.HeadBind=function(){
 
         US_Browser.SelecteWebview.src = msg
 
         US_Browser.SelecteWebview.src = msg
 
         US_Browser.MouseMenuMainer.style.display = 'none'
 
         US_Browser.MouseMenuMainer.style.display = 'none'
 
     }
 
     }
 
+    US_Browser.xuanrang = (url, icon, title) => {
 
+        $('#FavoritesUl')[0].innerHTML += `<li class="column" draggable="true" data='${url}'>
 
+                <div onclick="US_Browser.gotoLove('${url}')">
 
+                    <img class="tag_favicon" draggable="true" style="display: block;" src=${icon}>
 
+                    <p class="Webname" draggable="true"><nobr>${title}</nobr></p>
 
+                </div>
 
+            </li>`
 
+        $('.MouseMenuMainer')[0].innerHTML += `<li class="column" draggable="true" data='${url}'>
 
+                <div onclick="US_Browser.gotoLove('${url}')">
 
+                    <img class="tag_favicon" draggable="true" style="display: block;" src=${icon}>
 
+                    <p class="Webname" draggable="true">${title}</p>
 
+                </div>
 
+            </li>`
 
+    }
 
     US_Browser.FavoritesMore.onclick = () => {
 
     US_Browser.FavoritesMore.onclick = () => {
 
         US_Browser.MouseMenuMainer.style.display = 'block'
 
         US_Browser.MouseMenuMainer.style.display = 'block'
 
     }
 
     }
 
@@ -695,6 +713,94 @@ US_Browser.HeadBind=function(){
 
             US_Browser.CampusInfo();
 
             US_Browser.CampusInfo();
 
         }
 
         }
 
     };
 
     };
 
+    US_Browser.drag = function() {
 
+        US_Browser.columns = document.querySelectorAll('#FavoritesUl .column');
 
+        US_Browser.dragEl = null;
 
+        [].forEach.call(US_Browser.columns,function(column){
 
+            column.addEventListener("dragstart",US_Browser.domdrugstart,false);
 
+            column.addEventListener('dragenter', US_Browser.domdrugenter, false);
 
+            column.addEventListener('dragover', US_Browser.domdrugover, false);
 
+            column.addEventListener('dragleave', US_Browser.domdrugleave, false);
 
+            column.addEventListener('drop', US_Browser.domdrop, false);
 
+            column.addEventListener('dragend', US_Browser.domdrapend, false);
 
+            column.addEventListener('mousedown', US_Browser.onmousedown, false);
 
+        });
 
+    }
 
+    US_Browser.onmousedown = function(e){
 
+        let btnNum = e.button;
 
+        let BookmarkSet = document.querySelector('#US_BookmarkSet')
 
+        if(btnNum==2){
 
+            BookmarkSet.style.display = 'block'
 
+            BookmarkSet.style.top = `${e.clientY}px`
 
+            BookmarkSet.style.left = `${e.clientX}px`
 
+            US_Browser.DelectBookmarktar = this
 
+        }
 
+    }
 
+    US_Browser.domdrugstart = function(e) {
 
+
 
+        US_Browser.dragEl = this;
 
+
 
+        e.dataTransfer.setData("text/html",this.innerHTML);
 
+    }
 
+    US_Browser.domdrugenter = function(e) {
 
+    }
 
+    US_Browser.domdrugover = function(e) {
 
+        if (e.preventDefault) {
 
+            e.preventDefault();
 
+        }
 
+
 
+        e.dataTransfer.dropEffect = 'move';
 
+
 
+        return false;
 
+    }
 
+    US_Browser.domdrugleave = function(e) {
 
+    }
 
+    US_Browser.domdrop = function(e) {
 
+        if (e.stopPropagation) {
 
+            e.stopPropagation();
 
+        }
 
+
 
+        if (US_Browser.dragEl != this) {
 
+            US_Browser.dragEl.innerHTML = this.innerHTML;
 
+            this.innerHTML = e.dataTransfer.getData('text/html');
 
+        }
 
+        let arr = JSON.parse(window.localStorage.getItem('arr'));
 
+        let thiser = US_Browser.getchild(this)
 
+        let laster = US_Browser.getchild(US_Browser.dragEl)
 
+        let car = arr[thiser]
 
+        arr[thiser] = arr[laster]
 
+        arr[laster] = car
 
+        window.localStorage.setItem('arr', JSON.stringify(arr))
 
+        return false;
 
+    }
 
+    US_Browser.domdrapend = function(e) {
 
+        [].forEach.call(US_Browser.columns, function (column) {
 
+        });
 
+    }
 
+    US_Browser.getchild = function(msg){
 
+        var i=0;
 
+        while(msg = msg.previousSibling){
 
+            i++;
 
+        }
 
+        return i - 1
 
+    }
 
+    US_Browser.DelectBookmark.onclick = function(){
 
+        let BookmarkSet = document.querySelector('#US_BookmarkSet')
 
+        BookmarkSet.style.display = 'none'
 
+        let b = JSON.parse(window.localStorage.getItem('arr'))
 
+        b.map((i, j) => {
 
+            if (i.url === US_Browser.DelectBookmarktar.getAttribute('data')) {
 
+                let arr = JSON.parse(window.localStorage.getItem('arr'))
 
+                arr.splice(j, 1);
 
+                window.localStorage.setItem('arr', JSON.stringify(arr))
 
+                $('#FavoritesUl')[0].removeChild($('#FavoritesUl')[0].children[j + 3])
 
+                US_Browser.DelectBookmarktar.style.display = 'none';
 
+                if(i.url === US_Browser.SelecteWebview.src){
 
+                    $('#LoveWebSize')[0].className = 'fa fa-heart'
 
+                }
 
+            }
 
+        })
 
+    }
 
     US_Browser.Head[0].style.color = '#d3d3d3';
 
     US_Browser.Head[0].style.color = '#d3d3d3';
 
     US_Browser.Head[1].style.color = '#d3d3d3';
 
     US_Browser.Head[1].style.color = '#d3d3d3';
 
     US_Browser.Head[2].style.color = '#d3d3d3';
 
     US_Browser.Head[2].style.color = '#d3d3d3';
 
@@ -715,6 +821,8 @@ US_Browser.Init=function () {//初始化
 
     US_Browser.MenuGo=$(".US_Browers_go")[0];
 
     US_Browser.MenuGo=$(".US_Browers_go")[0];
 
     US_Browser.FavoritesMore = $('.FavoritesMore')[0]
 
     US_Browser.FavoritesMore = $('.FavoritesMore')[0]
 
     US_Browser.MouseMenuMainer = $('.MouseMenuMainer')[0]
 
     US_Browser.MouseMenuMainer = $('.MouseMenuMainer')[0]
 
+    US_Browser.DelectBookmark = $('#DelectBookmark')[0]
 
+    US_Browser.DelectBookmarktar = ''
 
     US_Browser.Elm[0].onkeyup=function (e) {//查找的input
 
     US_Browser.Elm[0].onkeyup=function (e) {//查找的input
 
         if(this.value.length&&e.keyCode!==8){//如果存在值
 
         if(this.value.length&&e.keyCode!==8){//如果存在值
 
             US_Browser.SelecteWebview.findInPage(this.value);
 
             US_Browser.SelecteWebview.findInPage(this.value);
 
@@ -732,4 +840,7 @@ US_Browser.Init=function () {//初始化
 
     US_Browser.HeadBind();
 
     US_Browser.HeadBind();
 
     US_Browser.IpcBind();
 
     US_Browser.IpcBind();
 
     US_Browser.Loveitem();
 
     US_Browser.Loveitem();
 
-}();
 
+}();
 
+window.onload = function () {
 
+    US_Browser.drag();
 
+}