JavaScript+Prototype.jsで右クリックメニューが作れる「Proto.Menu」
動作デモ（テキストエリア内で右クリック）
任意のカーソル位置に定型文を挿入したり、定型文を削除したりできるサンプルプログラムです。
jQueryに押されて、どのリンクページもリンク切れなのが悲しくもありますが。笑
私は見捨てませんよ。
Prototype.jsを使っているページでも、右クリックでコンテキストメニューを出し、任意の関数を実行できるライブラリ「Proto.Menu」の紹介です。
リンク切れの理由は、ソースがgithub.comに移ったからですね。 でもダウンロード先も無くなってしまってるので、自分でなんとかかき集めました。
Proto.Menuの紹介
Proto.Menuは、シンプルで軽量なPrototype.jsベースのライブラリで、ページ内にコンテキストメニューを表示させることができます。
どんなもん？
- 軽い：３KBくらいです。（Prototype.jsは重いですが…笑）
- 控えめ：JavaScriptを切っていても影響しません。 独自の名前空間を使います。
- クロスブラウザ：A-gradeブラウザをフルサポート（OperaはCtrl + 左クリックも可）
- フルカスタマイズ可能：メニューを外部CSSで簡単に定義可能。画像ベースでもOK。
- 速い：メニュー・コンテナはページ読み込み時にレンダリングされ、クリックイベントで移動。
- 十分にテスト済み：期待される振る舞いのユニットテストを多く行っています。
仕様
- Prototype.js 1.6 が必要
- テスト済みブラウザ：Firefox 1.5以降, Internet Explorer 6以降, Safari 3以降, Opera 9以降, Netscape Navigator 9以降
- 作者：kangax氏
Proto.Menuの使い方
1. ダウンロードして、ページに含める
ここからダウンロードして、以下のようにページ内にprototype.jsといっしょに含めましょう。
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/proto.menu.0.6.js"></script>
2. スタイルシートをページに含める
オプションであるCSSファイルもあるので、ページに含めます。 自分でデザインしたい人はCSSファイルなどを作って独自に含めてください。
<link rel="stylesheet" href="proto.menu.css" type="text/css" media="screen" />
3. メニュー内に含めるメニューリストを定義する
メニュー１つにつき、メニュー名やコールバック関数（選択された際に呼び出される関数）を配列に定義していきます。
試しに今回はテキスト欄の任意の箇所に定型文を挿入したり、定型文をすべて削除したりする関数を導入してみますよ。（※IEは未サポート）
<script type="text/javascript">
var myMenuItems = [
{
name: "定型文を挿入する",
className: "insertStatic",
callback: function() {
var txtElem = $("contextArea");
var val = txtElem.value;
var before = val.slice(0, txtElem.selectionStart);
var after = val.slice(txtElem.selectionStart);
txtElem.value = before + "【定型文ですよ】" + after;
}
},
{
name: "定型文を削除する",
className: "removeStatic",
callback: function() {
var txtElem = $("contextArea");
txtElem.value = txtElem.value.replace(/【定型文ですよ】/g,'');
}
}
];
</script>
4. Proto.Menuを初期化して、メニュー用のリンクを作成
ここまでくれば後は簡単。 Proto.Menuを初期化する際に、作っておいたメニューリストを設定します。
new Proto.Menu({
selector: '#contextArea', // id属性が「contextArea」となっているエリアをクリックするとメニューが表示されます。
className: 'menu desktop', // メニューコンテナに割り当てられるクラス名です（CSSスタイリングに利用されます）
menuItems: myMenuItems // 事前に設定しておいたメニューアイテムのリスト
})
2011-06-21