JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://hifive.github.io/hifive-res/ext/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/h5.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/contextMenu/src/contextMenu.js"></script>
<div class="contextMenuBox">
<!--
<div class="contextMenuBox" data-targetall="false">
<button class="contextMenuBtn btn">contextMenuBtn</button>
-->
<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>
</li>
</ul>
</div>
CSS
.contextMenuBox, ._contextMenuBox{
width:100%;
height:100px;
background-color: #99ccff;
position:relative;
}
JavaScript
$(function() {
var contextMenuTestController = {
__name: 'ContextMenuTestController',
contextMenuController: h5.ui.ContextMenuController,
__ready: function(context) {
},
'a click': function(context, $el) {
$("body").append($el.text() + "が選択されました<br />");
}
};
h5.core.controller('.contextMenuBox', contextMenuTestController);
});