JavaScript+Prototype.jsで右クリックメニューが作れる「Proto.Menu」



動作デモ(テキストエリア内で右クリック)

任意のカーソル位置に定型文を挿入したり、定型文を削除したりできるサンプルプログラムです。

jQueryに押されて、どのリンクページもリンク切れなのが悲しくもありますが。笑

私は見捨てませんよ。

Prototype.jsを使っているページでも、右クリックでコンテキストメニューを出し、任意の関数を実行できるライブラリ「Proto.Menu」の紹介です。

リンク切れの理由は、ソースがgithub.comに移ったからですね。 でもダウンロード先も無くなってしまってるので、自分でなんとかかき集めました。

Proto.Menuの紹介

Proto.Menuは、シンプルで軽量なPrototype.jsベースのライブラリで、ページ内にコンテキストメニューを表示させることができます。

どんなもん?

  • 軽い:3KBくらいです。(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. メニュー内に含めるメニューリストを定義する

メニュー1つにつき、メニュー名やコールバック関数(選択された際に呼び出される関数)を配列に定義していきます。

試しに今回はテキスト欄の任意の箇所に定型文を挿入したり、定型文をすべて削除したりする関数を導入してみますよ。(※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