Javascript로 구현된 간단한 마우스 오른쪽 버튼 클릭 메뉴 클래스-JS 튜토리얼-php.cn

Javascript로 구현된 간단한 마우스 오른쪽 버튼 클릭 메뉴 클래스

PHPz

풀어 주다： 2018-09-28 17:49:37

앞으로

1119명이 탐색했습니다.

이 글에서는 주로 Javascript로 구현된 간단한 오른쪽 클릭 메뉴 클래스를 소개합니다. 오른쪽 클릭 메뉴 기능은 JavaScript 사용자 정의 클래스를 통해 구현됩니다. 필요한 친구는 다음을 참조할 수 있습니다. :

이것은 IE 고유의 오른쪽 클릭 메뉴를 차단하는 직접 작성한 오른쪽 클릭 메뉴 클래스입니다. 총 4개의 매개변수가 있습니다. 첫 번째는 p

의 ID입니다. 오른쪽 클릭 메뉴를 표시하고 두 번째는 오른쪽 클릭 메뉴 레이어입니다. 이 ID를 기반으로 새 레이어를 생성합니다. menuList는 메뉴 항목을 클릭한 후 실행되는 함수에 해당하는 메뉴 항목 목록입니다. 메뉴의 클래스 이름, 메뉴 항목에 해당하는 클래스 이름(마우스 슬라이드 포함) Obsolete 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 비디오 튜토리얼을 방문하세요.