コンテキストメニュー実装スクリプトライブラリUsefulCntxtは、Webページでコンテキストメニューをシンプルに実装するための、クロスブラウザ対応のスクリプトライブラリです。機能やデザインのカスタマイズも容易に行う事が出来ます。1.サンプル2.実装方法3.カスタマイズ4.関数リファレンス5.更新履歴6.ダウンロード概要へサンプル●クリックすることで、クリック位置にコンテキストメニューを表示させるサンプルです。サンプルボタン1●マウスオーバーすることで、固定位置にコンテキストメニューを表示させるサンプルです。htmlヘッダにusefulcntxt.jsとusefulcntxt.cssを追記します。UsefulCntxtのオブジェクトを用意します。単純にクリック位置にコンテキストメニューを表示させる場合、用意するスクリプトは最もシンプルに済みます。オブジェクトを作成します。*///同時にIDとタイトルを設定しておきます。メニューボタンを追加します。*///第二引数にURL文字列を指定すると、ボタン押下後に指定されたURLへ移動します。"./example1.html");//第二引数に関数を指定すると、ボタン押下後に指定された関数を実行します。func1);//第三引数に数値を指定すると、指定された位置にメニューボタンを追加します。//メニューボタンの位置は「1」から始まります。2);マウスオーバー時にメニューを表示させる場合の例は、以下のようになります。オブジェクトを作成します。*///callTypeパラメータに"hover"を指定します。//固定位置にメニューを表示させる場合、positonパラメータに"absolute”を指定します。//表示位置の設定はtop,leftパラメータで指定する事ができます。//top,leftパラメータは、呼び出し元エレメントの左上端を座標[0,0]としています。メニューボタンを追加します。呼び出し元エレメントにメニューを設定します。呼び出し元のエレメントのタグに"callmenu"属性を追記します。値には呼び出すコンテキストメニューオブジェクトのIDを指定します。以下のdivエレメントはIDが"samplemenu"であるコンテキストメニューを呼び出します。callmenu="samplemenu">メニューの呼び出し先</div>概要へカスタマイズコンテキストメニューの機能やデザインのカスタマイズは、UsefulCntxtオブジェクトを作成する際に幾つかのパラメータを指定する事で設定できます。*///この例では以下のようなカスタマイズを行っています。//●クリックによって、呼び出し元の左上端からtop:30,left:0の位置に固定表示させる。//●コンテキストメニュー全体と、タイトル、閉じるボタンに対するスタイルクラス名を独自の物に設定。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"が設定されています。toppositionパラメータを"absolute"に指定した場合のみ有効です。コンテキストメニューの上端の位置を指定します。呼び出し元のエレメントの上端が0となります。整数のみが指定可能で、マイナスの数も指定する事ができます。未指定の場合、0が設定されます。leftpositionパラメータを"absolute"に指定した場合のみ有効です。コンテキストメニューの左端の位置を指定します。呼び出し元のエレメントの左端が0となります。整数のみが指定可能で、マイナスの数も指定する事ができます。未指定の場合、0が設定されます。overflowpositionパラメータを"pointed"に指定した場合のみ有効です。コンテキストメニューがブラウザの表示範囲からはみ出て表示されても良いか、設定します。falseを指定すると、コンテキストメニューはブラウザの表示範囲からはみ出ないように努めます。デフォルトではfalseが指定されています。classTableコンテキストメニュー全体のスタイルクラスを設定します。デフォルトでは"UserCntxtTable"が指定されています。(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)classHeaderコンテキストメニューのヘッダ行のスタイルクラスを設定します。デフォルトでは"UserCntxtHeader"が指定されています。(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)classTitleコンテキストメニューのタイトルセルのスタイルクラスを設定します。デフォルトでは"UserCntxtTitle"が指定されています。(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。classClose_Clickコンテキストメニューの閉じるボタンセルのスタイルクラスを設定します。上から「未操作時」、「マウスオーバー時」、「マウスボタン押下時」の場合に対応します。デフォルトでは"UserCntxtClose","UserCntxtClose_Hover","UserCntxtClose_Click"が指定されています。(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。classItem_Sleepコンテキストメニューの各メニューボタンセルのスタイルクラスを設定します。デフォルトでは"UserCntxtItem","UserCntxtItem_Hover","UserCntxtItem_Click","UserCntxtItem_Sleep"が指定されています。(これはusefulcntxt.cssに予め登録されているスタイルクラス名称です。)bindAutoこのパラメータにfalseを設定すると、コンテキストメニューは呼び出し元エレメントに自動で登録されなくなります。登録を行う場合には、bindElement()関数を指定する必要があります。デフォルトではtrueが指定されています。※デザインのカスタマイズに関しましては、usefulcntxt.cssの内容を修正する事でも行うができます。この方法の場合、UsefulCntxtを利用した全てのコンテキストメニューに設定内容が反映されます。個々のコンテキストメニューのデザインをカスタマイズしたい場合は、パラメータ指定が必要となります。概要へ関数リファレンスUsefulCntxtにはコンテキストメニューの設定に関するいくつかの関数があります。メニューボタンの追加コンテキストメニューにメニューボタンを追加します。titleにはメニューボタンに表示されるテキストを指定します。actionが関数の場合、設定されるメニューボタン押下時に指定された関数を実行します。actionがURL文字列の場合、設定されるメニューボタン押下時に指定されたURLへ移動します。indexに1以上の整数を指定した場合、指定された位置にメニューボタンが追加されます。コンテキストメニューのIDの取得コンテキストメニューのIDを取得します。個々のメニューボタンのスタイルクラスを設定indexに指定された位置のメニューボタンの未操作時のスタイルクラスをclassnameに設定します。indexの先頭の値は1です。メニューボタンを操作不可にするindexに指定された位置のメニューボタンを操作不可にします。indexの先頭の値は1です。メニューボタンを操作可能にするindexに指定された位置のメニューボタンを操作可能にします。indexの先頭の値は1です。メニューボタンを隠すindexに指定された位置のメニューボタンを非表示にします。indexの先頭の値は1です。メニューボタンを表示するindexに指定された位置のメニューボタンを表示します。indexの先頭の値は1です。エレメントにコンテキストメニューを登録するelementに指定されたエレメントにコンテキストメニューを登録します。UsefulCntxtはbindAutoパラメータにfalseを指定されない限り、自動でコンテキストメニューの登録を行います。ページ内のDOM階層が非常に深い場合、この自動登録の動作が正常に機能しない場合があります。そのような場合には自動登録動作を停止させ、こちらの関数を使用する事で正常に登録させる事ができます。概要へダウンロード以下のリンクからダウンロードする事ができます。