JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/arrowbox/src/arrowbox.css">
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/arrowbox/src/arrowbox.js"></script>
<div class="sampleDiv sampleDiv1">
<button class="sample-btn" data-direction="up">上</button>
<button class="sample-btn" data-direction="right">右</button>
<button class="sample-btn" data-direction="down">下</button>
<button class="sample-btn" data-direction="left">左</button>
</div>
<script type="text/ejs" id="h5arrowbox">
<div class="h5arrowbox"></div>
</script>
<script type="text/ejs" id="message">
<div>
<p>吹き出しサンプル</p>
<p>吹き出しサンプルです</p>
<button class="removeArrowBox" style="float:right">OK</button>
</div>
</script>
CSS
.sampleDiv {
position: relative;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
width: 300px;
padding: 10px;
top: 200px;
border: 1px solid #ccc;
text-align: center;
}
JavaScript
(function() {
var controller = {
__name: 'PageController',
_arrowboxController: h5.ui.components.arrowbox.ArrowBoxController,
__ready: function() {
},
'.sample-btn click': function(context, $el) {
var direction = $el.data('direction');
var $target = $el.parent();
var arrowbox = this._arrowboxController.create(this.view.get('message'));
arrowbox.show({
target: $target,
direction: direction
});
},
'.removeArrowBox click': function(context, $el) {
// 吹き出し要素の取得
var $arrowbox = $el.parents('.h5arrowbox');
// ArrowBoxインスタンスの取り出し
var arrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox);
// 吹き出しの削除
arrowbox.dispose();
}
};
h5.core.expose(controller);
})();
$(function() {
h5.core.controller('body', PageController);
});