[jsp]JSP+DIV右键菜单

最新推荐文章于 2023-07-20 10:11:20 发布
最新推荐文章于 2023-07-20 10:11:20 发布
阅读量786 收藏
点赞数
分类专栏： JSP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24084925/article/details/52229012
版权 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String pa<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSP+DIV右键菜单</title>
<link rel="shortcut icon" href="images/vidi.jpg"/>
<style type="text/css">
body {
    height: 100%;
    text-align: center;
}
.group-status-info {
    width: 800px;
    border: 1px solid #ccc;
    text-decoration: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin: 0 auto;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.group-status-table {
    width: 95%;
    margin: 0 auto;
    text-align: left;
}

.group-status-table tr td {
    padding-top: 5px;
    padding-bottom: 5px;
    word-break: keep-all;
    white-space: nowrap;
    width: 126px;
}
.group-status-table label {
    cursor: pointer;
}
.menu {
    width : 55px;
    border : 5px solid #bfbfbf;
    background:#bfbfbf;
    visibility:hidden;
    position : absolute;
}
.menu input {
    width : 50px;
    margin : 1px;
}
</style>
</head>
<body>
<div class="group-status-info" id="gsInfo" οncοntextmenu="return false" οnmοusedοwn="if(event.button == 2) showGRMenu()" οnclick="hideGRMenu()">
    <table class="group-status-table">
    <tr>
            <td><label><input name="groupstates" type="checkbox" value="1"/>正在登记</label></td>
            <td><label><input name="groupstates" type="checkbox" value="2"/>等待检查</label></td>
            <td><label><input name="groupstates" type="checkbox" value="3"/>正在检查</label></td>
            <td><label><input name="groupstates" type="checkbox" value="4"/>等待报告</label></td>
            <td><label><input name="groupstates" type="checkbox" value="5"/>正在报告</label></td>
            <td><label><input name="groupstates" type="checkbox" value="6"/>等待审核</label></td>
        </tr>
    </table>
</div>
<div  id='menuGS' class="menu">
        <input name="check-all" type="button" value="全选" οnclick="check_All('groupstates','menuGS')"/><br>
        <input name="clear-all" type="button" value="全清" οnclick="clear_All('groupstates','menuGS')"/>
</div>
</body>
<script type="text/javascript"  src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showGRMenu() {
        var sInfo=g('gsInfo');
        var menu = g('menuGS');

        var evt = window.event || arguments[0];
        /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
        var rightEdge = sInfo.clientWidth-evt.clientX;
        var bottomEdge = sInfo.clientHeight-evt.clientY;
        /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
        if (rightEdge < menu.offsetWidth) 
            menu.style.left = sInfo.scrollLeft + evt.clientX - menu.offsetWidth + "px"; 
        else
            /*否则，就定位菜单的左坐标为当前鼠标位置*/
            menu.style.left = sInfo.scrollLeft + evt.clientX + "px";

        /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
        if (bottomEdge < menu.offsetHeight)
            menu.style.top = sInfo.scrollTop + evt.clientY - menu.offsetHeight + "px";
        else
            /*否则，就定位菜单的上坐标为当前鼠标位置*/
            menu.style.top = sInfo.scrollTop + evt.clientY + "px";

        /*设置菜单可见*/
        menu.style.visibility = "visible"; 
};
function hideGRMenu() {
    if (g('menuGS').style.visibility = 'visible'){
        g('menuGS').style.visibility = 'hidden';
    }
};
function check_All(name,menuId){
        var arr=gn(name);
        var menu=g(menuId);
        var i;
        for(i=0;i<arr.length;i++){
            arr[i].checked=true;
        }
        menu.style.visibility = 'hidden';
};
function clear_All(name,menuId){
        var arr=gn(name);
        var menu=g(menuId);
        var i;
        for(i=0;i<arr.length;i++){
            arr[i].checked=false;
        }
        menu.style.visibility = 'hidden';
};  
function g(id) {
        return document.getElementById(id);
    };

    function gn(name){
        return document.getElementsByName(name);
    };
</script>
</html>

实现JSP页面右键菜单： 
首先：屏蔽原本的右键菜单[οncοntextmenu=”return false”]。 
之后两个步骤：1、右键弹框(全选和全清按钮菜单)；2、全选（全选中）和全清（全不选）。 

</pre><pre name="code" class="javascript"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String pa<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSP+DIV右键菜单</title>
<link rel="shortcut icon" href="images/vidi.jpg"/>
<style type="text/css">
body {
    height: 100%;
    text-align: center;
}
.group-status-info {
    width: 800px;
    border: 1px solid #ccc;
    text-decoration: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    margin: 0 auto;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.group-status-table {
    width: 95%;
    margin: 0 auto;
    text-align: left;
}

.group-status-table tr td {
    padding-top: 5px;
    padding-bottom: 5px;
    word-break: keep-all;
    white-space: nowrap;
    width: 126px;
}
.group-status-table label {
    cursor: pointer;
}
.menu {
    width : 55px;
    border : 5px solid #bfbfbf;
    background:#bfbfbf;
    visibility:hidden;
    position : absolute;
}
.menu input {
    width : 50px;
    margin : 1px;
}
</style>
</head>
<body>
<div class="group-status-info" id="gsInfo" οncοntextmenu="return false" οnmοusedοwn="if(event.button == 2) showGRMenu()" οnclick="hideGRMenu()">
    <table class="group-status-table">
    <tr>
            <td><label><input name="groupstates" type="checkbox" value="1"/>正在登记</label></td>
            <td><label><input name="groupstates" type="checkbox" value="2"/>等待检查</label></td>
            <td><label><input name="groupstates" type="checkbox" value="3"/>正在检查</label></td>
            <td><label><input name="groupstates" type="checkbox" value="4"/>等待报告</label></td>
            <td><label><input name="groupstates" type="checkbox" value="5"/>正在报告</label></td>
            <td><label><input name="groupstates" type="checkbox" value="6"/>等待审核</label></td>
        </tr>
    </table>
</div>
<div  id='menuGS' class="menu">
        <input name="check-all" type="button" value="全选" οnclick="check_All('groupstates','menuGS')"/><br>
        <input name="clear-all" type="button" value="全清" οnclick="clear_All('groupstates','menuGS')"/>
</div>
</body>
<script type="text/javascript"  src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showGRMenu() {
        var sInfo=g('gsInfo');
        var menu = g('menuGS');

        var evt = window.event || arguments[0];
        /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
        var rightEdge = sInfo.clientWidth-evt.clientX;
        var bottomEdge = sInfo.clientHeight-evt.clientY;
        /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
        if (rightEdge < menu.offsetWidth) 
            menu.style.left = sInfo.scrollLeft + evt.clientX - menu.offsetWidth + "px"; 
        else
            /*否则，就定位菜单的左坐标为当前鼠标位置*/
            menu.style.left = sInfo.scrollLeft + evt.clientX + "px";

        /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
        if (bottomEdge < menu.offsetHeight)
            menu.style.top = sInfo.scrollTop + evt.clientY - menu.offsetHeight + "px";
        else
            /*否则，就定位菜单的上坐标为当前鼠标位置*/
            menu.style.top = sInfo.scrollTop + evt.clientY + "px";

        /*设置菜单可见*/
        menu.style.visibility = "visible"; 
};
function hideGRMenu() {
    if (g('menuGS').style.visibility = 'visible'){
        g('menuGS').style.visibility = 'hidden';
    }
};
function check_All(name,menuId){
        var arr=gn(name);
        var menu=g(menuId);
        var i;
        for(i=0;i<arr.length;i++){
            arr[i].checked=true;
        }
        menu.style.visibility = 'hidden';
};
function clear_All(name,menuId){
        var arr=gn(name);
        var menu=g(menuId);
        var i;
        for(i=0;i<arr.length;i++){
            arr[i].checked=false;
        }
        menu.style.visibility = 'hidden';
};  
function g(id) {
        return document.getElementById(id);
    };

    function gn(name){
        return document.getElementsByName(name);
    };
</script>
</html>

CODE男孩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现菜单的jsp文件
10-09
用elipse编写的实现菜单的jsp文件，较为简单
jsp 中右键菜单的操作
心窗月影
09-25 5479
这几天很是郁闷，就因为屏蔽不掉右键菜单，后来终于解决了，一句话：form里加：oncontextmenu="return false"就会只显示自己的菜单了：）下面是右键菜单的代码： .skin {BORDER-RIGHT: buttonhighlight 3px outset; BORDER-TOP: buttonhighlight 0px outset; FONT-SIZE:
jsp:右键菜单(刷新，后退，前进，关闭).
05-11 581
注意：使用的时候把图片改掉就可以了。。 效果不是怎么好。图片的效果没有做出来。。 http://www.qcode.org/article/273/275/295/2006/200603137953.html。 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+reque
jsp页面中实现右键点击自己的菜单
weixin_44353972的博客
12-13 1123
在有些场景中，可能有需要使用到自定义的右键菜单栏，更加快捷方便的进行操作数据，这里提供了一个方法实现右键点击呈现自定义的菜单栏 首先，在jsp页面中添加弹出框的内容，这里使用到了jQuery EasyUI，需要使用的话到http://www.jeasyui.com/download/v19.php进行下载 /*右键菜单*/ <div id="mm" class="easyui-menu" ...
jsp实现自定义右键功能选项
最新发布
Pinkface_的博客
07-20 157
【代码】jsp实现自定义右键功能选项。
HTML+javaScript右键菜单
08-25
在"jsp右键菜单"的标签中，JSP（JavaServer Pages）是一种基于Java的服务器端技术，通常用于动态生成HTML内容。在HTML+JavaScript右键菜单的实现中，JSP可能被用作后端服务，处理与菜单相关的数据请求或逻辑，例如...
dtree动态树+Javascript右键菜单
11-02
在【描述】中提到的“Javascript右键菜单”，是指在使用dtree时，通过鼠标右键点击节点，可以弹出一个上下文菜单，提供额外的操作选项。这对于增强用户界面的交互性和功能性非常有用。 在实现dtree动态树和...
dtree用法带右键菜单,带复选框
11-01
### dtree用法详解：集成右键菜单及复选框功能 #### 一、dtree简介 dtree 是一个基于 JavaScript 的轻量级树形菜单组件，它支持自定义节点内容，包括添加链接、图标等元素。此外，dtree 还提供了一些基本的功能，如...
JqueryEasyU页面布局。左边导航，上面tabs.都已经集成好了。
08-04
Tab页支持多种操作，比如右键菜单提供关闭、关闭其他、关闭左边所有、关闭右边所有的功能。这些功能可以通过监听`contextmenu`（右键点击）事件，结合`easyui-tabs`的API实现，例如`tabs('close', tabPanelId)`用于...
javascript 常用代码大全
08-12
12，div层相关（拖拽、显示、隐藏、移动、增加） 13，tablae相关(客户端动态增加行列，模拟进度条，滚动列表等) 14，各种相关类，如播放器，flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类（xmlhttp或iframe,...
右键菜单,超简单
阿牛博客
08-19 721
New Document  function setDocType(docType) {   // alert(docType); }  document.onClick=function()    {  alert(ddd);       mlay.style.display="none";     }//--> dddddddddddddddddddddddddddddddddddd
JS实现JSP页面，鼠标禁止另存,复制,右键,选取
平平爱学习的博客
03-29 1497
禁止另存代码：              "/*>";              禁止复制代码：        oncontextmenu='return false'    ondragstart='return false'    onselectstart ='return false'    onselect='document.selection.empty(
ContextMenu——右键菜单轻松拥有
fs20041242的专栏
12-01 720
（转）ContextMenu——右键菜单轻松拥有 ContextMenu 译自：http://www.trendskitchens.co.nz/jquery/contextmenu/ 简介 ContextMenu是一个轻量级jQuery插件，用于选择性地用自己创建的菜单代替浏览器的默认右键菜单。 特点 1.可以在一个页面中使用多个右键菜单； 2.一个右键菜单可以被...
实现右键菜单功能
简单是书的博客
11-28 2050
这一章解决的问题 1、实现右键菜单功能代码。 2、阻止默认事件的实际应用。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu { position: fixed
div中添加右键菜单
敬天爱人
09-24 5449
1. div 右键点击此处 2. function function showMenu(){     var evt = window.event || argument[0];     contextMenu.showAt([evt.clientX, evt.clientY]); } 3. menu              //此处以Ext菜单为例，其它框
右键显示自己的菜单栏
dongcehao的博客
04-11 1286
这里主要使用H5 中的一个新 属性  contextmenu话不多说，上代码 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;title&gt;&lt;/title&gt; 5 &lt;style type="text/css"&gt; 6 .rightMenu{ 7 width: 100px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值