你的位置:首页 > Java教程

[Java教程]博客园博文添加自定义右键菜单


×
目录
[1]页面设计 [2]菜单逻辑 [3]功能实现[4]完整源码

前面的话

  本文是DOM鼠标事件的一个实际应用。查看博客园的博客文章时,有的文章非常长,却没有回到顶部按钮;而且文章的点赞和评论都在文章最底部,使用时并不方便。所以使用自定义右键菜单来实现回到顶部、点赞、评论这三个主要功能

 

页面设计

  首先将这三个功能以一个列表<ul>的形式放置。鼠标移入时样式改变,移出时还原

<style>body{margin: 0;}ul{  margin: 0;  padding: 0;  list-style: none;}.list{  width: 100px;  text-align: center;  cursor: pointer;  font:20px/40px '宋体';  background-color: #eee;}.in:hover{  background-color: lightblue;  color: white;  font-weight:bold;}</style><ul id="list" class="list">  <li class="in">顶部</li>  <li class="in">点赞</li>  <li class="in">评论</li></ul>

菜单逻辑

  菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分

默认行为

  通常,点击右键时,会弹出浏览器的默认右侧菜单


  通过return false可以实现阻止默认行为的效果,当然也可以使用preventDefault()和returnValue,详细信息移步至此

document.oncontextmenu = function(){  return false;}

显隐

  右键菜单默认隐藏,点击右键时显示,点击左键时再隐藏

  关于元素显隐,个人总结过共9种思路,本文就用最简单的display属性

<div id="test" style="height: 100px;width: 100px;background-color: pink;"></div><script>document.onclick = function(){  test.style.display = 'none';}document.oncontextmenu = function(){  test.style.display = 'block';  return false;}</script>

位置判断

  鼠标对象共有6对坐标位置信息,若把右键菜单设置为fixed固定定位,则选择clientX/Y即可

  一般地,右键菜单的左上角位置应该是当前鼠标的坐标处

  但是,还有另外2种情况需要考虑

  【1】如果鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置

  【2】如果鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧

  元素的尺寸信息共有偏移尺寸offset、可视区尺寸client和滚动尺寸scroll,此时菜单的宽高应该为偏移尺寸offsetWidth/offsetHeight(全尺寸包含width、padding、border)

<div id="test" style="position:fixed;height: 100px;width: 100px;background-color: pink;"></div><script>document.onclick = function(){  test.style.display = 'none';}document.oncontextmenu = function(e){  e = e || event;  test.style.left = e.clientX + 'px';  test.style.top = e.clientY + 'px';  //注意,由于加法、减法的优先级高于大于、小于的优先级,所以不用加括号,详细情况移步至此  if(document.documentElement.clientHeight - e.clientY < test.offsetHeight){    test.style.top = e.clientY - test.offsetHeight + 'px';  }  if(document.documentElement.clientWidth - e.clientX < test.offsetWidth){    test.style.left = document.documentElement.clientWidth - test.offsetHeight + 'px';  }  test.style.display = 'block';  return false;}</script>

功能实现

  共用有回到顶部、点赞和评论三个功能需要实现

回到顶部

  回到顶部共有5种实现方法,下面使用可读写的scrollTop属性进行效果实现

<body style="height: 3000px;"><button id="test" style="position:fixed;right:10px;bottom:10px;">回到顶部</button><script>var timer = null;test.onclick = function(){  cancelAnimationFrame(timer);  timer = requestAnimationFrame(function fn(){    var oTop = document.body.scrollTop || document.documentElement.scrollTop;    if(oTop > 0){      document.body.scrollTop = document.documentElement.scrollTop = oTop - 160;      timer = requestAnimationFrame(fn);    }else{      cancelAnimationFrame(timer);    }    });}</script></body> 

点赞

  点赞函数是博客园自己写的,我们看不到内部函数也无法使用。如果想在右键菜单中使用点赞功能,就需要模拟点击事件。点击右键菜单中的点赞项时,触发博客园的自带的点赞项的click事件

  由下图可知,点赞函数加在<div >上


  由一个小例子来说明模拟点击事件如何实现

  点击按钮1时,显示1;点击按钮2时,也要实现同样的功能

<button id="btn1">按钮1</button><button id="btn2">按钮2</button><div id="result" style="height: 30px;width: 100px;background-color: pink;"></div><script>btn1.onclick= function(){  result.innerHTML += '1';}btn2.onclick = btn1.onclick;</script>

  如法炮制 

<div id="test">点赞</div><script>window.onload = function(){  test.onclick = document.getElementById('div_digg').children[0].onclick;  }</script>

  增加获取最新点赞数的功能

<div id="test">点赞(已获<span id="zanNum">0</span>赞)</div><script>window.onload = function(){  test.onclick = document.getElementById('div_digg').children[0].onclick;  }function getNewZanNum(){  zanNum.innerHTML = document.getElementById('digg_count').innerHTML;  }getNewZanNum();test.addEventListener('click',function(){  getNewZanNum();})</script>

评论

  点击右键菜单中的评论项时,页面定位到评论区的位置  

  由图中可知,评论区为<div id="comment_form_container">


  将元素置于可视区域内有很多方法,如scrollTo()、scrollBy()、通过scrollTop计算、scrollIntoView()方法等等,详细情况移步至此

  下面利用scrollIntoView()方法滚动当前元素,进入浏览器的可见区域


<div id="test">评论</div><script>window.onload = function(){  test.onclick = function(){    document.getElementById('comment_form_container').scrollIntoView();  }}</script>

 

完整源码

  将HTML结构和CSS样式写成javascript生成的行为,最终形成一份js文件,代码如下

<script>/*******生成元素*******/var list = document.createElement('ul');list.id = 'list';list.innerHTML = '<li id="menuTop">回到顶部</li>\  <li id="menuFavour">点赞(<span id="favourNum">0</span>赞)</li>\  <li id="menuCommand">评论</li>';document.body.appendChild(list);/*******添加样式**********/function loadStyles(str){  var style = document.createElement("style");  style.type = "text/css";  try{    style.innerHTML = str;  }catch(ex){    style.styleSheet.cssText = str;  }  var head = document.getElementsByTagName('head')[0];  head.appendChild(style); }  loadStyles("#list{margin: 0!important;\  padding: 0!important;\  width: 100px;\  text-align: center;\  cursor: pointer;\  font:20px/40px '宋体';\  background-color: #eee;\  position:fixed;\  display:none;}\  #list li{list-style:none!important;}\#list li:hover{background-color: lightblue;color: white;font-weight:bold;}");    window.onload = function(){/********显示和隐藏菜单***********///左键点击时,菜单隐藏document.onclick = function(){  list.style.display = 'none';}//右键点击时,菜单显示document.oncontextmenu = function(e){  e = e || event;  //通常情况下,菜单的位置就是鼠标的位置  list.style.left = e.clientX + 'px';  list.style.top = e.clientY + 'px';  //当鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置  if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){    list.style.top = e.clientY - list.offsetHeight + 'px';  }  //当鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧  if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){    list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px';  }  list.style.display = 'block';  return false;}  /*********回到顶部功能*********/var timer = null;  menuTop.onclick = function(){  cancelAnimationFrame(timer);  timer = requestAnimationFrame(function fn(){    var oTop = document.body.scrollTop || document.documentElement.scrollTop;    if(oTop > 0){      document.body.scrollTop = document.documentElement.scrollTop = oTop - 160;      timer = requestAnimationFrame(fn);    }else{      cancelAnimationFrame(timer);    }    });}/*********点赞功能**********///模拟原始点赞按钮的点击事件menuFavour.onclick = document.getElementById('div_digg').children[0].onclick;  //获取赞成数的函数function getfavourNum(){  favourNum.innerHTML = document.getElementById('digg_count').innerHTML;  }//页面载入时获取赞成数getfavourNum();//点击菜单中的赞成项后,再获取最新的赞成数menuFavour.addEventListener('click',function(){  getfavourNum();})/*********评论功能*********/menuCommand.onclick = function(){  document.getElementById('comment_form_container').scrollIntoView();}}  </script>

  当然,也可以直接引入js文件,文件在线地址为http://files.cnblogs.com/files/xiaohuochai/contextMenu.js

 

最后

  如何演示?点击右键就出现效果了

  欢迎交流