hifiveのUIライブラリの紹介「右クリックメニュー」

by moongift : 2017/03/01

hifiveで提供しているUIライブラリの一つ、右クリックメニュー（コンテクストメニュー）の使い方を紹介します。

まずはサンプルです。

任意のDOM以下に対して右クリックメニューを有効にしたり、メニュー内容の切り替えもできます。

複雑な処理も可能ですが、今回は簡単に実装できる方法を紹介します。

今回のメニュー表示はhifive本体の他、次のライブラリが必要になります。

まずHTMLですが次のように記述します。この .contextMenuBox 以下に対して右クリックメニューが有効になります。そして、メニューとして表示する内容は対象になるDOM以下に記述します。今回は .contextMenu 以下の内容になります。

 <div class="contextMenuBox">
 	<ul class="dropdown-menu contextMenu" role="menu" aria-labelledby="dLabel">
 		<li><a tabindex="-1" href="#">Action</a></li>
 		<li><a tabindex="-1" href="#">Another action</a></li>
 		<li><a tabindex="-1" href="#">Something else here</a></li>
 		<li class="divider"></li>
 		<li><a tabindex="-1" href="#">Separated link</a></li>
 		<li class="dropdown-submenu">
 			<a tabindex="-1" href="#">More options</a>
 			<ul class="dropdown-menu">
 				<li><a tabindex="-1" href="#">Second level link</a></li>
 				<li><a tabindex="-1" href="#">Second level link</a></li>
 				<li><a tabindex="-1" href="#">Second level link</a></li>
 				<li><a tabindex="-1" href="#">Second level link</a></li>
 				<li><a tabindex="-1" href="#">Second level link</a></li>
 				<li class="dropdown-submenu">
 					<a tabindex="-1" href="#">More options</a>
 					<ul class="dropdown-menu">
 						<li><a tabindex="-1" href="#">Third level link</a></li>
 						<li><a tabindex="-1" href="#">Third level link</a></li>
 						<li><a tabindex="-1" href="#">Third level link</a></li>
 						<li><a tabindex="-1" href="#">Third level link</a></li>
 					</ul>
 				</li>
 			</ul>
 		</li>
 	</ul>
 </div>

view raw

replace.js

hosted with ❤ by GitHub

そして、JavaScriptは次のように記述します。h5.ui.ContextMenuController を指定するだけで完了です。これで .contextMenuBox に対して右クリックメニューが有効になります。

	$(function() {
	var contextMenuTestController = {

	__name: 'ContextMenuTestController',

	contextMenuController: h5.ui.ContextMenuController,

	__ready: function(context) {
	},
	};

	h5.core.controller('.contextMenuBox', contextMenuTestController);
	});

view raw

index.html

hosted with ❤ by GitHub

さらにメニューを選択した際のイベントを管理したい場合はコントローラ内で次のように記述します。DOMが取れますので自由に処理ができるでしょう。

 'a click': function(context, $el) {
   // イベント処理
   $("body").append($el.text() + "が選択されました<br />");
 }

view raw

context.js

hosted with ❤ by GitHub

さらに複数のDOMについて管理したり、メニューの内容をダイナミックに変更したりするサンプルは右クリックメニューをご覧ください。ごく簡単に右クリックメニューが実現できますので、UI/UXの向上に役立ててください。

From → HTML5

コメントは受け付けていません。

最近の投稿