将jSignature添加到引导窗体

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

在使用dev工具进一步检查时，我注意到签名div的高度是0px。我最终将这段代码添加到脚本中：

​

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

​

这至少显示了现在的签名捕获。

Answer 2

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

​

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

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

<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>

​