[jQuery] 自訂右鍵 context menu


大家有否覺得瀏覽網頁,每一次都只用右鍵,是否覺得有點單調呢。

所以今天就介紹一個東西可以助你自訂右制的content menu,還可以自己加入不同的圖示,非常方便。

當你需要做web-base 的system 就好需要這個plugin 呢~

用法:

<!-- necessary libraray -->
<script src="jquery-1.4.2.min.js" type="text/javascript"><!--mce:0--></script> <!-- jQuery Core -->
<script src="jquery.contextMenu.js" type="text/javascript"><!--mce:1--></script> <!-- context menu plugin js -->
 <!-- context menu style sheet-->
 
<ul id="myMenu" class="contextMenu">
 
	<li class="edit">
        <a href="#edit">Edit</a></li>
 
 
	<li class="cut separator">
        <a href="#cut">Cut</a></li>
 
 
	<li class="copy">
        <a href="#copy">Copy</a></li>
 
 
	<li class="paste">
        <a href="#paste">Paste</a></li>
 
 
	<li class="delete">
        <a href="#delete">Delete</a></li>
 
 
	<li class="quit separator">
        <a href="#quit">Quit</a></li>
 
</ul>

加入jquery dom ready 的 javascript

$(document).ready( function() {
 
    $("#selector").contextMenu({
        menu: ''myMenu''
    },
        function(action, el, pos) {
        alert(
            ''Action: '' + action + ''\n\n'' +
            ''Element ID: '' + $(el).attr(''id'') + ''\n\n'' +
            ''X: '' + pos.x + ''  Y: '' + pos.y + '' (relative to element)\n\n'' +
            ''X: '' + pos.docX + ''  Y: '' + pos.docY+ '' (relative to document)''
            );
    });
 
});

Demo 示範:http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/
License: Dual License (GPL and MIT)
Source: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin

Share

, ,

  1. No comments yet.
(will not be published)

Anti-Spam Protection by WP-SpamFree