Javascript实现的简单右键菜单类

本文实例讲述了Javascript实现的简单右键菜单类。分享给大家供大家参考。具体如下:

这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的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>
<div 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;
}
//构造右键菜单
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>

希望本文所述对大家的JavaScript程序设计有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
本文实例讲述了js实现无限级树形导航列表效果代码。分享给大家供大家参考。具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: meta http-equiv="Content-Type" content="text/html; charset=utf-8" /st
一个完整的域名,由根域、顶级域、二级、三级……域名构成,每级域名之间用点分开,每级域名由字母、数字和减号构成(第一个字母不能是减号),不区分大小写,长度不超过63。 单独的名字可以由正则表达式[a-zA-Z0-9][-a-zA-Z0-9]{0,62}来匹配,而完整的域名至少包括两个名字(比如google.com,由google和com构成),最后可以有一个表示根域的点(在规范中,最后有一个点的才是完整域名,但一般认为包括两个以上名字的域名也是完整域名,哪怕它后面没有点)。 匹配完整域名的正则表达式: 复制
本文实例讲述了JS+CSS实现经典的左侧竖向滑动菜单效果。分享给大家供大家参考。具体如下: 这是一款经过改造的左侧竖向滑动菜单,基于JavaScript+CSS,没有过多的修饰,主要想实现菜单的动画效果,想用的朋友,自己美化吧。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-left-v-hd-menu-style-codes/ 具体代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡。分享给大家供大家参考。具体如下: 这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/ 具体代码如下:
发表过的一篇 《10个超级有用的PHP代码片段果断收藏》 吗?本文笔者将继续为你奉上15个超级有用的jQuery代码片段。 jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画、特效,还会提高网站的用户体验。 下面就让我们一起来享受jQuery代码的魅力之处吧。 1.预加载图片 (function($) { var cache = []; // Arguments are image paths relative to the
第一种方法: 在用户注册页面有些需求要求的比较严格,需要对身份证js验证是否合法,通过此功能严格此系统软件,从而过滤到很多水客。下面就此实现方法给大家讲解下。 很多时候我们都是通过一组正则表达式来判断用户输入的身份证是否合法,那在用正则表达式判断之前,你对身份证号的组成有多少了解呢?下面来说说一个身份证号里面包含了多少的信息: 1、号码的结构 公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码。 2、地址
本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新,load方法本身很简单,但是想要结合到jfinal和bootstrap的公共项目中,需要我们多加努力了。 首先我先来来说一下方案。 $p.load(url,data,function(response,status,xhr)) 那么我们需要提供ajax请求的回调函数至少两个参数url以及jquery对象。 另外,我们还可能有地址栏重载的可能。 location.href 所以,我们还需要提供一个参数。 于是,我们封装三个属性 // 局部加

Java正则表达式使用 - 2015-09-24 17:09:05

一:抓取网页中的Email地址 利用正则表达式匹配网页中的文本 复制代码 代码如下: [\\w[.-]]+@[\\w[.-]]+\\.[\\w]+ 将网页内容分割提取 import java.io.BufferedReader;import java.io.FileNotFoundException;import java.io.FileReader;import java.io.IOException;import java.util.regex.Matcher;import java.util.reg
jQuery校验官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation 一、导入js库 script type="text/javascript" src="%=path %/validate/jquery-1.6.2.min.js"/scriptscript type="text/javascript" src="%=path %/validate/jquery.validate.min.js"/script 注:%=req
本文实例讲述了JS实现漂亮的淡蓝色滑动门效果。分享给大家供大家参考。具体如下: 这款漂亮淡蓝色滑动门代码,感觉很不错哦。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/ 具体代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit