国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
右鍵菜單的JS類
右鍵菜單的JS類
Source: http://www.limboy.com/2006/10/22/contentmenu/

右鍵菜單在web交互設(shè)計里并不是很常用的東西，因為普通用戶在瀏覽網(wǎng)頁時很少會想到能用右鍵來操作，就像他們很難習慣拖拽一樣，但在某些環(huán)境中，拖拽會成為很自然的操作——其實都跟桌面軟件的操作習慣有關(guān)。所以右鍵菜單在某些情況下也是很有用的，抓蝦的feed列表里就可以使用右鍵菜單，如果網(wǎng)頁里調(diào)用了google maps，而且占據(jù)了很大的客戶端面積，用右鍵菜單也會更方便。最近做的項目里就要用到這個，我寫了一個簡單的右鍵菜單，并且學習把它封裝成一個類。

以下是html形式的代碼：

  1. <div id="mousemenu" style="display: none; width: 200px;">     
  2.  
  3. <div class="mousemenumain">      
  4.  <ul id="allitems">         
  5.   <li><a href=""><span>菜單項目1</span></a></li>         
  6.   <li><a href=""><span>菜單項目2</span></a></li>        
  7.   <li><a href=""><span>菜單項目3</span></a></li>         
  8.   <li><a href=""><span>菜單項目4長度超出長度超出長度超出長度超出長度超出長度超出</span></a></li>         
  9.   <li><a href=""><span>菜單項目5</span></a></li>         
  10.   <li><a href=""><span>菜單項目6</span></a></li>         
  11.   <li><a href=""><span>菜單項目7</span></a></li>         
  12.   <li><a href=""><span>菜單項目8</span></a></li>     
  13.  </ul>  
  14. </div>  
  15. </div>

菜單的CSS：

  1. #mousemenu{
  2. position:absolute;
  3. background:url(leftbg.jpg) no-repeat;
  4.  
  5. }
  6.  
  7. .mousemenumain{
  8. width:100%;
  9. float:left;
  10.  
  11. margin:0px 5px 0px 22px;
  12. background:url(tempbg.jpg);
  13.  
  14. border:1px solid #999;
  15. border-left:none;
  16. }
  17.  
  18. *:first-child+html .mousemenumain{margin:0px 5px 0px 11px;} * html .mousemenumain{margin:0px 5px 0px 11px;}
  19.  
  20. .mousemenumain ul{
  21. padding:0px;
  22. margin:0px 0px 0px 0px;
  23.  
  24. list-style:none;
  25. width:100%;
  26. }
  27.  
  28. .mousemenumain ul li{
  29.  
  30. width:100%;
  31. }
  32.  
  33. .mousemenumain ul li a{
  34. display:block;
  35.  
  36. text-decoration:none;
  37. color:#000000;
  38. margin:0px 0px 0px 0px;
  39.  
  40. height:20px;
  41. line-height:20px;
  42. overflow-x:hidden;
  43.  
  44. width:200px;
  45. }
  46.  
  47. .mousemenumain ul li a:hover{
  48.  
  49. background:#0000ee;
  50. border:0px solid #00ccff;
  51. text-decoration:none;
  52.  
  53. color:#fff;
  54. cursor:pointer;
  55. }
  56.  
  57. .mousemenumain ul li span{
  58.  
  59. margin:0px 15px;
  60. display:block;
  61. }

控制菜單彈出位置的JS程序：

  1. document.oncontextmenu = ShowMenu;
  2.  
  3. function ShowMenu(ev){
  4.  
  5.  var obj=document.getElementById('mousemenu');
  6.  obj.style.display='none';
  7.  ev = ev || window.event;
  8.  
  9.  var showplace=GetMousexy(ev);
  10.  obj.style.top=showplace.y+"px";
  11.  
  12.  obj.style.left=showplace.x+"px";
  13.  
  14.  var menuplaceX=parseInt(obj.style.left)+parseInt(obj.style.width)+document.body.scrollLeft; //獲得菜單右邊緣的坐標
  15.  
  16.  var j=0;
  17.  for(var i=0;i<document.getElementById('allitems').childNodes.length;i++){  //獲得菜單項的數(shù)量
  18.  
  19.   if(document.getElementById('allitems').childNodes.item(i).tagName=="LI"){j++;}
  20.  
  21.  }
  22.  
  23.  var menuplaceY=parseInt(obj.style.top)+20*j-document.body.scrollTop; //獲得菜單下邊緣的坐標
  24.  
  25.  if(menuplaceX>document.body.clientWidth){  //如果菜單右邊緣超出瀏覽器邊框,則讓菜單出現(xiàn)在鼠標左側(cè)
  26.    obj.style.left=(showplace.x-parseInt(obj.style.width)-26)+"px";
  27.  
  28.  }
  29.  if(menuplaceY>document.documentElement.clientHeight){ //如果菜單下邊緣超出瀏覽器邊框,則讓菜單出現(xiàn)在鼠標上側(cè)
  30.  
  31.    obj.style.top=(showplace.y-20*j)+"px";
  32.  
  33.  }
  34.  
  35.  obj.style.display='';
  36.  return false;  //阻止原來的右鍵菜單出現(xiàn)
  37.  
  38. }
  39.  
  40. function GetMousexy(ev){  //獲取鼠標坐標
  41.  if(ev.pageX || ev.pageY){
  42.  
  43.            return {x:ev.pageX, y:ev.pageY};  //適用于FIREFOX
  44.  
  45.         } return {
  46.            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,  //適用于IE
  47.  
  48.            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
  49.  
  50.         }
  51. }

需要注意的就是不能讓菜單超出瀏覽器邊緣，產(chǎn)生滾動條。

最后的效果：點這里

但是這樣做的話，就必須把菜單的HTML代碼寫在網(wǎng)頁面文件里，不能隨時調(diào)用，如果一個頁面里會出現(xiàn)多個菜單的話，就要每個都寫一套HTML代碼。如果用JS來創(chuàng)建菜單，并且把CSS和程序都封裝到一個類里面，每次要用菜單的時候就只需要寫很少的代碼創(chuàng)建一個實例，雖然第一次比較麻煩，但以后就很方便了：

  1. /**********************************************
  2. *   Name: context menu class
  3. *   Author: Dexter.Yy (dexter.yy@gmail.com)
  4. *   Author URI: http://www.limboy.com/
  5. *   Version: 2006.10.22
  6. **********************************************/ 
  7. function RightMenu()
  8. {
  9. var MainMenu;     //主菜單
  10.  
  11.    var InLineUl;
  12. var MenuItem;   //菜單項
  13.  
  14. this.MainMenuPosition = "absolute";
  15. this.MainMenuLeftBackground = "url(leftbg.jpg) no-repeat";  //主菜單右邊文字
  16.  
  17. this.MainMenuWidth = "200px";
  18. this.MainMenuHeight = "0px";
  19. this.MainMenuRightBackground = "url(tempbg.jpg)";   //主菜單內(nèi)容部分的背景
  20.  
  21. this.createMainMenu();
  22.  
  23. }
  24.  
  25. RightMenu.prototype.createMainMenu = function()   //創(chuàng)建主菜單
  26.  
  27. {
  28. this.InLineUl = document.createElement("ul");
  29.  
  30. this.InLineUl.style.padding = "0px";
  31. this.InLineUl.style.margin = "0px 0px 0px 0px";
  32.  
  33. this.InLineUl.style.listStyle = "none";
  34. this.InLineUl.style.width = "100%";
  35.  
  36. this.InLineUl.id="allitems";
  37. InLineDiv = document.createElement("div");
  38.  
  39. InLineDiv.style.width = "100%";   //整個菜單的樣式
  40.  
  41.  InLineDiv.style.margin = "0px 5px 0px 22px";
  42. InLineDiv.style.background = this.MainMenuRightBackground;
  43.  
  44. InLineDiv.style.border = "2px solid #0033ff";
  45. InLineDiv.style.borderLeft = "none";
  46.  
  47. InLineDiv.appendChild(this.InLineUl.cloneNode(true));
  48. this.MainMenu = document.createElement("div");
  49.  
  50. this.MainMenu.style.position = this.MainMenuPosition;
  51. this.MainMenu.style.background = this.MainMenuLeftBackground;
  52.  
  53. this.MainMenu.style.width = this.MainMenuWidth;
  54. this.MainMenu.appendChild(InLineDiv);
  55.  
  56. this.MainMenu.style.display = "none";
  57. document.body.appendChild(this.MainMenu);
  58.  
  59.  
  60.  
  61. }
  62.  
  63. RightMenu.prototype.appendMenuItem = function(MenuItems)   //添加菜單項
  64.  
  65. {
  66.  
  67. if(MenuItems=='')return;
  68.  
  69. if(this.MainMenu.firstChild.firstChild)
  70.  
  71. {
  72.  this.MainMenuHeight = "0px";
  73.     this.MainMenu.firstChild.replaceChild(this.InLineUl.cloneNode(true),this.MainMenu.firstChild.firstChild);
  74.  
  75. }
  76.  
  77. for(var item in MenuItems)
  78. {
  79.  
  80.  
  81.  MenuItemSpan = document.createElement("span");
  82.  MenuItemSpan.style.margin = "0px 15px";
  83.  
  84.  MenuItemSpan.style.height = "28px";
  85.  MenuItemSpan.style.lineHeight = "28px";
  86.  
  87.  MenuItemSpan.style.display = "block";
  88.        MenuItemSpan.innerHTML = MenuItems[item][0];
  89.  
  90.  MenuItemSpan.setAttribute("hasmenu",1);
  91.  MenuItemSpan.oncontextmenu = function(){return false;}
  92.  
  93.  MenuItemA = document.createElement("a");
  94.  MenuItemA.setAttribute('href',MenuItems[item][2]);
  95.  
  96.  MenuItemA.target = MenuItems[item][1];
  97.  MenuItemA.onmouseout = function()    //每個菜單項的樣式
  98.  
  99.  {
  100.   this.style.background = "";
  101.   this.style.display = "block";
  102.  
  103.   this.style.textDecoration = "none";
  104.   this.style.color = "#000000";
  105.  
  106.   this.style.margin = "0px 0px 0px 0px";
  107.   this.style.width = "200px";
  108.  
  109.   this.style.height = "28px";
  110.   this.style.lineHeight = "28px";
  111.  
  112.   this.style.fontSize = "12px";
  113.   this.style.overflowX = "hidden";
  114.  
  115.  }
  116.  MenuItemA.onmouseout();
  117.  MenuItemA.onmouseover = function()   //鼠標滑過時菜單項的樣式
  118.  
  119.  {
  120.   this.style.background = "#0000ee";
  121.  
  122.   this.style.border = "0px solid #00ccff";
  123.   this.style.textDecoration = "none";
  124.  
  125.   this.style.color = "#fff";
  126.   this.style.cursor = "pointer";
  127.  
  128.  }
  129.  MenuItemA.appendChild(MenuItemSpan);
  130.  MenuItemLi = document.createElement("li");
  131.  
  132.  MenuItemLi.style.width = "100%";
  133.  
  134.  MenuItemLi.appendChild(MenuItemA);
  135.  
  136.  this.MainMenuHeight =(parseInt(this.MainMenuHeight)+parseInt(MenuItemSpan.style.height))+"px";
  137.  
  138.  this.MainMenu.firstChild.firstChild.appendChild(MenuItemLi);
  139.  
  140.  
  141. }
  142.  
  143. }
  144.  
  145. RightMenu.prototype.GetMousexy = function(ev)
  146. {
  147.  
  148. if(ev.pageX || ev.pageY)
  149. {
  150.  
  151.       return {x:ev.pageX, y:ev.pageY};
  152.  
  153.    }
  154. return {
  155.      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  156.  
  157.      y:ev.clientY + document.body.scrollTop  - document.body.clientTop
  158.  
  159.    }
  160. }
  161.  
  162. RightMenu.prototype.ShowMenu = function(ev,MenuItems)
  163.  
  164. {
  165. this.appendMenuItem(MenuItems);
  166. this.MainMenu.style.display='none';
  167.  
  168. ev = ev || window.event;
  169. var showplace=this.GetMousexy(ev);
  170.  
  171. this.MainMenu.style.top=showplace.y+"px";
  172.  
  173. this.MainMenu.style.left=showplace.x+"px";
  174.  
  175.  
  176. var menuplaceX=parseInt(this.MainMenu.style.left)+parseInt(this.MainMenu.style.width)+document.body.scrollLeft;
  177.  
  178. if(menuplaceX>document.body.clientWidth)
  179. {
  180.  this.MainMenu.style.left=(showplace.x-parseInt(this.MainMenu.style.width)-26)+"px";
  181.  
  182. }
  183.  
  184. var menuplaceY=parseInt(this.MainMenu.style.top)+parseInt(this.MainMenuHeight)-document.body.scrollTop;
  185. if(menuplaceY>document.documentElement.clientHeight)
  186.  
  187. {
  188.  this.MainMenu.style.top=(showplace.y-parseInt(this.MainMenuHeight))+"px";
  189.  
  190. }
  191. this.MainMenu.style.display='';
  192. return false;
  193.  
  194. }

調(diào)用這個類的方法是……首先創(chuàng)建菜單的對象，在window.onload = function(){}或body onload=”"里加上：

  1. YYmenu = new RightMenu();

注意不能寫作var YYmenu = new RightMenu();那樣YYmenu就不是全局的了……

接下來，根據(jù)實際需要，設(shè)置菜單的具體項目，寫成一個數(shù)組：[”菜單項的名稱”,”打開方式”,”點擊的事件”]，比如：

  1. var b=[  //設(shè)置菜單b的具體項目
  2. ["菜單b菜單b1","_blank","javascript:alert('hahahaha')"],
  3.  
  4. ["菜單b菜單b2","","javascript:alert('xixixixi')"],
  5. ["菜單b菜單b3","","javascript:alert('xixixixi')"],
  6.  
  7. ["菜單b菜單b4","","javascript:alert('xixixixi')"],
  8. ["菜單b菜單b5","","javascript:alert('xixixixi')"],
  9.  
  10. ["菜單b菜單b6","","javascript:alert('xixixixi')"]
  11. ];

需要幾種樣式的菜單，就建立幾個數(shù)組。然后，給需要右鍵彈出菜單的頁面元素加上oncontextmenu事件和自定義屬性“hasmenu”（如果沒有覆蓋整個頁面的全局右鍵菜單，就不用加這個屬性）， 比如：

  1. <div oncontextmenu="return YYmenu.ShowMenu(event,b)" hasmenu="1">這是需要右鍵彈出菜單的元素</div>

參數(shù)“b”就是包含菜單項目的那個數(shù)組。

如果想要在整個頁面任何地方點右鍵都可以彈出一個通用的菜單，需要像這些調(diào)用：

  1. if (window.ActiveXObject){
  2.  document.oncontextmenu=function(yy)  //適用于IE
  3.  
  4.     {   //alert(event.srcElement.nodeName);
  5.      if (event.srcElement.getAttribute("hasmenu")!="1"){
  6.  
  7.       return YYmenu.ShowMenu(yy,a);
  8.          }
  9.     } 
  10. }else{
  11.  
  12.  document.oncontextmenu=function(event)  //適用于FIREFOX
  13.     {  
  14.      if (event.target.getAttribute("hasmenu")!="1"){
  15.  
  16.       return YYmenu.ShowMenu(event,a);
  17.          }
  18.     }
  19.  
  20. }

這里我處理的不太好，IE和FIREFOX在獲取鼠標當前目標時，有一些差異還沒完全理解……

最后的效果：點這里

這個javascript類的源文件：點這里

菜單的外觀我就沒時間弄了，如果你想把菜單做成本文左上角那副圖里的效果，只要換一張背景圖片，并且給每個LI加上背景就行了……

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
【導航菜單特效】每一個菜單都能關(guān)閉的豎排導航
超酷JS拖拽翻頁效果.htm
【網(wǎng)頁特效】小巧玲瓏的網(wǎng)頁中的常用的小日歷
javascript 仿百度穿墻特效
WebGL停車場三維可視化管理系統(tǒng) DEMO（ThingJS 停車場3D可視化管理）
手工打造極酷的分離式滑動門導航菜單
更多類似文章 >>
生活服務
分享 收藏 導長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服