csxy_dgut202235010623
/
568tools
mirror of https://github.com/PJ-568/568tools.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

添加右键菜单

Browse Source
main
PJ568 2 years ago
parent 9557bdb01e
commit 2d7a27c8af
7 changed files with 106 additions and 3 deletions
Show Stats Download Patch File Download Diff File

2
404.html
Unescape View File

@ -23,6 +23,6 @@
</div> </div>
</div> </div>
</div> </div>
<include src="https://tools.pj568.eu.org/header.html"></include> <include src="https://tools.pj568.eu.org/header.html"></include><include src="https://tools.pj568.eu.org/contextmenu.html"></include>
</body> </body>
</html> </html>

2
comment/index.html
Unescape View File

@ -7,6 +7,7 @@
<title>568Tools&nbsp;|&nbsp;Comment</title> <title>568Tools&nbsp;|&nbsp;Comment</title>
<link rel="icon" type="image/svg+xml" href="../img/icon.svg"> <link rel="icon" type="image/svg+xml" href="../img/icon.svg">
<link rel="stylesheet" href="../css/tool_type.css"> <link rel="stylesheet" href="../css/tool_type.css">
<script src="https://tools.pj568.eu.org/js/include.js"></script>
</head> </head>
<body> <body>
<div class="bg-img"></div> <div class="bg-img"></div>
@ -59,5 +60,6 @@
</svg> </svg>
</a> </a>
</div> </div>
<include src="https://tools.pj568.eu.org/contextmenu.html"></include>
</body> </body>
</html> </html>

10
contextmenu.html
Unescape View File

@ -0,0 +1,10 @@
<ul id="rcb_menu">
<li id="rcb_t1">🏠&nbsp;首页</li>
<li class="hr_break"></li>
<li id="rcb_t2">↑&nbsp;页顶</li>
<li id="rcb_t3">↩&nbsp;返回</li>
<li id="rcb_t4">↪&nbsp;前进</li>
<li id="rcb_t5">↻&nbsp;重载</li>
<li id="rcb_t6">🆕&nbsp;新标签页打开</li>
</ul>
<script src="https://tools.pj568.eu.org/js/contextmenu.js"></script>

39
css/tool_type.css
Unescape View File

@ -365,3 +365,42 @@ ins.adsbygoogle[data-ad-status="unfilled"]{
background: #424242; background: #424242;
color: #ccc; color: #ccc;
} }
/* 右键菜单 */
#rcb_menu{
display: none;
position: fixed;
margin: 0;
padding: 0;
list-style: none;
width: 150px;
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 5px;
z-index: 1100;
background-color: #f9f9f9;
box-shadow:0 0 10px #252423
}
#rcb_menu>li{
border-radius: 10px;
padding: 5px 10px 0 10px;
height: 30px
}
#rcb_menu>li:hover{
background-color: #252423;
color: #F7F6F2;
cursor: pointer
}
#rcb_menu>.hr_break{
padding: 0;
height: 1px;
background-color:#A2A2A2
}
#rcb_menu>.hr_break:hover{
background-color:#A2A2A2;
cursor: default
}
#rcb_menu>#rcb_t6{
display: none
}

2
index.html
Unescape View File

@ -6,6 +6,7 @@
<title>568Tools&nbsp;在线工具箱</title> <title>568Tools&nbsp;在线工具箱</title>
<link rel="icon" type="image/svg+xml" href="./img/icon.svg"> <link rel="icon" type="image/svg+xml" href="./img/icon.svg">
<link rel="stylesheet" href="./css/tool_type.css"> <link rel="stylesheet" href="./css/tool_type.css">
<script src="https://tools.pj568.eu.org/js/include.js"></script>
</head> </head>
<body> <body>
<div class="bg-img"></div> <div class="bg-img"></div>
@ -36,6 +37,7 @@
</svg> </svg>
</a> </a>
</div> </div>
<include src="https://tools.pj568.eu.org/contextmenu.html"></include>
</body> </body>
</html> </html>
<script src="568tools/js/api.js"></script> <script src="568tools/js/api.js"></script>

50
js/contextmenu.js
Unescape View File

@ -0,0 +1,50 @@
window.addEventListener('contextmenu', RightClickMenu);
const rightMenu = document.querySelector('#rcb_menu');
const newTab = document.querySelector('#rcb_t6');
function RightClickMenu(e) {
e.preventDefault();
rightMenu.style.display = 'block';
if (e.target.closest('a')) {
newTab.style.display = 'block';
} else {
newTab.style.display = 'none';
}
let x = e.clientX, y = e.clientY,
menuWidth = rightMenu.offsetWidth, menuHeight = rightMenu.offsetHeight,
htmlWidth = document.body.clientWidth, htmlHeight = document.body.clientHeight;
if (x + menuWidth < htmlWidth) rightMenu.style.left = x + 'px';
else rightMenu.style.left = htmlWidth - menuWidth + 'px';
if (y + menuHeight < htmlHeight) rightMenu.style.top = y + 'px';
else rightMenu.style.top = htmlHeight - menuHeight + "px";
}
document.body.addEventListener('click', function () {
rightMenu.style.display = 'none';
});
// document.querySelector('#rcb_menu').addEventListener('click', function (e) {
rightMenu.addEventListener('click', function (e) {
switch (e.target.id) {
case "rcb_t1":
window.location.href="temp.html";
break;
case "rcb_t2":
window.location.href="#";
break;
case "rcb_t3":
window.history.back(-1);
break;
case "rcb_t4":
window.history.forward(1);
break;
case "rcb_t5":
window.location.reload();
break;
case "rcb_t6":
if (e.target.closest('.open-in-new-tab')) {
window.open(e.target.closest('.open-in-new-tab').getAttribute('href'), '_blank');
}
break;
default:
console.error(e.target.id);
break;
}
});

4
js/popup.js
Unescape View File

@ -48,7 +48,7 @@ function initData(){
list_html+=`<div class="item"><h2>最近访问</h2><div class="child">`; list_html+=`<div class="item"><h2>最近访问</h2><div class="child">`;
for(var i in sotreList){ for(var i in sotreList){
var li = sotreList[i]; var li = sotreList[i];
list_html+=`<a href="${li.url}" target="_self">${li.name}</a>`; list_html+=`<a class="open-in-new-tab" href="${li.url}" target="_self">${li.name}</a>`;
} }
list_html+=`</div></div>`; list_html+=`</div></div>`;
} }
@ -60,7 +60,7 @@ function initData(){
list_html+=`<div id="${item.id}" class="item"><h2>${item.name}</h2><div class="child">`; list_html+=`<div id="${item.id}" class="item"><h2>${item.name}</h2><div class="child">`;
for(var j in item.list){ for(var j in item.list){
var li=item.list[j]; var li=item.list[j];
list_html+=`<a href="${li.url}"${li.hot==1 ? ' class="red" ' : ''}idx="${i}_${j}" target="_self" title="${li.name}">${li.name}</a>`; list_html+=`<a href="${li.url}" class="${li.hot==1 ? 'red open-in-new-tab' : 'open-in-new-tab'}" idx="${i}_${j}" target="_self" title="${li.name}">${li.name}</a>`;
} }
list_html+=`</div></div>`; list_html+=`</div></div>`;
} }

Write Preview
Loading…
Cancel
Save