このページの本文へ

JavaScriptだけでアイコンも付いて意外とカンタン

jQueryプラグインで世界に1つの右クリックメニュー

2009年04月30日 08時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
本文印刷
右クリックメニューのイメージ
自分のWebサイト専用、オリジナルの右クリックメニューを作ってみよう

 Windowsアプリケーション上でテキストや画像を選択して右クリックすると、選択した対象に応じたメニュー(コンテキストメニュー)が表示されます。必要な機能をすぐに選択できるので、メニューバーに並んだ膨大なメニューの中から選ぶのに比べて効率的です。Webサイトでも同じように、ページ上のそれぞれの項目に応じたコンテキストメニューが表示されれば、ユーザーにとって便利ではないでしょうか。

 実はこのコンテキストメニュー、JavaScriptライブラリを使えば意外に簡単にできます。今回は、jQueryの「Context Menu Plugin」を使ってコンテキストメニューを表示する方法を紹介します。


「Context Menu Plugin」を使ってみよう

 「Context Menu Plugin」は、Cory LaViska氏が開発したjQueryプラグインです。以下のページで配布されています。

 http://abeautifulsite.net/notebook/80

Context Menu Pluginのデモ(http://abeautifulsite.net/notebook_files/80/demo/jqueryContextMenu.html)
Context Menu Pluginのデモ(http://abeautifulsite.net/notebook_files/80/demo/jqueryContextMenu.html)

 ダウンロードしたファイルを解凍すると、「jQuery.contextMenu」というフォルダができます。フォルダ内の「jQuery.contextMenu.js」「jQuery.contextMenu.css」の2つのファイルをContext Menu Pluginを設置したいサーバーにアップロードします。なお、Context Menu Pluginは、jQuery 1.2.6以降が必須ですので、別途、jQuery本体もアップロードしておいてください。

 サーバーへのアップが済んだら、HTMLへ組み込んでみましょう。まず、コンテキストメニューを使いたいWebページのヘッダー部分に、以下のHTMLを追加します。


■HTMLのヘッダー部分に追加する行


<script type="text/javascript" src="http://アップロード先/jquery.js"></script>
<script type="text/javascript" src="http://アップロード先/jquery.contextMenu.js"></script>
<link rel="stylesheet" type="text/css" href="http://アップロード先/jquery.contextMenu.css" />


コンテキストメニューのHTMLの組み方

 次に、右クリックされた際に表示する内容を、 ullia要素を組み合わせて組みます。メニュー全体が ul要素で、メニューの各項目が li要素に対応します。 ul要素は、 class="contextMenu" としてクラスを指定し、さらに任意のID名(メニューのID)を付けておきます。


■コンテキストメニューのHTML


<ul id="メニューのID" class="contextMenu">
<li><a href="#項目ID1">項目1</a></li>
<li><a href="#項目ID2">項目2</a></li>
・・・
<li><a href="#項目IDn">項目n</a></li>
</ul>


 jQuery.contextMenuは、後でJavaScriptを使って右クリックで選ばれた項目を調べ、それぞれに応じた処理を実行します。そこで、li要素の中には a要素を入れ、その href属性に、個々のメニュー項目を識別するための項目IDを指定します。

 メニューのデザインは、「jquery.contextMenu.css」のスタイルシートで決まります。このスタイルシートをカスタマイズすると、メニューの見た目を変えられます。また、特定の li要素に class="separator" を指定すると、その li要素とその前の li要素の間に区切りの線が引かれます。

 複数のコンテキストメニューを使い分けたい場合は、その数だけ上の ul/li要素を繰り返してHTMLを組んでください。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く