JavaScript实现右键菜单（四）

最新推荐文章于 2023-11-22 16:12:44 发布
最新推荐文章于 2023-11-22 16:12:44 发布
阅读量1.8k 收藏
点赞数
文章标签： javascript function button filter 测试 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ahhsxy/article/details/583276
版权

以上介绍了右键菜单的实现思路和原代码。下面说明应用举例。

<html>
<head>
<style>
/*BS右键菜单*/
.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;
  z-index:999;
}
.bs_rm_info_td
{
  FONT-SIZE: 14px;
  color:#FFFFFF;
  font-family:@Tahoma,@宋体;
  width:20px;
  layout-flow:vertical-ideographic;
}
.bs_rm_info{
  position:absolute;
  top:1px;
  height:20px;
  overflow:hidden;
}

.bs_rm_over {
  BACKGROUND-COLOR: #8989bc;
  COLOR: #ffffff;
  CURSOR: default;
  FONT-SIZE: 12px;
}
.bs_rm_out {
  BACKGROUND-COLOR: #efefef;
  COLOR: #000000;
  FONT-SIZE: 12px;
}
.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%;
}
</style>
<SCRIPT language=javascript src="bsrightmenu.js"></SCRIPT>
<script type='text/javascript'>
/*---去空格---*/
String.prototype.Trim = function()
{
return this.replace(/(^/s*)|(/s*$)/g, "");
}

String.prototype.LTrim = function()
{
return this.replace(/(^/s*)/g, "");
}

String.prototype.RTrim = function()
{
return this.replace(/(/s*$)/g, "");
}

var TestFrame_rmMenu = new BSRightMenu("TestFrame_rmMenu");
var rmTestArea = TestFrame_rmMenu.addItemArea("自定义右键菜单");
/*参数：1、父菜单索引（添加的顺序，0开始）
* 2、显示文字。
* 3、执行的js方法。
* 4、图片：建议16*16
* 5、disabled。true：不可用，false：可用；
*/
rmTestArea.addItem(-1, "菜单一", "alert('菜单一')", "", true);
rmTestArea.addItem(-1, "菜单二", "", "save.gif");
rmTestArea.addItem(1, "菜单二_1", "alert('菜单二_1')", "");
rmTestArea.addItem(1, "-", "", "");
rmTestArea.addItem(1, "菜单二_2", "alert('菜单二_2')", "");
rmTestArea.addItem(2, "改变菜单一的可用", "setItemDisabled(0)", "");
rmTestArea.addItem(2, "菜单二_1_2", "alert('菜单二_1_2')", "");
rmTestArea.addItem(4, "菜单二_2_1", "alert('菜单二_2_1')", "");
rmTestArea.addItem(4, "-", "", "");
rmTestArea.addItem(4, "菜单二_2_2", "alert('菜单二_2_2')", "");

function setItemDisabled(inindex){
 TestFrame_rmMenu.itemAreaList[0].itemList[inindex].disabled=!TestFrame_rmMenu.itemAreaList[0].itemList[inindex].disabled;
}
function doRight(){
 TestFrame_rmMenu.doRightMenu(0);
}
</script>
</head>
<body>
<div οnmοuseup="doRight()" style="cursor:default;">右键测试Div</div>
<input id="" type="button" value="右键测试Button" οnmοuseup="doRight()"/>
<script type='text/javascript'>
document.onmouseup = function(){TestFrame_rmMenu.doRightMenu(-1);};
</script>
</body>

</html>
萧逸2005
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现右键菜单效果
05-23
js实现右键菜单效果，测试可用（源代码）
基于JavaScript实现右键菜单和拖拽功能
10-21
在本文中，我们将深入探讨如何利用JavaScript实现右键菜单功能和拖拽功能。 首先，让我们关注右键菜单功能的实现。在HTML中，我们创建了一个id为"menu"的div元素，它在默认情况下是隐藏的。当用户右键点击时，通过`...
JavaScript实现右键菜单（一）
Binarystar 之家
09-12 3842
 效果：javascript实现右键菜单的方式很多，思路也各有千秋，在介绍代码之前先简单介绍一下我的右键对象思路。 1、 一个右键对象包含多个右键块。 2、 任何一个页面或控件都能且最多只能挂一个右键块。3、 每个右键块拥有多级右键项。4、 采用pupop方式。下面分对象介绍源码：公共部分：/** * 标题: BinaryStar右键菜单JS模型 * 功能描述:
Js 右键菜单
Java交流
03-17 339
Js 右键菜单 //mname是菜单对应的名称，数组的个数必须与下面murl对应 var mname=new Array( "首 页", "修 改", "下 载", "删 除", "新 建", "刷 新" ); //murl是菜单对应的操作，可以是任意javascript代码，但是要注意不要在里面输入\"
JavaScript实现右键菜单
最新发布
如诗
11-22 734
JavaScript实现博客的右键菜单
js自定义右键菜单
weixin_50655808的博客
10-09 907
**1. 利用监听window对象的oncontextmenu事件来实现自定义的菜单 首先将菜单隐藏起来，当捕获到右键事件时，将菜单移动到合适位置再显示出来** 样式 <style> * { margin: 0; padding: 0; } .menu { background-color:white; width: 100px; border: 1px solid #ccc;
基于JavaScript实现智能右键菜单
10-22
首先，智能右键菜单的实现依赖于JavaScript事件监听。在上述代码中，`mousedown`事件被用来检测用户的鼠标操作，特别是右键点击。`e.which == 3`用于判断是否为右键点击，这是在JavaScript中识别右键的标准方法。 ...
Javascript实现的简单右键菜单类
10-23
本示例介绍了一个简单的JavaScript实现的右键菜单类，主要用于创建和管理自定义的右键菜单。这个类能够屏蔽浏览器默认的右键菜单，并提供自定义的菜单项和事件处理。 首先，这个右键菜单类包含以下几个主要参数： ...
javascript自定义右键菜单插件
10-15
JavaScript 自定义右键菜单插件是一种实用的工具，它允许开发者根据自己的需求创建并控制页面上的右键菜单。本文将详细介绍如何使用这个插件，并提供相关的代码示例。 首先，要使用这个插件，你需要在HTML文件中...
JavaScript实现右键菜单（二）
Binarystar 之家
09-12 2092
BSRightItem/** * 标题: BSRightItem * 功能描述: 右键菜单项。 * 作者: BinaryStar原创B/S框架 * 版本: 0.1 * 创建日期: 2005-12-21 */ function BSRightItem(pid, areaIndex, areaId,  pIndex, index, text, jsfun, img, disabled)
javascript 右键菜单
03-04
javascript 右键菜单，代码清晰简单，适合初学者用
右键菜单(javaScript)
06-25
单击鼠标右键实现如IE右键效果的菜单，菜单内容可由程序员自己定义！
js右键菜单，菜单项由js动态添加，纯js调用
10-11
js右键菜单，测试通过IE，火狐，Google，菜单项由js动态添加，在菜单项中可添加图标，文本，菜单项点击事件，以及分隔线
js(javascript)右键菜单实现
09-09
js(javascript)右键菜单实现,js(javascript)右键菜单实现,js(javascript)右键菜单实现
JS 右键菜单
梦想家博客
03-30 371
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { ma
javascript右键菜单分析
weixin_30446613的博客
03-10 106
右键菜单 思路 1、遮蔽原来的默认右键菜单 2、新建右键菜单跟随鼠标移动 3、注意边界处的位置变化 4、自定义右键内容的具体效果 具体 这样的事件涉及到有关contextmenu事件，阻止默认事件，获取鼠标点击位置，涉及到offsetWidth等等，具体展示 offsetWidth:元素在水平方向占据的空间，只包括width padding border offsetHeight...
el-tree实现右键菜单重命名
09-13
要实现右键菜单重命名功能，你可以使用el-tree组件的contextmenu事件和自定义右键菜单来实现。 首先，在el-tree组件上添加contextmenu事件监听器，可以使用@contextmenu指令或v-contextmenu指令。例如： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值