カスタマイズメニューを簡単に表示するRightContext

JavaScriptでオリジナルの右クリックメニューを表示するには、ある程度長いコードを書かなければいけませんが、 RightContextを使えば簡単に行うことができます。

使い方

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xml; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<title>RightContext original usage demonstrate</title>
<link rel="stylesheet" type="text/css" href="./rightcontext/rightcontext.css"/>
<script type="text/javascript" src="./rightcontext/rightcontext.js"></script>
</head>
<body>
<span context="menu1">メニューを表示</span>
<script type="text/javascript">
// <![CDATA[
var menu1 = {
	attributes: '', // 必須だけど、使い方がややこしいので、今回は空文字。
	items: [
		{
			type:RightContext.TYPE_MENU,
			text:'item 1',
			onclick:function() {alert('item 1 clicked')}
		},
		{
			type:RightContext.TYPE_SEPARATOR
		},
		{
			type:RightContext.TYPE_MENU,
			text:'item 2',
			onclick:function() {alert('item 2 clicked')}
		},
		{
			type:RightContext.TYPE_MENU,
			text:'item 3',
			onclick:function() {alert('item 3 clicked')}
		}
	]
};

RightContext.addMenu('menu1', menu1);
RightContext.initialize();

// ]]>
</script>
</body>
</html>

rightcontext.cssをリンク
rightcontext.jsをインクルード
context属性を持つ要素を作成
メニューの作成
メニューをRightContext.addMenu()で登録
RightContext.initialize()を呼び出す

まず最初に、rightcontext.cssと、rightcontext.jsをリンク/インクルードします。
そして次に、context属性を持った要素を作成します。今回は、span要素を作成して、context属性を付けています。

続いて、JavaScriptコードを記述します。
まずはメニューオブジェクトをJSON形式で記述します。
続いて、作成したメニューオブジェクトをRightContext.addMenu()を使って登録し、その際に、そのメニューに一意な名前を付けます。（上記例では'menu1'という名前をつけた。）
最後に、RightContext.initialize()を呼び出して、文書中の、すべてのcontext属性を備えた要素にメニューを関連付けて終わりです。

ブラウザで実行し、「メニューを表示」部を右クリックすると、

のように、メニューが現れると思います。
細かい使い方については、RightContextのダウンロードファイルの中にあるrightcontext.jsに説明が書いてあります。（英語ですが。。）

context要素をHTMLの中に直接埋め込むというのは、DTDに定義されていないタグを勝手に使うということなので、文書的にはあまり好ましくありません。
この問題についてはこちらで解決しています。

/ <戻る> / <ページ先頭> / RightContext改良版