HOME > お役立ちツール > UsefulCntxt
【UsefulCntxt】 - コンテキストメニュー実装スクリプトライブラリ

UsefulCntxtは、Webページでコンテキストメニューをシンプルに実装するための、クロスブラウザ対応のスクリプトライブラリです。
機能やデザインのカスタマイズも容易に行う事が出来ます。


1.サンプル
2.実装方法
3.カスタマイズ
4.関数リファレンス
5.更新履歴
6.ダウンロード
概要へ

サンプル

クリックすることで、クリック位置にコンテキストメニューを表示させるサンプルです。
サンプルボタン1

マウスオーバーすることで、固定位置にコンテキストメニューを表示させるサンプルです。
サンプルボタン2
概要へ

実装方法

1. htmlヘッダにusefulcntxt.jsusefulcntxt.cssを追記します。
<script type="text/javascript" src="usefulcntxt.js"></script>
<link href="usefulcntxt.css" rel="stylesheet" type="text/css"/>

2. UsefulCntxtのオブジェクトを用意します。
単純にクリック位置にコンテキストメニューを表示させる場合、用意するスクリプトは最もシンプルに済みます。
/* オブジェクトを作成します。 */
//同時にIDとタイトルを設定しておきます。
var cntxt = new UsefulCntxt({
    id:"samplemenu",
    title:"サンプルメニュー1"
});

/* メニューボタンを追加します。 */
//第二引数にURL文字列を指定すると、ボタン押下後に指定されたURLへ移動します。
cntxt.addItem("サブメニュー1", "./example1.html");
//第二引数に関数を指定すると、ボタン押下後に指定された関数を実行します。
cntxt.addItem("サブメニュー2", func1);
//第三引数に数値を指定すると、指定された位置にメニューボタンを追加します。
//メニューボタンの位置は「1」から始まります。
cntxt.addItem("サブメニュー1.5", "./exmaple2.html", 2);

マウスオーバー時にメニューを表示させる場合の例は、以下のようになります。
/* オブジェクトを作成します。 */
//callTypeパラメータに"hover"を指定します。
//固定位置にメニューを表示させる場合、positonパラメータに"absolute”を指定します。
//表示位置の設定はtop,leftパラメータで指定する事ができます。
//top,leftパラメータは、呼び出し元エレメントの左上端を座標[0,0]としています。
var cntxt = new UsefulCntxt({
    id:"samplemenu",
    title:"サンプルメニュー1",
    callType:"hover",
    position:"absolute",
    top:30,
    left:0
});

/* メニューボタンを追加します。 */
cntxt.addItem("サブメニュー1", "./example1.html");
cntxt.addItem("サブメニュー2", func1);

3. 呼び出し元エレメントにメニューを設定します。
呼び出し元のエレメントのタグに"callmenu"属性を追記します。
値には呼び出すコンテキストメニューオブジェクトのIDを指定します。
<!-- 以下のdivエレメントはIDが"samplemenu"であるコンテキストメニューを呼び出します。 -->
<div callmenu="samplemenu">メニューの呼び出し先</div>
概要へ

カスタマイズ

コンテキストメニューの機能やデザインのカスタマイズは、UsefulCntxtオブジェクトを作成する際に幾つかのパラメータを指定する事で設定できます。
/* カスタマイズの例 */
//この例では以下のようなカスタマイズを行っています。
//●クリックによって、呼び出し元の左上端からtop:30,left:0の位置に固定表示させる。
//●コンテキストメニュー全体と、タイトル、閉じるボタンに対するスタイルクラス名を独自の物に設定。
var cntxt = new UsefulCntxt({
    id:"custmaizedmenu",
    title:"カスタマイズメニュー",
    callType:"click",
    position:"absolute",
    top:30,
    left:0,
    classTable:"cust_table",
    classTitle:"cust_title",
    classClose:"cust_close",
    classClose_Hover:"cust_closeH",
    classClose_Click:"cust_closeC"
});

オブジェクト作成時に設定できるパラメータは以下の通りです。
id コンテキストメニューのIDを設定します。
未指定の場合は"UsefulCntxt"が設定されます。
同じIDが複数作成された場合、2つ目以降からIDには"_1","_2","_3",...がj自動で付加されます。
title コンテキストメニューのタイトルを設定します。
未指定の場合は"Menu"が設定されます。
callType コンテキストメニューの呼び出し方法を指定します。設定可能な値は以下の通りです。
"click":クリックされるとコンテキストメニューが表示されます。
"hover":マウスオーバーされるとコンテキストメニューが表示されます。
デフォルトでは"click"が設定されています。
position コンテキストメニューの表示位置を指定します。設定可能な値は以下の通りです。
"pointed":コンテキストメニューはマウスがクリックされた位置を左上端として表示されます。
"absolute":コンテキストメニューはtop,leftパラメータに指定された位置を左上端として表示されます。
デフォルトでは"pointed"が設定されています。
top positionパラメータを"absolute"に指定した場合のみ有効です。
コンテキストメニューの上端の位置を指定します。呼び出し元のエレメントの上端が0となります。
整数のみが指定可能で、マイナスの数も指定する事ができます。
未指定の場合、0が設定されます。
left positionパラメータを"absolute"に指定した場合のみ有効です。
コンテキストメニューの左端の位置を指定します。呼び出し元のエレメントの左端が0となります。
整数のみが指定可能で、マイナスの数も指定する事ができます。
未指定の場合、0が設定されます。
overflow positionパラメータを"pointed"に指定した場合のみ有効です。
コンテキストメニューがブラウザの表示範囲からはみ出て表示されても良いか、設定します。
falseを指定すると、コンテキストメニューはブラウザの表示範囲からはみ出ないように努めます。
デフォルトではfalseが指定されています。
classTable コンテキストメニュー全体のスタイルクラスを設定します。
デフォルトでは"UserCntxtTable"が指定されています。
(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)
classHeader コンテキストメニューのヘッダ行のスタイルクラスを設定します。
デフォルトでは"UserCntxtHeader"が指定されています。
(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)
classTitle コンテキストメニューのタイトルセルのスタイルクラスを設定します。
デフォルトでは"UserCntxtTitle"が指定されています。
(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)
classClose classClose_Hover classClose_Click コンテキストメニューの閉じるボタンセルのスタイルクラスを設定します。
上から「未操作時」、「マウスオーバー時」、「マウスボタン押下時」の場合に対応します。
デフォルトでは"UserCntxtClose","UserCntxtClose_Hover","UserCntxtClose_Click"が指定されています。
(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)
classItem classItem_Hover classItem_Click classItem_Sleep コンテキストメニューの各メニューボタンセルのスタイルクラスを設定します。
上から「未操作時」、「マウスオーバー時」、「マウスボタン押下時」、「未使用状態時」の場合に対応します。
デフォルトでは"UserCntxtItem","UserCntxtItem_Hover","UserCntxtItem_Click","UserCntxtItem_Sleep"
が指定されています。
(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)
bindAuto このパラメータにfalseを設定すると、コンテキストメニューは呼び出し元エレメントに自動で登録されなくなります。
登録を行う場合には、bindElement()関数を指定する必要があります。
デフォルトではtrueが指定されています。

※デザインのカスタマイズに関しましては、usefulcntxt.cssの内容を修正する事でも行うができます。
 この方法の場合、UsefulCntxtを利用した全てのコンテキストメニューに設定内容が反映されます。
 個々のコンテキストメニューのデザインをカスタマイズしたい場合は、パラメータ指定が必要となります。
概要へ

関数リファレンス

UsefulCntxtにはコンテキストメニューの設定に関するいくつかの関数があります。
addItem(title, action, [index]) : メニューボタンの追加
コンテキストメニューにメニューボタンを追加します。
titleにはメニューボタンに表示されるテキストを指定します。
actionが関数の場合、設定されるメニューボタン押下時に指定された関数を実行します。
actionがURL文字列の場合、設定されるメニューボタン押下時に指定されたURLへ移動します。
indexに1以上の整数を指定した場合、指定された位置にメニューボタンが追加されます。
getSelfId() : コンテキストメニューのIDの取得
コンテキストメニューのIDを取得します。
setItemClass(classname, index) : 個々のメニューボタンのスタイルクラスを設定
indexに指定された位置のメニューボタンの未操作時のスタイルクラスをclassnameに設定します。
indexの先頭の値は1です。
sleepItem(index) : メニューボタンを操作不可にする
indexに指定された位置のメニューボタンを操作不可にします。
indexの先頭の値は1です。
awakeItem(index) : メニューボタンを操作可能にする
indexに指定された位置のメニューボタンを操作可能にします。
indexの先頭の値は1です。
hideItem(index) : メニューボタンを隠す
indexに指定された位置のメニューボタンを非表示にします。
indexの先頭の値は1です。
appearItem(index) : メニューボタンを表示する
indexに指定された位置のメニューボタンを表示します。
indexの先頭の値は1です。
bindElement(element) : エレメントにコンテキストメニューを登録する
elementに指定されたエレメントにコンテキストメニューを登録します。
UsefulCntxtはbindAutoパラメータにfalseを指定されない限り、自動でコンテキストメニューの登録を行います。
しかしページ内のDOM階層が非常に深い場合、この自動登録の動作が正常に機能しない場合があります。
そのような場合には自動登録動作を停止させ、こちらの関数を使用する事で正常に登録させる事ができます。
概要へ

更新履歴

2010/01/21  Ver1.0公開
2010/01/27  Ver1.1公開  firefox3での不具合を修正
概要へ

ダウンロード

以下のリンクからダウンロードする事ができます。
UsefulCntxt.zip (Ver1.1)
ページのトップ