2-7 右键菜单插件——contextmenu
本节编程练习不计算学习进度，请电脑登录imooc.com操作

右键菜单插件——contextmenu

右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：

$(selector).contextMenu(menuId,{options});

Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。

例如，选中页面<textarea>元素，点击右键，弹出插件绑定的快捷菜单，点击菜单中的各个选项，便在页面中显示操作的对应名称。如下图所示：

在浏览器中显示的效果：

从图中可以看出，当文本框与右键菜单通过插件contextmenu()方法绑定后，选中文本框，点击右键时，弹出快捷菜单，点击“新建”选项时，显示操作对应内容。

任务

我来试试，亲自将右键菜单插件与按钮相绑定，点击按钮右键时，弹出菜单。

在下列代码的第28行，调用contextMenu()方法将按钮与弹出菜单绑定。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>右键菜单插件</title>
  5.         <link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  8.         <script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <div id="divtest">
  13.             <div class="title"><span class="fl">点击右键</span></div>
  14.             <div class="content">
  15.                 <input id="btnSubmit" type="button" value="提交" />
  16.                 <div class="tip"></div>
  17.             </div>
  18.             <div class="contextMenu" id="sysMenu">
  19.                 <ul>
  20.                     <li id="Li3"><img src="http://img1.sycdn.imooc.com//52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
  21.                     <li id="Li4"><img src="http://img1.sycdn.imooc.com//52e4b3680001424900160016.jpg" alt="" />退出</li>
  22.                 </ul>
  23.             </div>
  24.         </div>
  25.  
  26.         <script type="text/javascript">
  27.             $(function () {
  28.                 ?,
  29.                   { bindings:
  30.                      {
  31.                          'Li3': function (Item) {
  32.                              $(".tip").show().html("您点击了“保存”项");
  33.                          },
  34.                          'Li4': function (Item) {
  35.                              $(".tip").show().html("您点击了“退出”项");
  36.                          }
  37.                      }
  38.                   });
  39.             });
  40.         </script>
  41.     </body>
  42. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. #divtest .content .tip
  22. {
  23.     text-align: center;
  24.     border: solid 1px #ccc;
  25.     background-color: #eee;
  26.     margin: 20px 0px;
  27.     padding: 8px;
  28.     display: none;
  29. }
  30. .fl
  31. {
  32.     float: left;
  33. }
  34. .fr
  35. {
  36.     float: right;
  37. }
下一节