Maison >interface Web >js tutoriel >Classe de menu simple par clic droit implémentée en Javascript

Classe de menu simple par clic droit implémentée en Javascript

PHPzavant: 2016-05-16 15:38:211125parcourir

Cet article présente principalement la classe de menu contextuel simple implémentée en Javascript. La fonction de menu contextuel est implémentée via des classes personnalisées JavaScript. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. :

Il s'agit d'une classe de menu contextuel écrite par moi-même, qui bloque le menu contextuel inhérent à IE. Il y a quatre paramètres au total : le premier est l'identifiant de p

à. affichez le menu contextuel, et le second est l'identifiant du calque du menu contextuel, créez un nouveau calque basé sur cet identifiant, menuList est une liste d'éléments de menu, correspondant à la fonction déclenchée après avoir cliqué sur un élément de menu, classList est. le nom de la classe du menu et le nom de la classe correspondant à l'élément de menu, y compris le curseur de la souris. Classe obsolète.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démonstration en ligne est la suivante :

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

Le code spécifique est le suivant :

<!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>

Le ci-dessus est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Jfinal et bootstrap login saut pratique exercice_javascript compétencesArticle suivant：Jfinal et bootstrap login saut pratique exercice_javascript compétences

Classe de menu simple par clic droit implémentée en Javascript

Articles Liés