RightContextでは、
オリジナルのRightContextの使い方について解説しました。
そして、オリジナルのRightContextでは、どうしてもメニューを表示するためのHTMLタグにcontext属性を追加しなければなりませんでしたが、
これでは、HTMLの規格にきちんと準拠した文書になりません。
（HTMLやXHTMLのDTDには、contextという属性が登場してもいいとはされていない）
そのため、RightContextのスクリプトを少しいじって、
context属性を付けなくても可能なように変更しました。
変更したファイルはこちらからダウンロードすることができます。
変更内容と使い方は、rightcontext.jsの最初にコメントとして記述してありますが、 （私の英語はおかしくて読めないかもしれないし、）あえてここでも説明しておきます。
<?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"/>
<link rel="stylesheet" type="text/css" href="./rightcontext/rightcontext.css" />
<script type="text/javascript" src="./rightcontext/rightcontext.js"></script>
<title></title>
</head>
<body>
<span id="myTrigger">メニュー表示</a>
<script type="text/javascript">
// <![CDATA[
var menu1 = {
attributes: 'myAttr1,myAttr2',
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);
var myTrigger = document.getElementById('myTrigger');
RightContext.addTrigger(myTrigger, 'menu1');
// ]]>
</script>
</body>
</html>
HTML要素に、context属性を付けなくてよくなった代わりに、
メニューのトリガにしたい要素を、Javascriptコードにおいて手動で追加しなくてはなりません。
追加するにはRightContext.addTrigger()メソッドを使用します。
第一引数には追加したい要素を、第二引数にはメニューの名前を指定します。
実行結果は、RightContextと全く同じになります。