[jsp]JSP+DIV右键菜单

最新推荐文章于 2023-07-20 10:11:20 发布

LYYan77

最新推荐文章于 2023-07-20 10:11:20 发布

阅读量3.1k

点赞数

分类专栏： WEB jsp 文章标签： WEB jsp

本文链接：https://blog.csdn.net/claire68/article/details/50724026

版权

WEB 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jsp

1 篇文章 0 订阅

订阅专栏

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


<%@ 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" oncontextmenu="return false" onmousedown="if(event.button == 2) showGRMenu()" onclick="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="全选" onclick="check_All('groupstates','menuGS')"/><br>
        <input name="clear-all" type="button" value="全清" onclick="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>