侧边栏壁纸
博主头像
小莫唐尼博主等级

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 20 篇文章
  • 累计创建 35 个标签
  • 累计收到 105 条评论

目 录CONTENT

文章目录

Joe 美化(1):增加一个右键菜单功能

小莫唐尼
2022-05-26 / 6 评论 / 10 点赞 / 342 阅读 / 1,164 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-27,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

前几天看到一个大佬的网站加了一个右键菜单,将代码引用后发现部分功能异常,不可使用,所以自己重新修改了一下。

新增功能

1. 增加站内搜索;

代码使用

第一步:下载提示插件

本次用到的插件为:toastify-js一个开源轻量提示插件,点击此处到Github下载

第二步:引用提示插件

配置路径:joe主题设置->自定义。
说明:这里可以使用附件管理来上传第一步下载好的附件,然后拷贝地址使用。

配置弹窗提示css,如图:

image

配置弹窗提示js脚本,如图:

image-1653540323789

第三步:配置右键菜单

配置路径:joe主题设置->自定义。

添加自定义CSS

image-1653540529278

a {text-decoration: none;}
div.usercm{overflow: hidden;background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:99;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:#fb6c28}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
添加自定义JS(body)
 function createRightMenu(){
   var _template=`  
    <ul>
        <li><a href="https://b.925i.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> 
      <li ><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度</span></a></li>
      <li ><a href="javascript:void(0);" onclick="blogSearch();"><i class="fa fa-search fa-fw"></i><span>站内</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
        <li><a href="https://b.925i.cn/links"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://b.925i.cn/s/messages"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li>
    </ul> 
`
let _blogBody= document.getElementsByTagName('body')[0];
let _usercmDom = document.createElement('div');
_usercmDom.className='usercm';
_usercmDom.style.left='199px';
_usercmDom.style.top='5px';
_usercmDom.style.display='none';
_usercmDom.innerHTML = _template;
_blogBody.appendChild(_usercmDom);
}
createRightMenu();
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
function showToast(text){
   Toastify({
  text: text,
  className: "info",
offset:{y:'50px'},
  position: "center", 
  style: {
    background: "linear-gradient(to right, #6394FD, #4E73F6)",
  }
}).showToast();
}

    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? showToast("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")
    };
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? showToast("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
    };
   function blogSearch() {
var _port = location.port?':'+location.port:''
var _href = location.protocol+'//'+location.hostname+_port+'/search?keyword='
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? showToast("啊噢...你没还没选择文字呢!") : window.open(_href + a)
    };
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });


😎😎😎大功告成,完结撒花!!!

10

评论区