[jsp]JSP+DIV右键菜单

实现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 + "/";
%>

<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;itrue;
        }
        menu.style.visibility = 'hidden';
};
function clear_All(name,menuId){
        var arr=gn(name);
        var menu=g(menuId);
        var i;
        for(i=0;ifalse;
        }
        menu.style.visibility = 'hidden';
};  
function g(id) {
        return document.getElementById(id);
    };

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

你可能感兴趣的:(WEB,jsp)