hifiveで提供しているUIライブラリの一つ、右クリックメニュー（コンテクストメニュー）の使い方を紹介します。
まずはサンプルです。
任意のDOM以下に対して右クリックメニューを有効にしたり、メニュー内容の切り替えもできます。
動作しているサンプルはこちらで確認できます。
複雑な処理も可能ですが、今回は簡単に実装できる方法を紹介します。
必要なライブラリ
今回のメニュー表示はhifive本体の他、次のライブラリが必要になります。
作り方
まずHTMLですが次のように記述します。この .contextMenuBox 以下に対して右クリックメニューが有効になります。そして、メニューとして表示する内容は対象になるDOM以下に記述します。今回は .contextMenu 以下の内容になります。
そして、JavaScriptは次のように記述します。h5.ui.ContextMenuController を指定するだけで完了です。これで .contextMenuBox に対して右クリックメニューが有効になります。
さらにメニューを選択した際のイベントを管理したい場合はコントローラ内で次のように記述します。DOMが取れますので自由に処理ができるでしょう。
さらに複数のDOMについて管理したり、メニューの内容をダイナミックに変更したりするサンプルは右クリックメニューをご覧ください。ごく簡単に右クリックメニューが実現できますので、UI/UXの向上に役立ててください。
