Javascript右键菜单类
生活随笔
收集整理的這篇文章主要介紹了
Javascript右键菜单类
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
代碼簡介：
這是自己寫的一個右鍵菜單類，屏蔽掉了IE固有的右鍵菜單，一共有四個參數(shù)：第一個是出發(fā)顯示右鍵菜單的div的id 第二個是右鍵菜單這個層的id，根據(jù)這個id去創(chuàng)建一個新的層，menuList是菜單項的列表，對應了點擊一個菜單項后觸發(fā)的函數(shù)，classList是菜單的class名稱，以及菜單項對應的class名稱，包含了鼠標滑過時的class。
代碼內(nèi)容：
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Javascript右鍵菜單類_網(wǎng)頁代碼站(www.webdm.cn)</title> <style type="text/css"> .cmenu {position:absolute;top:100px;left:100px;width:200px;height:200px;background-color:white;border:1px solid pink;} .liAble {font-family:"宋體";color:#6699CC;margin-left:10px;margin-top:5px;list-style-type:none;cursor:default; } .liMouseOver {margin-left:10px;margin-top:5px;background-color:#CCFFFF;list-style-type:none;cursor:default; } </style> </head> <body> <div style="margin-left:auto; margin-right:auto; height:300px; width:60%;background-color:#CC6699" id="x"> </div> <input type="hidden" id="value1" value="4" /> <input type="hidden" id="value2" value="5" /> <script type="text/javascript"> //右鍵菜單類 function RightHandMenu(div,menuDiv,menuList,classList) {var oThis = this;this._menuList = {}this._classList = {objClass:'',MenuClass:'',liAbleClass:'',liMouseOverClass:''}this.Init = function(){this._obj = $(div);this._obj.oncontextmenu = function(e){oThis.ShowMenu(e)};this._obj.className = this._classList.objClass;document.onclick = function(){oThis.HiddenMenu()};objToObj(this._classList, classList);objToObj(this._menuList, menuList); }this.CreateMenu = function(){if($(menuDiv)){alert("該ID已被占用");return;}this._menu = document.createElement("DIV");this._menu.id = menuDiv;this._menu.oncontextmenu = function(e){stopBubble(e)};this._menu.className = this._classList.MenuClass;this._menu.style.display = "none";document.body.appendChild(this._menu);}this.CreateMenuList = function(){for(var pro in this._menuList){var li = document.createElement("LI");li.innerHTML = pro;this._menu.appendChild(li);li.className = this._classList.liAbleClass;li.onclick = this._menuList[pro];li.onmouseover = function(){oThis.ChangeLiClass(this,oThis._classList.liMouseOverClass)}li.onmouseout = function(){oThis.ChangeLiClass(this,oThis._classList.liAbleClass)}}}this.ChangeLiClass = function(obj,name){obj.className = name}this.ShowMenu = function(e){var e = e || window.event;stopBubble(e);var offsetX = e.clientX;var offsetY = e.clientY;with(this._menu.style){display = "block";top = offsetY + "px";left = offsetX + "px";}}this.HiddenMenu = function(){this._menu.style.display = "none";}this.Init();this.CreateMenu();this.CreateMenuList(); } function stopBubble(oEvent) {if(oEvent.stopPropagation) oEvent.stopPropagation();else oEvent.cancelBubble = true;if(oEvent.preventDefault) oEvent.preventDefault();else oEvent.returnValue = false; }function $(div) {return 'string' == typeof div ? document.getElementById(div) : div; } function objToObj(destination,source) {for(var pro in source){destination[pro] = source[pro];}return destination; } //構(gòu)造右鍵菜單 function Edit() {alert("edit"); } function Delete() {alert("delete"); } var menuList = {編輯:Edit,刪除:Delete } var classList = {MenuClass:'cmenu',liAbleClass:'liAble',liMouseOverClass:'liMouseOver' } var x = new RightHandMenu("x","testDiv",menuList,classList) </script> </body> </html> <br> <p><a href="http://www.webdm.cn">網(wǎng)頁代碼站</a> - 最專業(yè)的代碼下載網(wǎng)站 - 致力為中國站長提供有質(zhì)量的代碼！</p>代碼來自：http://www.webdm.cn/webcode/42f19ed3-e89b-490b-a781-10e440c812b3.html
轉(zhuǎn)載于:https://www.cnblogs.com/webdm/archive/2011/05/30/2063014.html
總結(jié)
以上是生活随笔為你收集整理的Javascript右键菜单类的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 51单片机(STC89C52RC) IO
- 下一篇： Symfony2Book04：Doctr