我想做个右键菜单,在右击某个class的div的时候就弹出菜单,不知道怎么弄?

解决方案 »

  1.   

    直接找jquery在context插件吧, 不需要自己研发, 人家已经做得很好了http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html
      

  2.   

    我从jquery官网下了右击菜单的插件,直接拷贝的官网的例子,什么效果也没有,不知道问题出在哪儿?
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.contextmenu.r2.js"></script><script type="text/javascript">
        $("div.roomunit").contextMenu('myMenu1', {
          bindings: {
            'open': function(t) {
              alert('Trigger was '+t.id+'Action was Open');
            },
            'email': function(t) {
              alert('Trigger was '+t.id+'Action was Email');
            },
            'save': function(t) {
              alert('Trigger was '+t.id+'Action was Save');
            },
            'delete': function(t) {
              alert('Trigger was '+t.id+'Action was Delete');
            }
          }
        });
    </script>    <div class="contextMenu" id="myMenu1">
          <ul>
            <li id="open"> Open</li>
            <li id="email"> Email</li>
            <li id="save"> Save</li>
            <li id="close"> Close</li>
          </ul>
        </div>有一个class='roomunit'的div,为什么不行,没有报错,但是firefox错误控制台有警告:
    时间戳: 2012-4-9 23:30:20
    警告: 预期为 ':' 但却得到 ';'。  声明被丢弃。
    源文件:http://127.0.0.3/
    行:0

    这什么意思,还有0行?
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <style type="text/css">
            body
            {
                background: #222;
                font: 14px 'Microsoft Yahei' , Arial;
            }
            ul, li
            {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            a
            {
                text-decoration: none;
                color: #000;
            }
            #wrap
            {
                width: 800px;
                height: 550px;
                border: 1px solid #FF9C00;
                background: #F0E6AF;
                position: relative;
                margin: .5em auto;
            }
            #wrap ul
            {
                background: #eee;
                border: 1px solid #999;
                width: 150px;
                position: absolute;
                display: none;
                -moz-box-shadow: 3px 3px 9px #999;
                -webkit-box-shadow: 3px 3px 9px #999;
                -o-box-shadow: 3px 3px 9px #999;
                box-shadow: 3px 3px 9px #999;
            }
            #wrap ul li
            {
                border-bottom: 1px solid #ddd;
                line-height: 24px;
            }
            #wrap li.no
            {
                border-bottom: none;
            }
            #wrap ul li a
            {
                display: block;
                padding-left: .5em;
            }
            #wrap ul li a:hover
            {
                background-color: #FFBD00;
            }
        </style>    <script type="text/javascript"> 
        function $(id) { 
            return document.getElementById(id); 
        };     var EventUnit = {addHandler: 
            function(element, type, handler) {//添加事件处理程序 
                if(element.addEventListener) { 
                    element.addEventListener(type, handler, false); 
                } else if(element.attachEvent) { 
                    element.attachEvent('on' + type, handler); 
                } else { 
                    element['on' + type] = handler; 
                }; 
            }, 
            getEvent: function(event) { 
                return event ? event : window.event; 
            }, 
            preventDefault: function(event) {//取消事件默认动作 
                if(event.preventDefault) { 
                    event.preventDefault(); 
                } else { 
                    event.returnValue = false; 
                }; 
            } 
        }     EventUnit.addHandler(window, 'load', function() { 
            var wrap = $('wrap'); 
            var menu = $('menu'); 
            var menuStyle = menu.style.display; 
            var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight; 
            var w = 0, h = 0; 
            var left = 0, top = 0;         EventUnit.addHandler(wrap, 'contextmenu', function(event) { 
                event = EventUnit.getEvent(event); 
                EventUnit.preventDefault(event);         menu.style.display = 'block'; 
            w = menu.clientWidth; 
            h = menu.clientHeight; 
            left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; 
            top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h; 
            menu.style.left = left + 'px'; 
            menu.style.top = top + 'px'; 
        });     EventUnit.addHandler(document, 'click', function() { 
            menu.style.display = menuStyle; 
        }); 
    }); 
        </script></head>
    <body>
        <div id="wrap">
            <p>
                单击右键看效果~</p>
            <ul id="menu">
                <li><a href="#">撤销</a></li>
                <li><a href="#">重做</a></li>
                <li><a href="#">复制</a></li>
                <li><a href="#">粘贴</a></li>
                <li><a href="#">大小写转换</a></li>
                <li><a href="#">回车</a></li>
                <li><a href="#">拼写检查</a></li>
                <li><a href="#">新建</a></li>
                <li><a href="#">自定义</a></li>
                <li><a href="#">图形选项</a></li>
                <li class="no"><a href="#">关闭</a></li>
            </ul>
        </div>
    </body>
    </html>