拼命加载中...

Gridea NexT自定义鼠标右键菜单

给你的博客添加自定义鼠标右键菜单!如果这篇文章对你有帮助,还请打赏支持一下🙏!

  • 实现效果请参考本站。

Gridea主题目录 > NexT > templates > _blocks 目录下创建 mouseright.ejs 文件。

※特别说明:
如果你使用其他主题(包含其他平台的主题),请在所有页面的 </body> 前添加代码(建议添加在模板文件中)。你的网站可能需要先引入font-awesome图标库才能使用以下面的代码。

mouseright.ejs 文件中添加下面的代码:

<!--鼠标右键菜单开始-->
<style>
.usercm 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: 5px;
}
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:#73c9e5;border-radius: 5px
}
div.usercm ul li a i{
  margin-right:10px
}
.usercm a.disabled{
  color:#c8c8c8!important;cursor:not-allowed
}
.usercm a.disabled:hover{
  background-color:rgba(255,11,11,0)!important
}
div.usercm{
  background:#fff !important;
}
</style>

<script>
//绑定页面相关事件
(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 getSelect() {
  "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容!") : document.execCommand("Copy")
}
function GoogleSearch() {
  var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
  "" == a ? layer.msg("请选择需要搜索的内容!") : window.open("https://www.google.com/search?q=" + a)
}
function BingSearch() {
  var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
  "" == a ? layer.msg("请选择需要搜索的内容!") : window.open("https://www.bing.com/search?q=" + a)
}
function BaiduSearch() {
  var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
  "" == a ? layer.msg("请选择需要搜索的内容!") : window.open("https://www.baidu.com/s?wd=" + a)
}
function toRefresh(){
  window.location.reload()
}
$(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())
});
</script>

<div class="usercm" style="display: none;">
  <ul>
    <li style="border-bottom:1px solid gray"><a href="/"><i class="fa fa-home"></i><span>首页</span></a></li>
    <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file"></i><span>复制</span></a></li>
    <li><a href="javascript:void(0);" onclick="GoogleSearch();"><i class="fa fa-google"></i><span>Google搜索</span></a></li>
    <li style="border-bottom:1px solid gray"><a href="javascript:void(0);" onclick="BingSearch();"><i class="fa fa-search"></i><span>Bing搜索</span></a></li>
    <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
    <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
    <li style="border-bottom:1px solid gray"><a href="javascript:void(0);" onclick="toRefresh()"><i class="fa fa-refresh"></i><span>刷新</span></a></li>
    <li><a href="/link" target="_blank"><i class="fa fa-external-link"></i><span>导航</span></a></li>
    <li><a href="/post/about"><i class="fa fa-info-circle"></i><span>关于</span></a></li>
  </ul>
</div>
<!--鼠标右键菜单结束-->
  • 根据个人需求改动代码。

分别打开 Gridea主题目录 > NexT > templates 目录下的 archives.ejsindex.ejspost.ejstag.ejstags.ejsfriends.ejs 文件,在 </body> 上方另起一行并添加下面代码:

<%- include('./_blocks/mouseright') %>

本文由博主原创,请尊重他人的劳动成果,转载请务必保留原文链接并注明来源,谢谢合作!如果这篇文章对你有帮助,还请打赏支持一下🙏!


---------- 本文到此结束 感谢您的阅读 ----------

赞赏



评论说明
1. 您需要先登录/注册后才能提交评论;
2. 请使用 简体中文 发表评论;
3. 若表情无法加载,请刷新页面重试;
4. 评论智能过滤已开启,请勿提交无意义评论;
5. 评论审核已开启,您的评论将在审核后显示,请勿重复提交评论,谢谢配合!