jquery 右键菜单实现

最新推荐文章于 2024-07-30 03:29:40 发布

像忘了谁sq

最新推荐文章于 2024-07-30 03:29:40 发布

阅读量2.2k

点赞数

分类专栏： js 文章标签：右键菜单

本文链接：https://blog.csdn.net/songqiang2011/article/details/86520724

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" href="css/contextMenu.css" />
       <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
       <script src="js/jquery.contextMenu.min.js"></script>
       <style>
           body {
               background: #000;
           }

           .container {
               width: 1000px;
               height: 720px;
               position: absolute;
               left: 50%;
               margin: 100px 0 0 -500px;
           }

           .container .box {
               width: 46%;
               height: 100%;
               background: #eee;
           }

           #box1 {
               float: left;
           }

           #box2 {
               float: right;
           }

           .title {
               height: 50px;
               line-height: 50px;
               font-size: 24px;
               text-align: center;
           }

           pre {
               font-size: 12px;
               font-family: "微软雅黑";
           }
       </style>
   </head>

   <body>
       <div class="container">
           <div id="box1" class="box">
               <div class="title">右键点我！</div>
               <pre>
               $("#box1").contextMenu({
                   menu: [{
                           text: "新增",
                           callback: function() {
                               alert("新增");
                           }
                       },
                       {
                           text: "复制",
                           callback: function() {
                               alert("复制");
                           }
                       },
                       {
                           text: "粘贴",
                           callback: function() {
                               alert("粘贴");
                           }
                       },
                       {
                           text: "删除",
                           callback: function() {
                               alert("删除");
                           }
                       }
                   ]
               });
               </pre>
           </div>
           <div id="box2" class="box">
               <div class="title">右键点我！</div>
               <pre>
           $("#box2").contextMenu({
               width: 110,// width
               itemHeight: 30,// 菜单项height
               bgColor: "#333",// 背景颜色
               color: "#fff",// 字体颜色
               fontSize: 12,// 字体大小
               hoverBgColor: "#99CC66",// hover背景颜色
               target: function(ele) {// 当前元素
                   console.log(ele);
               },
               menu: [{// 菜单项
                       text: "新增",
                       icon: "img/add.png",
                       callback: function() {
                           alert("新增");
                       }
                   },
                   {
                       text: "复制",
                       icon: "img/copy.png",
                       callback: function() {
                           alert("复制");
                       }
                   },
                   {
                       text: "粘贴",
                       icon: "img/paste.png",
                       callback: function() {
                           alert("粘贴");
                       }
                   },
                   {
                       text: "删除",
                       icon: "img/del.png",
                       callback: function() {
                           alert("删除");
                       }
                   }
               ]

           });
                   </pre>
           </div>
       </div>
       <script>
           $("#box1").contextMenu({
               menu: [{
                       text: "新增",
                       callback: function() {
                           alert("新增");
                       }
                   },
                   {
                       text: "复制",
                       callback: function() {
                           alert("复制");
                       }
                   },
                   {
                       text: "粘贴",
                       callback: function() {
                           alert("粘贴");
                       }
                   },
                   {
                       text: "删除",
                       callback: function() {
                           alert("删除");
                       }
                   }
               ]
           });

           $("#box2").contextMenu({
               width: 110, // width
               itemHeight: 30, // 菜单项height
               bgColor: "#333", // 背景颜色
               color: "#fff", // 字体颜色
               fontSize: 12, // 字体大小
               hoverBgColor: "#99CC66", // hover背景颜色
               target: function(ele) { // 当前元素
                   console.log(ele);
               },
               menu: [{ // 菜单项
                       text: "新增",
                       icon: "img/add.png",
                       callback: function() {
                           alert("新增");
                       }
                   },
                   {
                       text: "复制",
                       icon: "img/copy.png",
                       callback: function() {
                           alert("复制");
                       }
                   },
                   {
                       text: "粘贴",
                       icon: "img/paste.png",
                       callback: function() {
                           alert("粘贴");
                       }
                   },
                   {
                       text: "删除",
                       icon: "img/del.png",
                       callback: function() {
                           alert("删除");
                       }
                   }
               ]