コンテンツへスキップ

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

by : 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の向上に役立ててください。

右クリックメニュー

banner_02

From → HTML5

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

%d人のブロガーが「いいね」をつけました。