form.html 11.67 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.bootstrap.css">
<link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
<title>Input Mode Switcher</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<!-- remove this
<img src="mockData/Scan2a.jpeg" class="qfq-fabric-image" id="qfq-fabric-image-1"> </img>
-->
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="qfq-form-title">
This is a title
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul id="qfqTabs" class="nav nav-pills qfq-form-pill qfq-color-grey-1" role="tablist">
<li role="presentation" class="active">
<a href="#">Active</a>
</li>
<li role="presentation">
<a href="#">Inactive</a>
</li>
</ul>
</div>
</div>
<form class="form-horizontal clearfix">
<div class="col-md-12 qfq-form-body qfq-color-grey-2">
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label> </div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<!-- Start Subrecords -->
<div class="form-group clearfix">
<table class="table qfq-subrecord-table">
<caption class="qfq-subrecord-title">
Subrecords Title
</caption>
<thead>
<tr class="qfq-subrecord-head">
<th class="qfq-table-button-width">
<a class="btn btn-default" href="#" title="New"><span class="glyphicon glyphicon-plus"></span></a>
</th>
<th>
#
</th>
<th>
Name
</th>
<th>
Date
</th>
<th class="qfq-table-button-width">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="btn btn-default" href="#" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td>1</td>
<td>Test</td>
<td>01.07.18</td>
<td><button type="button" class="record-delete btn btn-default" data-sip="5b6d9eb7c18aa" title="Delete"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>
<tr>
<td>
<a class="btn btn-default" href="#" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a>
</td> <td>2</td>
<td>Test</td>
<td>01.07.18</td>
<td><button type="button" class="record-delete btn btn-default" data-sip="5b6d9eb7c18aa" title="Delete"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>
<tr>
<td>
<a class="btn btn-default" href="#" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td>3</td>
<td>Test</td>
<td>01.07.18</td>
<td><button type="button" class="record-delete btn btn-default" data-sip="5b6d9eb7c18aa" title="Delete"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>
<tr>
<td>
<a class="btn btn-default" href="#" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a>
</td>
<td>4</td>
<td>Test</td>
<td>01.07.18</td>
<td><button type="button" class="record-delete btn btn-default" data-sip="5b6d9eb7c18aa" title="Delete"><span class="glyphicon glyphicon-trash"></span></button></td>
</tr>
</tbody>
</table>
</div>
<!-- End Subrecords -->
</div>
</form>
<p style="height: 40px;"></p>
<div class="row">
<div class="col-md-12">
<div class="qfq-form-title">
This is a title
</div>
</div>
</div>
<form class="form-horizontal">
<div class="col-md-12 qfq-form-body qfq-color-grey-2">
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-field">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div> <div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label">
Name
</label>
</div>
<div class="col-md-6"><input class="form-control" type="text"></div>
<div class="col-md-3"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/fabric.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script src="../javascript/src/Plugins/qfq.fabric.js"></script>
<script type="text/javascript">
$(function () {
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
});
QfqNS.Log.level = 0;
// Just for mockup, init() function called from new QfqNS.Plugin class maybe.
});
</script>
</body>
</html>