初学者求教js弹出式菜单代码详解
日期：2014-05-17 浏览次数：20917 次
菜鸟求教js弹出式菜单代码详解
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" ！" />
<title> </title>
<style type="text/css">
.zzjs_net
{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:white;
border:1px solid pink;
}
.zzjs_net_2
{
font-family:"宋体";
color:#6699CC;
margin-left:10px;
margin-top:5px;
list-style-type:none;
cursor:default;
}
.zzjs_net_3
{
margin-left:10px;
margin-top:5px;
background-color:#CCFFFF;
list-style-type:none;
cursor:default;
}
</style>
</head>
<body>
<a href="http://www.zzjs.net/"> </a> <hr>
<div style="margin-left:auto; margin-right:auto; height:500px;background-color: #ffffff
" width:60%; id="www_zzjs_net">
</div>
<input type="hidden" id="value1" value="4" />
<input type="hidden" id="value2" value="5" />
<script type="text/javascript">
//右键菜单类
function menu_wwwzzjsnet(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 |
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" ！" />
<title> </title>
<style type="text/css">
.zzjs_net
{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:white;
border:1px solid pink;
}
.zzjs_net_2
{
font-family:"宋体";
color:#6699CC;
margin-left:10px;
margin-top:5px;
list-style-type:none;
cursor:default;
}
.zzjs_net_3
{
margin-left:10px;
margin-top:5px;
background-color:#CCFFFF;
list-style-type:none;
cursor:default;
}
</style>
</head>
<body>
<a href="http://www.zzjs.net/"> </a> <hr>
<div style="margin-left:auto; margin-right:auto; height:500px;background-color: #ffffff
" width:60%; id="www_zzjs_net">
</div>
<input type="hidden" id="value1" value="4" />
<input type="hidden" id="value2" value="5" />
<script type="text/javascript">
//右键菜单类
function menu_wwwzzjsnet(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 |
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
