2013年10月23日 星期三

jQuery 右鍵選單- jQuery contextMenu

contextmenu

最近在做網站上的右鍵選單,找了一個方便的外掛。

外掛網址
jQuery-contextMenu

下載後引用這兩隻
  1. <link href="src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />  
  2. <script src="src/jquery.contextMenu.js" type="text/javascript"></script>  

除了 js 外,也要使用 css ,樣式才會出來,之後再依自己需求改樣式就好了。

使用 plugin 也是參考他的範例就好
  1. $.contextMenu({   
  2.         selector: '.context-menu-one',    
  3.         callback: function(key, options) {   
  4.             var m = "clicked: " + key;   
  5.             window.console && console.log(m) || alert(m);    
  6.         },   
  7.         items: {   
  8.             "edit": {name: "Edit", icon: "edit"},   
  9.             "cut": {name: "Cut", icon: "cut"},   
  10.             "copy": {name: "Copy", icon: "copy"},   
  11.             "paste": {name: "Paste", icon: "paste"},   
  12.             "delete": {name: "Delete", icon: "delete"},   
  13.             "sep1""---------",   
  14.             "quit": {name: "Quit", icon: "quit"}   
  15.         }   
  16.     });   
  17.        
  18.     $('.context-menu-one').on('click'function(e){   
  19.         console.log('clicked'this);   
  20.     })  

如果要在選單裡面加動作,可以 callback

  1. items: {   
  2.     "cut": {name: "Cut", icon: "cut", callback: function(key, opt){    
  3.         opt.$trigger.addClass("cut");   
  4.         $group_name=opt.$trigger.text();           
  5.     }},             
  6. }  

opt.$trigger 就是 trigger 事件的那個 DOM ,除了可以寫 event 外,也可以對那個 DOM 做操作,像這邊就是附上一個剪下的 UI 的效果。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...