将jSignature添加到Bootstrap表单

Question

我正在尝试将jSignature小部件添加到标准的Bootstrap表单中，但到目前为止没有任何内容出现在表单上（其他表单字段显示正常）。

这是我的表格：

<form id="saveEvent" action="index.php" method="post">
  <div class="form-group">
    <label for="yourName">Your Name</label>
    <input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
  </div>

  <div class="form-group">
    <label for="yourSignature">Your Signature</label>
    <div id="signature"></div>
  </div>
  <hr />
  <button type="reset" class="btn btn-default">Reset</button>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

我按照正确的顺序将所有文件包含在页面底部：

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>

<!--[if lt IE 9]>
	<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
	<![endif]-->

<script>
  $(document).ready(function() {
    $("#signature").jSignature()
  })
</script>

但签名画布未显示。这是我看到的屏幕截图，如果有帮助：

我现在没有收到任何服务器错误或控制台错误，所以这是我第一次使用jSignature。

Answer 1

在使用开发工具进一步检查后，我注意到签名div的高度为0px。我最后将其添加到脚本中：

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#signature").jSignature({
    height: 200
  });
  $("#signature").resize();
})

＆＃13;

＆＃13;

＆＃13;

这至少会显示签名捕获。

Answer 2

您好，现在此代码正常运行，请检查您的代码是否正确

Ref this code

＆＃13;

＆＃13;

$('#signature').signature();

＆＃13;

#signature{
 width:300px;
  height:200px;
  border:solid 1px red;
}

＆＃13;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet"> 
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>



<form id="saveEvent" action="index.php" method="post">
  <div class="form-group">
    <label for="yourName">Your Name</label>
    <input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
  </div>

  <div class="form-group">
    <label for="yourSignature">Your Signature</label>
    <div id="signature"></div>
  </div>
  <hr />
  <button type="reset" class="btn btn-default">Reset</button>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;