<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/jqx.base.css" rel="stylesheet">
<link href="../css/jqx.bootstrap.css" rel="stylesheet">
<link href="../css/qfq-bs.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/tablesorter-bootstrap.css" rel="stylesheet">
<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 class="btn btn-default navbar-btn" id="save-button" type="button"><span
class="glyphicon glyphicon-ok"></span></button>
<button class="btn btn-default navbar-btn" id="close-button" type="button"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-default navbar-btn" id="delete-button" type="button"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a class="btn btn-default navbar-btn" href="personmock.html?s=badcaffe1" id="form-new-button"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<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 class="nav nav-pills qfq-form-pill qfq-color-grey-1" id="qfqTabs" role="tablist">
<li class="active" role="presentation">
<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">
<!--row: Checkbox Plain Multi Horizontal -->
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-right">Checkbox Horizontal</label>
</div>
<div class="col-md-6" required="required">
<label class="checkbox-inline" id="1039-21332-1-0-0-l">
<input checked="checked" id="1039-21332-1-0-0" name="groups-1[]"
required="required" type="checkbox" value="1">
label1
<span aria="hidden" class="checkmark"></span>
</label>
<label class="checkbox-inline" id="1039-21332-1-0-2-l">
<input id="1039-21332-1-2-0" name="groups-1[]"
required="required" type="checkbox" value="2">
label2
<span aria="hidden" class="checkmark"></span>
</label>
</div>
<div class="col-md-3"></div>
</div>
<!--row: Checkbox Plain Multi Vertical -->
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-right">Checkbox Vertical</label>
</div>
<div class="col-md-6" required="required">
<label class="checkbox" id="1039-21332-2-0-0-l">
<input checked="checked" id="1039-21332-2-0-0" name="groups-2[]"
required="required" type="checkbox" value="1">
label1
<span aria="hidden" class="checkmark"></span>
</label>
<label class="checkbox" id="1039-21332-2-0-2-l">
<input id="1039-21332-2-2-0" name="groups-2[]"
required="required" type="checkbox" value="2">
label2
<span aria="hidden" class="checkmark"></span>
</label>
</div>
<div class="col-md-3"></div>
</div>
<!--row: Input-->
<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>
<!--row: Checkbox BS Multi Horizontal -->
<div class="form-group clearfix">
<div class="col-md-3 qfq-label">
<label class="control-label required-right">Checkbox BS Horizontal</label>
</div>
<div class="col-md-6" required="required">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" id="1039-21332-3-0-0-l">
<input checked="checked" id="1039-21332-3-0-0" name="groups-1[]"
required="required" type="checkbox" value="1">
label1
</label>
<label class="btn btn-default" id="1039-21332-3-0-2-l">
<input id="1039-21332-3-2-0" name="groups-1[]"
required="required" type="checkbox" value="2">
label2
</label>
</div>
</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/qfq.fabric.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="../js/jquery.tablesorter.combined.min.js"></script>
<script src="../js/jquery.tablesorter.pager.min.js"></script>
<script src="../js/widget-columnSelector.min.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>