<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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/qfq-bs.css">
<title>Character Count</title>
</head>
<body>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<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"
data-class-on-change="wdc"><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>
<form id="myForm" class="form-horizontal" data-toggle="validator">
<div id="formgroup1" class="form-group">
<div class="col-md-2">
<label for="textarea1" class="control-label">Text area (unlimited)</label>
</div>
<div class="col-md-6">
<textarea id="textarea1" class="form-control qfq-character-count" name="textarea1"
data-character-count-id="charcount1" required></textarea>
<div class="character-counter" style="color: grey; font-size: 10pt;">Character
<span id="charcount1"></span></div>
<div class="help-block with-errors hidden"></div>
</div>
<div>
</div>
</div>
<div id="formgroup2" class="form-group">
<div class="col-md-2">
<label for="textarea2" class="control-label">Text area (limited)</label>
</div>
<div class="col-md-6">
<textarea id="textarea2" class="form-control qfq-character-count" name="textarea2" maxlength="20"
data-character-count-id="charcount2"></textarea>
<div id="charcount2">1/20</div>
</div>
</div>
<div id="formgroup3" class="form-group">
<div class="col-md-2">
<label for="textinput1" class="control-label">Textinput (limited)</label>
</div>
<div class="col-md-6">
<input id="textinput1" class="form-control qfq-character-count" name="input1" type="text"
data-character-count-id="charcount3" maxlength="30">
<div class="character-counter" style="color: grey; font-size: 10pt;">Character
<span id="charcount3"></span></div>
<div class="help-block with-errors hidden"></div>
</div>
<div>
</div>
</div>
</form>
</div>
<script type="text/x-handlebars-template">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.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/typeahead.bundle.min.js"></script>
<script src="../js/qfq.debug.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(),
typeAheadUrl: 'api/typeahead.php'
});
QfqNS.Log.level = 0;
});
</script>
</body>
</html>