<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Powered
Forms and
Form.io SDK</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./js/bootstrap.min.js"></script>
<script src="./js/
formio.js"></script>
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-light bg-light mb-4 p-0">
<div
class="container" style="height: 60px;">
Demo
</div>
</nav>
<div
class="container-fluid">
<div
class="row">
<div
class="col-sm-8">
<h3
class="text-center text-muted">表单生成器允许您构建
<select
class="
form-
control" id="
form-select" style="display: inline-block; width: 150px;">
<option
value="
form">
Form</option>
<option
value="
wizard">
Wizard</option>
<option
value="pdf">PDF</option>
</select>
</h3>
<div id="builder"></div>
</div>
<div
class="col-sm-4">
<h3
class="text-center text-muted">JSON 代码</h3>
<div
class="card card-body bg-light jsonviewer">
<pre id="json"></pre>
</div>
</div>
</div>
<div
class="row mt-4">
<div
class="col-sm-8 offset-sm-2">
<h3
class="text-center text-muted">它在您的应用程序中呈现为表单</h3>
<div id="
formio"
class="card card-body bg-light"></div>
</div>
<div
class="clearfix"></div>
</div>
<div
class="row mt-4">
<div
class="col-sm-8 offset-sm-2">
<h3
class="text-center text-muted">提交JSON</h3>
<div
class="card card-body bg-light jsonviewer">
<pre id="subjson"></pre>
</div>
</div>
<div
class="clearfix"></div>
</div>
<div
class="row card card-body bg-light mt-4">
<div
class="container">
<div
class="row">
<div
class="col-md-8">
<p>Getting started is as easy as...</p>
<pre style="background-color: white;">git clone https://github.com/
formio/
formio.git
cd
formio
npm install
node server
</pre>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var jsonElement = document.getElementById('json');
var
formElement = document.getElementById('
formio');
var subJSON = document.getElementById('subjson');
var builder = null;
var setDisplay = function (display) {
if (builder) {
builder.destroy();
document.getElementById("builder").innerHTML = '';
}
Formio.builder(document.getElementById("builder"), {
display: display,
components: [],
settings: {
pdf: {
"id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
// "src": "https://files.
form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
}
}
}, {
// baseUrl: 'https://examples.
form.io'
}).then(function (instance) {
builder = instance;
var on
Form = function (
form) {
form.on('change', function () {
subJSON.innerHTML = '';
subJSON.appendChild(document.createTextNode(JSON.stringify(
form.submission, null, 4)));
});
};
var onBuild = function (build) {
jsonElement.innerHTML = '';
formElement.innerHTML = '';
jsonElement.appendChild(document.createTextNode(JSON.stringify(instance.schema, null, 4)));
Formio.create
Form(
formElement, instance.
form).then(on
Form);
};
var onReady = function () {
var jsonElement = document.getElementById('json');
var
formElement = document.getElementById('
formio');
instance.on('change', onBuild);
};
instance.ready.then(onReady);
});
};
// Handle the
form selection.
var
formSelect = document.getElementById('
form-select');
formSelect.addEventListener("change", function () {
setDisplay(this.
value);
});
setDisplay('
form');
</script>
<script src='./js/
formio.full.min.js'></script>
<link rel='stylesheet' href='./css/
formio.full.min.css'>
</body>
</html>使用vue3进行编写
扫一扫
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
