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>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/appContainer/src/ApplicationController.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/appContainer/src/ApplicationController.css">
<form action="jsp/welcome-json.jsp">
<label>名前</label><input type="text" id="name" value="たろう" />
<p data-h5-bind="message">名前を入力して送信ボタンをクリックしてください</p>
<input type="submit" />
</form>
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() {
h5.core.controller('body', h5.ui.container.ApplicationController);
// ダミー実行
$.ajax = function(data) {
var name = $("#name").val();
var deffered = h5.async.deferred();
var p = deffered.promise();
p.dataTypes = ["text", "html"];
setTimeout(function() {
deffered.resolve("<div>"+name+"さん、こんにちは</div>");
}, 1000);
return p;
}
});