zoukankan      html  css  js  c++  java
  • 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{
                  170px;
                  display:none;
                  position:absolute;
                  background-color:#FCFDE1;
                  cursor:default;
           }
           ol{
                  list-style:none;
                  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
    
  • 相关阅读:
    【题解】Candle
    【题解】购物
    【题解】论逼格
    浅谈前缀和
    浅谈 LCA
    浅谈Meet in the middle——MITM
    拓扑排序
    时间复杂度符号
    浅谈排序算法[动图]
    404 页面不存在
  • 原文地址:https://www.cnblogs.com/webdm/p/2098919.html
Copyright © 2011-2022 走看看