HTML中實現右鍵菜單功能

來源:互聯網
上載者:User
菜單|右鍵

  我們使用的應用系統很多都有右鍵菜單功能。但是在網頁上面,點擊右鍵一般顯示的卻是IE預設的右鍵菜單,那麼我們如何?自己的右鍵菜單呢?下面將講解右鍵菜單功能的實現原理和實現代碼。

  實現原理

  在HTML語言中,基本上每個對象都有一個oncontextmenu事件,這個事件就是滑鼠的按右鍵事件(onclick事件是滑鼠的左鍵單擊事件),那麼我們就可以在滑鼠右擊的時候,讓系統彈出一個視窗(這個是popup視窗,顯示在IE的最前面,沒有菜單),上面顯示我們想要顯示的菜單資訊,當我們單擊其中某一項的時候,就執行我們設定的動作,然後將快顯視窗關閉。

  實現代碼

  下面我寫了一個範例程式碼,類比一個樹型菜單,當我們右鍵點擊樹型菜單某一項的時候,就會彈出右鍵菜單,裡面有“新增”、“修改”、“刪除”三個功能表項目,單擊某項會執行相應的操作。如果是在頁面的其它地方點擊右鍵的話,就只顯示“新增”一個功能表項目。下面的代碼內容:

contextmenuDemo.html檔案

―――――――――――――――――――――――――――――――――

<%--

/**

*實現右鍵菜單功能

*/

--%>

<html>

  <body oncontextmenu = showMenu('')>

    <form name = "menuForm">

      <!--隱藏框,用來儲存選擇的菜單的id值-->

      <input type = "hidden" name = "id" value = "">

      <table>

      <tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('0')>根目錄</a></td></tr>

      <tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('1')>菜單一</a></td></tr>

      <tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('2')>菜單二</a></td></tr>

      </table>

    </form>

  </body>

  <!-- 這裡用來定義需要顯示的右鍵菜單 -->

  <div id="itemMenu" style="display:none">

      <table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0">

         <tr>

           <td style="cursor:default;border:outset 1;" align="center" >

           新增

           </td>

         </tr>

         <tr>

           <td style="cursor:default;border:outset 1;" align="center" >

           修改

           </td>

         </tr>

         <tr>

           <td style="cursor:default;border:outset 1;" align="center" >

           刪除

           </td>

         </tr>

      </table>

  </div>

  <!-- 右鍵菜單結束-->

</html>

<script language="JavaScript">

/**

*根據傳入的id顯示右鍵菜單

*/

function showMenu(id)

{

  menuForm.id.value = id;

  if("" == id)

  {

    popMenu(itemMenu,100,"100");

  }

  else

  {

    popMenu(itemMenu,100,"111");

  }

  event.returnValue=false;

    event.cancelBubble=true;

    return false;

}

/**

*顯示快顯功能表

*menuDiv:右鍵菜單的內容

*width:行顯示的寬度

*rowControlString:行控制字元串,0表示不顯示,1表示顯示,如“101”,則表示第1、3行顯示,第2行不顯示

*/

function popMenu(menuDiv,width,rowControlString)

{

  //建立快顯功能表

  var pop=window.createPopup();

  //設定快顯功能表的內容

  pop.document.body.innerHTML=menuDiv.innerHTML;

  var rowObjs=pop.document.body.all[0].rows;

  //獲得快顯功能表的行數

  var rowCount=rowObjs.length;

  //迴圈設定每行的屬性

  for(var i=0;i<rowObjs.length;i++)

  {

    //如果設定該行不顯示,則行數減一

    var hide=rowControlString.charAt(i)!='1';

    if(hide){

      rowCount--;

    }

    //設定是否顯示該行

    rowObjs[i].style.display=(hide)?"none":"";

    //設定滑鼠滑入該行時的效果

    rowObjs[i].cells[0].onmouseover=function()

    {

      this.style.background="#818181";

      this.style.color="white";

    }

    //設定滑鼠滑出該行時的效果

    rowObjs[i].cells[0].onmouseout=function(){

      this.style.background="#cccccc";

      this.style.color="black";

    }

  }

  //屏蔽菜單的菜單

  pop.document.oncontextmenu=function()

  {

      return false;

  }

  //選擇右鍵菜單的一項後,菜單隱藏

  pop.document.onclick=function()

  {

      pop.hide();

  }

  //顯示菜單

  pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);

  return true;

}

function create()

{

  alert("create" + menuForm.id.value + "!");

}

function update()

{

  alert("update" + menuForm.id.value + "!");

}

function del()

{

  alert("delete" + menuForm.id.value + "!");

}

function clickMenu()

{

  alert("you click a menu!");

}

</script>



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。