Jquery 右键菜单及运用

            $( function  () {

                $( " .validatebox-tip " ).hide();
                 var  mousePos;
                $( " #canNote " ).contextMenu({
                    menu:  ' myMenu '
                },  function  (action, el, pos) {
                     /* alert(
                    'Action: ' + action + '\n\n' +
                    'Element text: ' + $(this).html() + '\n\n' +
                    'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' +
                    'X: ' + pos.docX + '  Y: ' + pos.docY + ' (relative to document)'
                    ); */

                    showPoint(action, pos);
                });
                $( " #canNote " ).mousemove( function  (e) {
                    e  =  e  ||  window.event;
                    mousePos  =  mousePosition(e);
                });
            });
             function  showPoint(source, point) {
                 var  img  =   "" ;
                 switch  (source) {
                     case   " book " :
                        note  =  note  =   " <img class='note'  style='position:absolute;left: "   +  point.docX  +   " px;top: "   +  point.docY  +   " px; "   +   " ' src='MyStyle/img/book.jpg'> " ;
                         break ;
                     case   " file " :
                        note  =  note  =   " <img class='note'  style='position:absolute;left: "   +  point.docX  +   " px;top: "   +  point.docY  +   " px; "   +   " ' src='MyStyle/img/file.jpg'> " ;
                         break ;
                     case   " music " :
                        note  =  note  =   " <img class='note'  style='position:absolute;left: "   +  point.docX  +   " px;top: "   +  point.docY  +   " px; "   +   " ' src='MyStyle/img/music.jpg'> " ;
                         break ;
                     case   " txt " :
                        note  =   " <img class='note'  style='position:absolute;left: "   +  point.docX  +   " px;top: "   +  point.docY  +   " px; "
             +   " ' src='MyStyle/img/txt.jpg'> " ;
                         break ;
                     case   " video " :
                        note  =   " <img class='note'  style='position:absolute;left: "   +  point.docX  +   " px;top: "   +  point.docY  +   " px; "
             +   " ' src='MyStyle/img/video.jpg'> " ;
                         break ;
                     case   " web " :
                        note  =   " <img class='note'  style='position:absolute;left: "   +  point.docX  +   " px;top: "   +  point.docY  +   " px; "
             +   " ' src='MyStyle/img/web.jpg'> " ;
                         break ;
                     default :
                         break ;
                }

                $( " body " ).append(note);
                $( " .note " ).draggable({ containment:  " #canNote " , drap:  function  () {
                    $( " .validatebox-tip " ).show();
                    $( " .note, #canNote " ).disableContextMenu();
                }
                }).mouseover( function  (move) {
                     // mousePos = mousePosition(move);
                    $( this ).css({ border:  " 1px orange solid "  });
                     var  left  =  $( this ).css( " left " ).replace( " px " ,  "" )  *   1.0   +  $( this ).css( " width " ).replace( " px " ,  "" )  *   1.0   +   5.0 ;
                     var  top  =  $( this ).css( " top " ).replace( " px " ,  "" )  *   1.0   +  $( this ).css( " height " ).replace( " px " ,  "" )  *   1.0   -   5.0 ;
                     // alert(left+"---"+top);
                    $( " .validatebox-tip " ).css({
                        position:  " absolute " ,
                        left: left,
                        top: top
                    });

                    $( " .validatebox-tip-content " ).html( " some Note base infomation,some Note base infomation,some Note base infomation " )
                    $( " .validatebox-tip " ).show();

                }).mouseleave( function  () {
                    $( this ).css({ border:  " 1px #000000 solid  "  });
                    $( " .validatebox-tip " ).hide();

                }).dblclick( function  () {
                });
                $( " .note " ).contextMenu({
                    menu:  ' Delete '
                },  function  (action, el, pos) {
                     if  (action  ==   " delete " ) {
                        $(el).remove();

                    }
                     else   if  (action  ==   " edit " ) {
                        EditActivityInfo(el, pos);
                    }
                    $( " .validatebox-tip " ).hide();
                });
                $( " body " ).click( function  (move) {
                    $( " .validatebox-tip " ).hide();
                });
            }
             function  mousePosition(ev) {
                 if  (ev.pageX  ||  ev.pageY) {
                     return  { x: ev.pageX, y: ev.pageY };
                }
                 return  {
                    x: ev.clientX  +  document.body.scrollLeft  -  document.body.clientLeft,
                    y: ev.clientY  +  document.body.scrollTop  -  document.body.clientTop
                };
            }
             function  EditActivityInfo(handler, pos) {
                 var  pathArray  =  $(handler).attr( " src " ).split( ' / ' );
                 var  length  =  pathArray.length;
                 var  img  =  pathArray[length  -   1 ];
                 // alert(img);
                 switch  (img) {
                     case   " txt.jpg " :
                        ShowTextNote();
                         break ;
                     case   " book.jpg " :
                         // break;
                     case   " file.jpg " :
                         // break;
                     case   " music.jpg " :
                     case   " video.jpg " :
                         // break;
                     case   " web.jpg " :
                        ShowUpLoad();
                         break ;
                     default :
                         break ;
                }
            }
             function  ShowTextNote() {
                $( " #Text " ).dialog({
                    resizable:  true ,
                    height:  300 ,
                    width:  400 ,
                    modal:  true ,
                    buttons: {
                         " Save " :  function  () {
                            alert( "  has saved! " );
                            $( this ).dialog( " close " );
                        },
                         " Cancel " :  function  () { $( this ).close(); }
                    }
                });
            }
             function  ShowUpLoad() {
                $( " #UpFile " ).dialog({
                    resizable:  true ,
                    height:  100 ,
                    width:  400 ,
                    modal:  true ,
                    buttons: {
                         " Save " :  function  () {
                            alert( "  has saved! " );
                            $( this ).dialog( " close " );
                        },
                         " Cancel " :  function  () {
                            $( this ).dialog( " close " );
                        }
                    }
                },  null );
            }

 

转载于:https://www.cnblogs.com/3_mu/archive/2010/10/14/1851139.html