1. 程式人生 > >js jQuery 右鍵選單 清屏

js jQuery 右鍵選單 清屏

主要用到了oncontextmenu事件,在oncontextmenu事件中使用return false 遮蔽掉原生右鍵選單,再使用event獲取滑鼠的座標位置,設定自定義選單的位置。

 

http://swisnl.github.io/jQuery-contextMenu/demo.html

https://swisnl.github.io/jQuery-contextMenu/docs.html

 

http://www.hangge.com/blog/cache/detail_1821.html

 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="jquery-3.1.1.js" charset="utf-8"></script>

    <script src="contextMenu/jquery.ui.position.min.js" type="text/javascript"></script>

    <script src="contextMenu/jquery.contextMenu.js" type="text/javascript"></script>

    <link href="contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

    <button class="context-menu-one">按鈕1</button>

    <script type="text/javascript">

      $(function() {

         //初始化選單

         $.contextMenu({

             selector: '.context-menu-one',

             callback: function(key, options) {

                 console.log("點選了:" + key);

             },

             items: {

                 "edit": {name: "編輯", icon: "edit"},

                 "cut": {name: "剪下", icon: "cut"},

                 "copy": {name: "複製", icon: "copy"},

                 "paste": {name: "貼上", icon: "paste"},

                 "delete": {name: "刪除", icon: "delete"},

                 "sep1": "---------",

                 "quit": {name: "退出", icon: function(){

                     return 'context-menu-icon context-menu-icon-quit';

                 }}

             }

         });

      });

    </script>

  </body>

</html>

icon: "paste" // Class context-menu-icon-paste is used on the menu item.

使用自帶的圖示需要font資料夾的內容

 

 

http://www.111cn.net/wy/jquery/141609.htm