javascript 右键菜单

转载 2007年09月21日 10:08:00
javascript 右键菜单效果:

javascript实现右键菜单的方式很多,思路也各有千秋,在介绍代码之前先简单介绍一下我的右键对象思路。

1、 一个右键对象包含多个右键块。

2、 任何一个页面或控件都能且最多只能挂一个右键块。

3、 每个右键块拥有多级右键项。

4、 采用pupop方式。

下面分对象介绍源码:

公共部分:

/**
 * <p>标题: BinaryStar右键菜单JS模型</p>
 * <p>功能描述: 模拟右键菜单的功能。</p>
 * <p>实现方法: 一个右键菜单对象由多个右键菜单块组成。每个需要右键功能的对象直接关联一个菜单块,
 *  同时一个菜单块可以配多个对象关联。
 * 每个菜单块包含多个菜单项。每个菜单项可能包含多个子菜单项。
 * <p>作者: BinaryStar原创B/S框架</p>
 * <p>版本: 0.1</p>
 * <p>创建日期: 2005-12-21</p>
 */

/**
 * <p>标题: BSRightItemArea</p>
 * <p>功能描述: 右键菜单块。</p>
 * <p>作者: BinaryStar原创B/S框架</p>
 * <p>版本: 0.1</p>
 * <p>创建日期: 2005-12-21</p>
 */

var bs_rm_div = "BACKGROUND-COLOR: #efefef;BORDER-BOTTOM: #ffffff 1px outset;border-LEFT: #ffffff 1px outset;border-RIGHT: #ffffff 1px outset;border-TOP: #ffffff 1px outset;FILTER: Alpha(Opacity='95');position:absolute;";
var bs_rm_info_td = "FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋体;width:20px;layout-flow:vertical-ideographic;";
var bs_rm_info = "position:absolute;top:1px;Height:20px;overflow:hidden;cursor:default;";
var bs_rm_over = "BACKGROUND-COLOR: #8989bc;COLOR: #ffffff;CURSOR: default;FONT-SIZE: 12px;word-break:keep-all;white-space:nowrap;";
var bs_rm_out = "BACKGROUND-COLOR: #efefef;COLOR: #000000;FONT-SIZE: 12px;word-break:keep-all;white-space:nowrap;";
var bs_rm_sperator = "BORDER-BOTTOM: #ffffff 1px inset;border-LEFT: #ffffff 1px inset;border-RIGHT: #ffffff 1px inset;border-TOP: #ffffff 1px inset;width: 95%;";
var bs_rm_error = "TEXT-DECORATION: none;CURSOR: default;FONT-SIZE: 12px;FONT-FAMILY: 宋体;background-color:red;color:window;"

 

BSRightItemArea

function BSRightItemArea(pid, index, text)...{
  
this.pid = pid||"BSRightMenu_1";//ID
  this.index = index;
  
this.id = this.pid + "_ItemArea_" + this.index;//ID
  this.leftText = text||"BS 制作";//左边显示的文字
  this.itemList = new Array();//右键菜单集合
  this.thisItemIndex = -1;
  
this.mouseType = 2//激发的鼠标方式,缺省为右键
  this.preShowFun = "";//激发右键块前的附加方法

  
//添加一个右键根菜项
  this.addRootItem = function (text, jsfun, img, disabled)...{
    
return this.addItem(-1, text, jsfun, img, disabled);
  }


  
//添加一个右键菜项
  this.addItem = function (pIndex, text, jsfun, img, disabled)...{
    
var newItem = new BSRightItem(this.pid, this.index, this.id, pIndex, this.itemList.length, text, jsfun, img, disabled);
    
if (text.Trim() == "-" || text.Trim() == "" || text.Trim() == "sperator")...{
      newItem.isSperator 
= true;
    }

    
//设置父节点的子项目
    if (pIndex >= 0)...{
      
var pobj = eval(this.pid);
      
this.itemList[pIndex].childList.length++;
      
this.itemList[pIndex].childList[this.itemList[pIndex].childList.length-1= newItem.index;
      newItem.level 
= this.itemList[pIndex].level+1;
      pobj.setMaxLevel(newItem.level);
    }

    
this.itemList.length++;
    
this.itemList[this.itemList.length-1= newItem;
    
return newItem;
  }


  
//菜单项块的展现
  this.show = function()...{
    
var htmlStr = "<table border='0' cellspacing='0'>";
    htmlStr 
+= "<tr><td valign="top"  bgcolor="#000000" onclick="event.cancelBubble=true;" style=""+bs_rm_info_td+""><nobr><div style=""+bs_rm_info+"" onselectstart="window.event.returnValue=false;">"+this.leftText+"</div></nobr>";
    htmlStr 
+= "</td><td style='padding: 1' valign='bottom'>";
    htmlStr 
+= "<table width='100%' border='0' cellspacing='0'>";
    
for (var i=0; i<this.itemList.length; i++)...{
      
if (this.itemList[i].pIndex < 0)...{
        htmlStr 
+= this.itemList[i].show();
      }

    }

    htmlStr 
+= "</table></td></tr></table>";
    
return htmlStr;
  }


  
//设置选中的菜单项
  this.setIndexItem = function (level, thisIndex)...{
   
var isSelf = false;
    
var pobj = eval(this.pid);
    
var thisLevelItem = -1;
    
var selectObj = pobj.popupList[level].document.getElementById(pobj.id+"_selectItem");
    
if (selectObj != null)...{
     thisLevelItem 
= selectObj.value;
    
if (thisIndex == thisLevelItem && thisLevelItem>=0)...{
     
if (this.itemList[thisIndex].childList.length > 0)...{
     
this.itemList[thisIndex].childIsShow = true;
     }

     isSelf 
= true;
    }

    
else if (thisLevelItem >= 0)...{
       
var thisDiv = pobj.popupList[level].document.getElementById(this.itemList[thisLevelItem].id+"_tr");
       
if (thisDiv != null)...{
         
this.itemList[thisLevelItem].setImgSelect(thisDiv, false);
     
this.itemList[thisLevelItem].childIsShow = false;
      }

    }

    selectObj.value 
= thisIndex;
     
this.thisItemIndex = thisIndex;
    }

    
return isSelf;
  }

}

 

JavaScript实现右键菜单(一)

 效果:javascript实现右键菜单的方式很多,思路也各有千秋,在介绍代码之前先简单介绍一下我的右键对象思路。 1、 一个右键对象包含多个右键块。 2、 任何一个页面或控件都能且最多只能挂一个右键...
  • mynickel2000
  • mynickel2000
  • 2006年09月12日 21:28
  • 2700

JavaScript实现右键菜单(四)

以上介绍了右键菜单的实现思路和原代码。下面说明应用举例。/*BS右键菜单*/.bs_rm_div {  BACKGROUND-COLOR: #efefef;  BORDER-BOTTOM: #ffff...
  • ahhsxy
  • ahhsxy
  • 2006年01月18日 18:31
  • 1516

javascript+css实现自定义网页右键菜单

  熟悉window操作系统的用户都知道右键菜单(上下文菜单)简洁明了、操作简便, 然而浏览器自带的右键菜单的功能却都是基于网页整页操作,例如“添加到收藏夹”、“查看源文件”、“打印”,很少涉及到网页...
  • dreamjhy
  • dreamjhy
  • 2008年01月05日 17:15
  • 2945

js禁用鼠标右键菜单(加强版)

之前我们也介绍过一些用javascript禁用右键的方法,比如:javascript禁止网页右键的方法与javascript禁止页面操作(右键、复制、F5刷新)等代码 ,今天介绍的这个可以算是这些版本...
  • u011153667
  • u011153667
  • 2016年07月01日 15:46
  • 1846

漂亮的Javascript右键菜单小功能【原创】

操作环境:Visual Studio.Net2003操作系统:window Xp SP2 如果您有任何意见,请留下您宝贵的意见以便告知右键菜单网上一搜一大把,用起来不是很方便,自己偷懒写了个简单的,看...
  • zhulei2008
  • zhulei2008
  • 2007年08月11日 10:19
  • 14466

javascript中如何实现浏览器上的右键菜单

  • zgqtxwd
  • zgqtxwd
  • 2008年05月01日 06:44
  • 269

简单源生JS实现自定义右键菜单效果

简单源生JS实现自定义右键菜单效果
  • m0_38099607
  • m0_38099607
  • 2017年05月17日 22:40
  • 940

用javascript 实现网页鼠标右键弹出菜单功能

工作中需要实现在网页上点右键弹出简单菜单的功能,在网上找了一些例子,都比较复杂,其实我这边只需要实现简单的菜单功能,两个选项,用户点击了以后实现一些简单的ajax功能。于是根据思路,用DOM创建一个菜...
  • batman9956
  • batman9956
  • 2011年02月25日 04:32
  • 3525

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户...
  • leadn
  • leadn
  • 2017年02月11日 11:56
  • 1508

CSS+JavaScript打造超酷右键菜单

但有时候我们会遇到这样的问题,我们希望禁止访问者使用右键菜单或者希望屏蔽右键菜单的某些功能,比如,为了保护网页内容我们不希望访问者通过右键菜单来查看网页源代码,也不希望其通过右键来对网页内容进行选取、...
  • yangm1203
  • yangm1203
  • 2007年07月31日 08:20
  • 558
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 右键菜单
举报原因:
原因补充:

(最多只允许输入30个字)