搜尋

首頁  >  文章  >  web前端  >  Javascript實作的簡單右鍵選單類

Javascript實作的簡單右鍵選單類

PHPz
PHPz轉載
2016-05-16 15:38:211087瀏覽

這篇文章主要介紹了Javascript實現的簡單右鍵選單類，透過JavaScript自訂類別實現右鍵選單功能，具有一定參考借鑒價值，需要的朋友可以參考下，具體如下：

這是自己寫的一個右鍵選單類，屏蔽掉了IE固有的右鍵選單，一共有四個參數：第一個是出發顯示右鍵選單的p的id

第二個是右鍵選單這個層的id，根據這個id去創建一個新的層，menuList是菜單項目的列表，對應了點擊一個菜單項目後觸發的函數，classList是菜單的class名稱，以及菜單項目對應的class名稱，包含了滑鼠滑過時的class。

運作效果截圖如下：

線上簡報網址如下：

http://demo.jb51.net/ js/2015/js-right-button-menu-class-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右键菜单</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>
<p style="margin-left:auto; margin-right:auto; height:300px; width:60%;background-color:#CC6699" id="x">
</p>
<input type="hidden" id="value1" value="4" />
<input type="hidden" id="value2" value="5" />
<script type="text/javascript">
//右键菜单类
function RightHandMenu(p,menup,menuList,classList)
{
 var oThis = this;
 this._menuList = 
 {
 }
 this._classList = 
 {
  objClass:&#39;&#39;,
  MenuClass:&#39;&#39;,
  liAbleClass:&#39;&#39;,
  liMouseOverClass:&#39;&#39;
 }
 this.Init = function()
 {
  this._obj = $(p);
  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($(menup))
  {
   alert("该ID已被占用");
   return;
  }
  this._menu = document.createElement("p");
  this._menu.id = menup;
  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 $(p)
{
 return &#39;string&#39; == typeof p ? document.getElementById(p) : p;
}
function objToObj(destination,source)
{
 for(var pro in source)
 {
  destination[pro] = source[pro];
 }
 return destination;
}
//构造右键菜单
function Edit()
{
 alert("edit");
}
function Delete()
{
 alert("delete");
}
var menuList = 
{
 编辑:Edit,
 删除:Delete
}
var classList = 
{
 MenuClass:&#39;cmenu&#39;,
 liAbleClass:&#39;liAble&#39;,
 liMouseOverClass:&#39;liMouseOver&#39;
}
var x = new RightHandMenu("x","testp",menuList,classList)
</script>
</body>
</html>

以上就是本章的全部內容，更多相關教程請訪問JavaScript視訊教學！

陳述：
本文轉載於：jb51.net。如有侵權，請聯絡admin@php.cn刪除
上一篇：jfinal與bootstrap的登入跳轉實戰演習_javascript技巧下一篇：jfinal與bootstrap的登入跳轉實戰演習_javascript技巧

相關文章

看更多