Javascript で実装された単純な右クリックメニュークラス-jsチュートリアル-php.cn

Javascript で実装された単純な右クリックメニュークラス

PHPz

リリース： 2018-09-28 17:49:37

転載

1087 人が閲覧しました

この記事では、JavaScript で実装された単純な右クリックメニュークラスを主に紹介します。必要な場合は、次のとおりです。 :

これは、IE 固有の右クリックメニューをブロックする、私が作成した右クリックメニュークラスです。パラメータは合計 4 つあります。最初のパラメータは、p

の ID です。右クリックメニューを表示します。2 番目は右クリックメニューレイヤー ID です。この ID に基づいて新しいレイヤーを作成します。menuList はメニュー項目のリストで、メニュー項目をクリックした後にトリガーされる関数に対応します。classList は次のとおりです。メニューのクラス名、およびマウススライドの Obsolete クラスを含むメニュー項目に対応するクラス名。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

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 ビデオチュートリアルをご覧ください。