右击菜单——页面扩展

右键显示菜单

js

<script type="text/javascript">
    $(function(){
        //首先屏蔽到浏览器自带的右键功能
        document.oncontextmenu = function(){
            return false;
        };
        $(".td_click").unbind("mousedown").bind("mousedown", function (e) {
            // 基础数据（周和餐赋值）
            $('#basic_data').val(e.currentTarget.dataset.basic);
            $('#week_dish_id').val(e.currentTarget.dataset.dishId);
            if(e.which == 3){
                var x = e.clientX; //x坐标
                var y = e.clientY; //y坐标
                //获取menu的长宽
                var menuHeight = $(".menu").height();
                var menuWidth = $(".menu").width();
                //滑动动态
                var ScrollTop = getScrollTop();
                var ScrollLeft = getScrollLeft();
                // console.log(x,y,ScrollTop,ScrollLeft);
                //判断
                if(ScrollTop > 0){
                    y = ScrollTop + y;
                }
                if(ScrollLeft > 0){
                    x = ScrollLeft + x;
                }
                //之前必须要绝对定位才行
                $(".menu").show().css({left:x,top:y});
            } 
        });
    });

    //点击空白隐藏鼠标右键
    $(document).click(function(){
        $(".menu").hide();
    });

    //响应事件
    function jy_menu(i){
        var basic_data = $('#basic_data').val();
        var recipeid = $('#recipeid').val();
        var week_dish_id = $('#week_dish_id').val();
        var is_copy = $('#is_copy').val();
        switch(i){
            case 0:
                //添加
                window.location.href = '__URL__/add_catering_management/basic_data/'+basic_data+'/recipeid/'+recipeid;
            break;
            case 1:
                //粘贴
                $.ajax({
                    dataType:"json",
                    data:{basic_data:basic_data,is_copy:is_copy},
                    type:"post",
                    url:'__URL__/paste_recipe',
                    success:function(result){
                        result_alert(result);
                    }
                });
                break;
            case 2:
                //复制菜肴
                if(week_dish_id){
                    $('#is_copy').val(basic_data+'_'+recipeid+'_'+week_dish_id+'_1');
                }else{
                    tippop("请先添加菜肴！");
                }
                break;
            case 3:
                //删除菜肴
                $.ajax({
                    dataType:"json",
                    data:{week_dish_id:week_dish_id},
                    type:"post",
                    url:'__URL__/delete_dish',
                    success:function(result){
                        result_alert(result);
                    }
                });break;
            case 4:
                //复制全部
                if(week_dish_id){
                    $('#is_copy').val(basic_data+'_'+recipeid+'_'+week_dish_id+'_2');
                }else{
                    tippop("请先添加菜肴！");
                }
                break;
            case 5:
                //删除全部
                $.ajax({
                    dataType:"json",
                    data:{basic_data:basic_data,recipeid:recipeid},
                    type:"post",
                    url:'__URL__/delete_meal',
                    success:function(result){
                        result_alert(result);
                    }
                });
                break;
            default:
                //查看详情
                var url_ = '__URL__/detail_recipe/basic_data/'+basic_data+'/recipeid/'+recipeid;
                var myDialog = dialog();
                $.get(url_, function(data){
                    myDialog.content(data);
                    myDialog.title('菜肴详情');
                    myDialog.width('700');
                    myDialog.height();
                    myDialog.showModal();
                    /* 关闭 */
                    $("#DialogClose").live('click',function() {
                        myDialog.close().remove();
                    });
                });
        }
    }
    // 竖向滑动
    function getScrollTop(){
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if(document.body){
            bodyScrollTop = document.body.scrollTop;
        }
        if(document.documentElement){
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    // 横向滑动
    function getScrollLeft() {
        var ScrollLeft = 0, bodyScrollLeft = 0, documentScrollLeft = 0;
        if(document.body){
            bodyScrollLeft = document.body.scrollLeft;
        }
        if(document.documentElement){
            documentScrollLeft = document.documentElement.scrollLeft;
        }
        ScrollLeft = (bodyScrollLeft - documentScrollLeft > 0) ? bodyScrollLeft : documentScrollLeft;
        return ScrollLeft;
    }
    // 浏览器的可见高度
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
        } else {
            clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
        }
        return clientHeight;
    }

    // 浏览器的可见宽度
    function getClientWidth() {
        var clientWidth = 0;
        if (document.body.clientWidth && document.documentElement.clientWidth) {
            clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
        } else {
            clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
        }
        return clientWidth;
    }
</script>

html

<div class = "menu">
   <ul>
          <li onclick = "jy_menu(0)">添加</li>
          <li onclick = "jy_menu(1)">粘贴</li>
          <li onclick = "jy_menu(2)">复制</li>
          <li onclick = "jy_menu(3)">删除</li>
          <li onclick = "jy_menu(4)">复制全部</li>
          <li onclick = "jy_menu(5)">删除全部</li>
          <li onclick = "jy_menu(6)">查看详情</li>
      </ul>
  </div>
  <table cellpadding="0" cellspacing="0" width="100%" align="center">
    <tr  class="item_style">
        <td></td>
        <td colspan="2">周一</td>
        <td colspan="2">周二</td>
        <td colspan="2">周三</td>
        <td colspan="2">周四</td>
        <td colspan="2">周五</td>
        <td colspan="2">周六</td>
        <td colspan="2">周日</td>
    </tr>
    <tr  class="item_style">
        <td></td>
        <td>食物|菜肴（克）</td>
        <td>食物用量/人（克）</td>
        <td>食物|菜肴（克）</td>
        <td>食物用量/人（克）</td>
        <td>食物|菜肴（克）</td>
        <td>食物用量/人（克）</td>
        <td>食物|菜肴（克）</td>
        <td>食物用量/人（克）</td>
        <td>食物|菜肴（克）</td>
        <td>食物用量/人（克）</td>
        <td>食物|菜肴（克）</td>
        <td>食物用量/人（克）</td>
        <td>食物|菜肴（克）</td>
        <td>食物用量/人（克）</td>
    </tr>
</table>