RightContext

JavaScriptで簡単に独自の右クリックメニューを作成するライブラリ「RightContext」。
ページで右クリックを押したときに、次のようにポップアップで独自メニューを出すライブラリが公開されました。



右クリックにメニューを組み込んでしまうことで、ツールによっては大変便利な使い勝手を提供できるはずです。

以下に実装方法を紹介。

(1) まずScriptファイルを読み込みます。

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

(2) 次に右クリックしたときに独自メニューを表示したい部分の定義

<a href="#" id="link" context="one" attr1="freecrm.com" attr2="FreeCRM" attr3="Hiya World!" cond="Y">Anchor tag test. Right click me.</a>

(3) そして、JavaScriptで初期化。

<script>
// define a menu
menu1 = { attributes: "attr1,attr2,attr3,cond" ,
items: [
{type:RightContext.TYPE_MENU,
text:"Search for [attr2] on Google",
url:"http://www.goole.com?q=[attr1]" },

{type:RightContext.TYPE_MENU,
text:"The second item in the menu. Will only show if cond eq Y (it is [cond])",
requires: ["cond", "Y"],
onclick:function() {alert('This is a custom javascript')} },

{type: RightContext.TYPE_SEPERATOR },

{type: RightContext.TYPE_TEXT,
text: "This is hardcoded, yet dynamic text: attr1=[attr1], attr2=[attr2], attr3=[attr3]"} ,

{type: RightContext.TYPE_TEXT_EXT,
url: "external.html"} ]
};

// add menu1 as 'one' to the menu collection
RightContext.addMenu("one", menu1);

// initialize RightContext
RightContext.initialize();

</script>

menu1 変数を定義して、まず、attributes に(2)で定義したタグ属性で読み込みたい属性名をカンマ区切りで指定。
次に　items を初期化します。これは右クリックで表示するメニューの内容を表します。
items は 連想配列の配列によって定義されています。

１つの連想配列は、type, requires, onclick, url などによって構成されます。

typeによってそのアイテムのタイプを指定されます。
RightContext.TYPE_MENU(メニュー)、RightContext.TYPE_SEPERATOR (セパレーター)、RightContext.TYPE_TEXT(テキスト) などがあるようです。
そして、text によってメニューの表示テキストを指定します。
requiresは必要な値で、url はクリック時に飛ぶＵＲＬ。onclick はクリック時に呼ばれるコールバック関数となります。

使い方もそこまで難しくないところがよいですね。