2019-04-05 20:48:34 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>JQAB</title>
|
|
|
|
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<!-- jQuery -->
|
|
|
|
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap -->
|
|
|
|
|
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
|
|
|
|
|
<link type="text/css" href="css/bootstrap-theme.css" rel="stylesheet" />
|
|
|
|
|
<script type="text/javascript" src="js/bootstrap.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Handlebars -->
|
|
|
|
|
<script type="text/javascript" src="js/handlebars.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Alpaca -->
|
|
|
|
|
<script type="text/javascript" src="js/alpaca.min.js"></script>
|
|
|
|
|
<link type="text/css" href="css/alpaca.min.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Beautify (used by EditorField) -->
|
|
|
|
|
<script src="js/beautify.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="js/beautify-css.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
<script src="js/beautify-html.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
|
|
|
|
|
<!-- typeahead.js -->
|
|
|
|
|
<script src="js/bloodhound.min.js" type="text/javascript"></script>
|
|
|
|
|
<script src="js/typeahead.bundle.min.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<!-- datatables (for TableField) -->
|
|
|
|
|
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
|
|
|
|
|
<script src="js/dataTables.bootstrap.js" type="text/javascript"></script>
|
|
|
|
|
<script src="js/dataTables.rowReorder.js" type="text/javascript"></script>
|
|
|
|
|
<link type="text/css" href="css/dataTables.bootstrap.css" rel="stylesheet"/>
|
|
|
|
|
|
|
|
|
|
<!-- ckeditor (for the ckeditor field) -->
|
|
|
|
|
<script src="js/ckeditor.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
|
|
<!-- fileupload control (for UploadField) -->
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/jquery.fileupload.css"/>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/jquery.fileupload-ui.css"/>
|
|
|
|
|
<script src="js/jquery.ui.widget.js"></script>
|
|
|
|
|
<script src="js/jquery.iframe-transport.js"></script>
|
|
|
|
|
<script src="js/jquery.fileupload.js"></script>
|
|
|
|
|
<script src="js/jquery.fileupload-process.js"></script>
|
|
|
|
|
<script src="js/jquery.fileupload-ui.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- handsontable (for GridField) -->
|
|
|
|
|
<script src="js/handsontable.full.js"></script>
|
|
|
|
|
<link rel="stylesheet" media="screen" href="css/handsontable.full.css"/>
|
|
|
|
|
|
|
|
|
|
<!-- moment for date and datetime controls -->
|
|
|
|
|
<script src="js/moment-with-locales.min.js"></script>
|
|
|
|
|
<!-- bootstrap datetimepicker for date and datetime controls -->
|
|
|
|
|
<script src="js/bootstrap-datetimepicker.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" media="screen" href="css/bootstrap-datetimepicker.css"/>
|
|
|
|
|
|
|
|
|
|
<!-- bootstrap-multiselect for time field -->
|
|
|
|
|
<script src="js/bootstrap-multiselect.js"></script>
|
|
|
|
|
<link rel="stylesheet" media="screen" href="css/bootstrap-multiselect.css"/>
|
|
|
|
|
|
|
|
|
|
<!-- jQuery Price Format for currency field -->
|
|
|
|
|
<script type="text/javascript" src="js/jquery.priceformat.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- ACE editor -->
|
|
|
|
|
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
|
|
|
|
|
<!-- jQuery UI for draggable support -->
|
|
|
|
|
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="js/form-builder.js"></script>
|
|
|
|
|
<link type="text/css" href="css/form-builder.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body data-spy="scroll" data-target=".demo-nav">
|
|
|
|
|
|
|
|
|
|
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
|
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
|
|
|
<div class="navbar-header">
|
|
|
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
|
|
|
|
|
<span class="sr-only">Toggle navigation</span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
</button>
|
|
|
|
|
<a class="navbar-brand" href="/">JQAB</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
|
|
|
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
|
|
|
|
<ul class="nav navbar-nav">
|
|
|
|
|
<li class="active"><a href="form-builder.html">Form Builder</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div>
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
|
|
|
<li class="active"><a href="form-builder.html#source" data-toggle="tab" class="tab-item tab-item-source">Source</a></li>
|
|
|
|
|
<li><a href="form-builder.html#designer" data-toggle="tab" class="tab-item tab-item-designer">Designer</a></li>
|
|
|
|
|
<li><a href="form-builder.html#view" data-toggle="tab" class="tab-item tab-item-view">View</a></li>
|
|
|
|
|
<li><a href="form-builder.html#code" data-toggle="tab" class="tab-item tab-item-code">Code</a></li>
|
|
|
|
|
<li><a href="form-builder.html#loadsave" data-toggle="tab" class="tab-item tab-item-loadsave">Load / Save</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-content">
|
|
|
|
|
<div class="tab-pane active" id="source">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div>
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
|
|
|
<li class="active"><a href="form-builder.html#schema" data-toggle="tab" class="tab-source-schema">Schema</a></li>
|
|
|
|
|
<li><a href="form-builder.html#options" data-toggle="tab" class="tab-source-options">Options</a></li>
|
|
|
|
|
<li><a href="form-builder.html#data" data-toggle="tab" class="tab-source-data">Data</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-content">
|
|
|
|
|
<div class="tab-pane active" id="schema">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane" id="options">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane" id="data">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div>
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
|
|
|
<li class="active"><a href="form-builder.html#preview" data-toggle="tab">Preview</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-content">
|
|
|
|
|
<div class="tab-pane active" id="preview">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div id="previewDiv"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane" id="designer">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div id="designerDiv"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-5">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div>
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
|
|
|
<li class="active"><a href="form-builder.html#types" data-toggle="tab">Types</a></li>
|
|
|
|
|
<li><a href="form-builder.html#basic" data-toggle="tab">Basic</a></li>
|
|
|
|
|
<li><a href="form-builder.html#advanced" data-toggle="tab">Advanced</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-content">
|
|
|
|
|
<div class="tab-pane active" id="types"></div>
|
|
|
|
|
<div class="tab-pane" id="basic"></div>
|
|
|
|
|
<div class="tab-pane" id="advanced"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane" id="view">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div id="viewDiv"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane" id="code">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div id="codeDiv"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-pane" id="loadsave">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
|
|
|
|
|
<button class="btn btn-default load-button">Load Form</button>
|
|
|
|
|
<br/>
|
|
|
|
|
<br/>
|
|
|
|
|
<button class="btn btn-default save-button">Save Form</button>
|
|
|
|
|
<br/>
|
2019-04-07 18:48:48 +00:00
|
|
|
<br/>
|
|
|
|
|
<br/>
|
|
|
|
|
<input id="form" type="text" />
|
|
|
|
|
<select class="select-form"></select>
|
2019-04-05 20:48:34 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
