自定义网站右键菜单

最近在某博客浏览时发现其采用了自定义右键菜单,于是想给自己的松子分享也添加一个。起初不怎么兼容,但查找资料后最终实现了预期效果。

技术松鼠早已实现轮盘状菜单,电脑浏览器未登录可见,你可右键试试。

想要代码就自己view-source:分析一下,这里不多言啦。

本站效果如下:

图标原为彩色,但主题样式将图标统一为单色,采用的是iconfont

如何实现:

一、添加html代码

<div class="usercm" style="left: 199px; top: 5px; display: none;">
	<ul>
		<li><a href="https://www.szfx.top/"><i class="iconfont icon-home"></i><span>首页</span></a></li>
		<li><a href="javascript:void(0);" onclick="getSelect();"><i class="iconfont icon-copy"></i><span>复制</span></a></li>
		<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="iconfont icon-Search"></i><span>搜索</span></a></li>
		<li><a href="javascript:history.go(1);"><i class="iconfont icon-qianjin"></i><span>前进</span></a></li>
		<li><a href="javascript:history.go(-1);"><i class="iconfont icon-houtui"></i><span>后退</span></a></li>
		<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="iconfont icon-lx-refresh"></i><span>刷新</span></a></li>
		<li><a href="https://www.szfx.top/links"><i class="iconfont icon-friends"></i><span>友人</span></a></li>
		<li><a href="https://www.szfx.top/guestbook"><i class="iconfont icon-pinglun"></i><span>留言</span></a></li>
		<li><a href="https://api.szfx.top/" target="_blank"><i class="iconfont icon-links"></i><span> API</span></a></li>
	</ul>
</div> 

如果想仅未登录和电脑端查看则用php函数包裹

<?php if((!is_user_logged_in())&&(!wp_is_mobile())){ ?>
  //code
<?php } ?>

如果不想在header.php的<body>标签之后中引入上面代码,你可以JS添加$(‘body’).append…

二、引入图标和样式

若想要上面的样式,引入下面的css,当然也可选别的,比如很多主题自带fontawesome。

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2397198_zlxtpqcjxp.css"/>

添加自定义样式:

/*右键*/
a {text-decoration: none;}
div.usercm{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:10000;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:#7486E7}
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函数

(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 ($) {
    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())
})(jQuery);

function getSelect() {
    "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? toastr.info("啊噢...你没还没选择文字呢!", "复制提示") : document.execCommand("Copy")
}
/*复制提示*/
$(document).ready(function () {
    $("body").bind('copy', function (e) {
        if ((window.getSelection ? window.getSelection() : document.selection.createRange().text) != '') {
            toastr.success("撰文不易,请保留出处,谢谢!", "复制成功!");
        } else {
            toastr.info("啊噢...你没还没选择文字呢!", "复制提示");
        }
    })
});
function baiduSearch() {
    var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
    "" == a ? toastr.info("啊噢...你没还没选择文字呢!", "搜索提示") : window.open("https://www.baidu.com/s?wd=" + a)
}

注意: 网络上第二个函数大多是这样:$(function() {... });可能会出现错误:

TypeError: $ is not a function when calling jQuery function(大概是与主题自带函数重复)

参考stackoverflow的帖子(Google大法好,一下就找到了)

代码带复制提示,如果是handsome主题,你可以使用其自带的提示框函数

$.message({
    title: '复制提示',
    message: "啊噢...你没还没选择文字呢!",
    type: 'warning'
})

如果是Wordpress等其他博客系统,你可以参考

文本复制监听,右上弹窗提示

如果觉着不错,欢迎点赞尝试哦~

本文采用 CC BY-NC-SA 3.0 Unported 许可,转载请以超链接注明出处。
原文地址:自定义网站右键菜单 作者:松鼠小
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: Telegram @AmashiroNatsukiEars_NoWord Sticker
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
AmashiroNatsukiEars
小恐龙
花!
上一篇
下一篇