右擊菜單——頁面擴展

右鍵顯示菜單

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>