[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
About Chowky
Chowky 希望可以透過這個blog 來分享自己學到的知識。亦希望可以分享最新的資訊。 IT 轉變得很快,要常常留意市場的變化,面對大陸的競爭,香港的 IT 方面的人才要更有市場觸覺,緊貼市塲走勢。因為其他地方的IT技術已經走得比以往更快。不進則退,就讓大家一起來交流、提昇IT的心得! Chowky 因為工作關係,所以一開始接觸的是visual basic, foxpro ( 這不代表我老 ) 之後是 .NET, MSSQL 和 Crystal Report. 由工作學到的project management, system analysis and design 以及 system testing, user acceptance tests and different documentations. 另外,由不同的freelance 方面學到dreamweaver, javascript, php, mysql. 後來興起CMS wave, Chowky 亦學會了Joomla! 以及常用的javascript framwork: jquery and mootool. 連deisgn 都要自己包辦,所以接觸了photoshop, illustrator, firework. 新的工作方面,要利用RIA -- Flex and AIR 方面的技術。所以緊接下來應該會多一點分享ria 方面的技術 Chowky 所說的未必是對的,但我深信我所說的是未來 IT Trend. 大家亦應抱著懷疑的態度去分析每一件事,未經思考不要輕易相信。

No Comments, Be The First!

Leave a Reply