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>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/calendar/src/CalendarController.css">
<script src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/jquery-ui-1.9.1.custom.min.js"></script>
<link rel="stylesheet" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">tab1</div>
<div id="tabs-2">tab2</div>
<div id="tabs-3">tab3</div>
</div>
JavaScript
$(function() {
var controller = {
__name: 'TabsController',
// 初期化処理
__ready: function() {
var that = this;
// jQuery UI Tabsを設定
$(this.rootElement).tabs({
// タブが選択された時のコールバックを設定
// ownメソッドでラップしてイベントコンテキストやロジックを使えるようにしている。
select: that.own(that.selectTab)
});
},
// タブが選択された時のコールバック
selectTab: function(event, ui) {
$(ui.panel).html('tab' + (ui.index + 1) + 'が選択されました。');
}
};
// コントローラの作成と要素へのバインド.
h5.core.controller('#tabs', controller);
});