JavaScript模拟IE右键菜单

代码简介:

JavaScript模拟一个IE右键菜单,还没有屏蔽右键,这个相对简单,大家自己把IE固有的右键屏蔽掉吧。改制的右键风格尽量与系统右键一致,我觉得还行吧。

代码内容:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>JavaScript模拟IE右键菜单_网页代码站(www.webdm.cn)</title>
  <style type="text/css">
       *{
              margin:0;
              padding:0;
       }
       .menu{
              width:170px;
              display:none;
              position:absolute;
              background-color:#FCFDE1;
              cursor:default;
       }
       ol{
              list-style:none;
              width:170px;
              font-size:13px;
              border:1px #aaa solid;
              padding:0px 3px;
       }
       ol li{
              padding:4px 20px;
              text-align:right;
       }
       span{
              float:left;
       }
       .u{
              border-bottom:1px #aaa solid;
       }
       #over{
              background-color:#0033FF;
              color:white;
       }
  </style>
  <script type="text/javascript">
       var left;
       var top;
       var flag;
       window.onload = function(){
              document.onmouseup = mouseUpHandler;       
       }
       function mouseUpHandler(e){
              var evt = e || window.event;
              var oMenu = document.getElementById("menu");
              oMenu.style.display = (oMenu.style.display != "block") ? "block":"none";
              oMenu.style.left = left = evt.clientX;
              oMenu.style.top = top = evt.clientY;
              var oLis = oMenu.getElementsByTagName('li');
              for(var i=0;i<oLis.length;i++){
                     oLis[i].onmouseover = mouseOverHandler;
                     oLis[i].onmouseout = mouseOutHandler;
              }
       }
       function mouseOverHandler(e){
              var _this = this;
              this.id = 'over';
              if(this.name == 'del'){
                     var oDel = document.getElementById("del");
                     oDel.style.display = 'block';
                     oDel.style.left = left + this.offsetWidth;
                     oDel.style.top = top + this.offsetTop;
                     oDel.onmouseover = function(){
                            _this.id = 'over';
                            this.style.display = 'block';
                     }
                     oDel.onmouseout = function(){
                            this.style.display = 'none';
                            _this.id = '';
                     }
                     var oLis = oDel.getElementsByTagName('li');
                     for(var i=0;i<oLis.length;i++){
                            oLis[i].onmouseover = mouseOverHandler;
                            oLis[i].onmouseout = mouseOutHandler;
                            oLis[i].onclick = function(){
                                   oDel.style.display = 'none';
                            }
                     }
              }
       }
       function mouseOutHandler(e){
              if(flag)return false;
              this.id = '';
              if(this.name == 'del'){
                     var oDel = document.getElementById("del");
                     oDel.style.display = 'none';
              }
       }
  </script>
</head>
<body>
       <div class='menu' id='menu'>
              <ol>
                     <li><span>撤销(U)</span><label>Ctrl+Z</label></li>
                     <li class='u'disabled><span>重做(Z)</span><label>Ctrl+Y</label></li>
                     <li><span>粘贴(P)</span><label>Ctrl+V</label></li>
                     <li name="del"><span>删除(D)</span><label>></label></li>
                     <li class='u'><span>选择(S)</span><label>></label></li>
                     <li><span>格式(F)</span><label>></label></li>
                     <li><span>大小写转换(N)</span><label>></label></li>
                     <li><span>插入(I)</span><label>></label></li>
                     <li><span>HTML(H)</span><label>></label></li>
                     <li class='u'><span>其他(E)</span><label>></label></li>
                     <li><span>换行符</span><label>></label></li>
                     <li><span>拼写检查</span><label>></label></li>
              </ol>
       </div>
       <div class='menu' id='del'>
              <ol>
                     <li><span>删除所选(D)</span><label>Ctrl+Z</label></li>
                     <li><span>删除单词(W)</span><label>Ctrl+Y</label></li>
                     <li><span>删除行(L)</span><label>Ctrl+V</label></li>
                     <li><span>删除至单词结尾(E)</span></li>
                     <li><span>删除至行尾(N)</span></li>
                     <li class='u'><span>反向删除单词(O)</span></li>
                     <li disabled><span>删除标记行</span></li>
                     <li><span>删除空白行</span></li>
                     <li><span>删除重复行</span></li>
              </ol>
       </div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/1c462166-0f0d-4702-8167-6af50990f1f1.html
posted @ 2011-07-06 10:02  网页代码站  阅读(327)  评论(0编辑  收藏  举报